Cross-Origin Demo

Demo application with separate frontend and backend.

How-To-Run

Observability backend

Start the Observability backend via cd docker & docker compose up. The following services will be running:

• Jaeger, port 16686
• Grafana, port 3000 (user: admin, password: demo)

inspectIT EUM

To provide tracing for the frontend, start the EUM server via java -jar inspectit-eum/inspectit-ocelot-eum-server-2.6.5.jar

The application.yml enables the exporters.

inspectIT Configuration Server

Start the configuration server via java -jar inspectit-ocelot/inspectit-ocelot-configurationserver-SNAPSHOT.jar

The server will run on localhost:8090. The configuration is already prepared.

Frontend

Start the frontend via cd frontend & python -m http.server 8000

You can use any port to run the frontend.

Backend with inspectIT Ocelot

Run the backend with an attached agent from the project root via java -javaagent:"inspectit-ocelot/inspectit-ocelot-agent-SNAPSHOT.jar" -Dinspectit.service-name=my-session-agent -Dinspectit.config.http.url=http://localhost:8090/api/v1/agent/configuration -jar backend.jar

Demo

Access the web page via localhost:8000. You might need to reload the page until some Baggage is displayed. This is required, because some classes of this demo cannot be instrumented at the beginning.

• After that, at page load a baggage header will be sent to the backend with the tag browser=Chrome, which will be stored for the session. It is a hardcoded example tag, which will only be sent at page load.

• During this initial request a hardcoded session-ID will be created by the agent itself and up propagated to the web page via baggage header. The page will use this session-ID when the button is clicked. Additionally, the session ID will be added to all spans created by the boomerang-opentelemetry-plugin. Note that the session will expire after roughly 5 minutes. After that, tags will be removed from the storage.

• When clicking the button, the session ID stored in the frontend will be sent to the agent to access the session storage. This allows to reuse the tag browser=Chrome. The spans resulting from the click will contain the tag. Additionally, a new tag calledURL=localhost:1234 will be up propagated via baggage header and stored for the session, when the button is clicked. Again, this is just a hardcoded example tag.

• When the page is loaded again, the calledURL tag will still be up-propagated because of the hardcoded session-ID.

Screenshots

The web page showing the received baggage header:

---

Tags stored for session can be accessed in separate requests:

---

Tags from backend can be up-propagated and used for spans in the frontend: