5. See it in Grafana

Everything is running: the stack, the traced API, and the instrumented page. Now use the shop like a visitor who has a bad day, and find each part of that visit in Grafana.

Step 7. See the full picture

On http://localhost:5173, click Add twice, Checkout, Call broken API, then Throw error. Wait up to a minute.

0s15s30s45s60s

0ssession.start

0snavigationlocalhost:5173

1sGET /api/products

3sweb_vitalWeb Vitals of the page

6scart.addedcustom event

9scart.addedcustom event

14sPOST /api/checkout

24sGET /api/fail

25shttp.request.failed500 GET /api/fail

32sexceptionButton exploded, uncaught

Your visit as the SDK records it: one session.id on every row. Times are an example.

One trace across both apps

Explore → Tempo → TraceQL:

TraceQL

{ resource.service.name = "tiny-shop-backend" && name = "charge card" }

Open the newest trace. Its root is now the browser:

1. tiny-shop-frontendPOSTfetch span, @ouo11y/browser
   192 ms
2. tiny-shop-backendPOST /api/checkoutHTTP server span · session.id, user.id from baggage
   158 ms
3. middleware - corsMiddleware
   1 ms
4. middleware - jsonParser
   2 ms
5. request handler - /api/checkout
   1 ms
6. checkout
   152 ms
7. validate cart
   31 ms
8. charge card
   121 ms

The checkout trace now starts in the browser. Two services, one trace id. Durations are illustrative.

Click any backend span: session.id and user.id are on it, copied from the browser’s baggage by the BaggageSpanProcessor. That is how you go from a backend span to the session of the person who caused it.

Note

The root is still POST /api/checkout, without the browser span? propagateTo does not match the API URL (use the RegExp), or the page was not reloaded after editing rum.js.

Browser events

Explore → Loki:

LogQL

{service_name="tiny-shop-frontend"}

You see session.start, navigation, cart.added, http.request.failed (the 500), exception (the thrown error) and web_vital records, each with session_id. Each is an OpenTelemetry log record with an event.name; Loki shows the attribute session.id as session_id.

The session

More apps → ouo11y RUM → Sessions.

What you should see

Your session is crashed (the uncaught error), with its traces and a replay of what you clicked: the same visit you just found piece by piece in Tempo and Loki, in one place.

A session’s status is the worst thing that happened in it: an uncaught exception makes it crashed, a failed request or a handled exception errored, nothing at all healthy. See Sessions and health.

You are done. The last page stops the stack and lists what to check when something does not work.