See the full picture

Step 7. See the full picture

Reload http://localhost:5173. Click Add twice, Checkout, Call broken API, then Throw error. In the Network tab, POST /v1/replay/chunks on port 4319 answers 202 every few seconds. Switch to another tab for a moment, then wait up to a minute.

Your visit is now one session in ouo11y. Every signal in it carries the same session.id, so rum-api puts them on one line:

0s8s15s23s30s

0ssession.start

0snavigation(entry) -> /

1sGET /api/products

2sweb_vitalTTFB, FCP

5scart.addedCoffee

7scart.addedTea

9sPOST /api/checkout

13sGET /api/fail

14shttp.request.failedGET /api/fail 500

18sexceptionError: Button exploded, fatal

24sweb_vitalLCP, INP, CLS, when hidden

The session you just made, roughly. Your times will differ. The fatal exception makes it crashed.

What you should see

In Grafana, More apps → ouo11y RUM → Sessions, open the newest session:

• the header says crashed, with 1 crash, 1 failed request and its traces;
• the activity list next to the replay has the navigation, the Web Vitals, both cart.added, the failed request and the exception;
• the Replay panel plays what you clicked;
• each trace opens in Tempo, from the browser’s fetch span to the API’s charge card.

1. tiny-shop-otel-frontendPOST
   190 ms
2. tiny-shop-otel-backendPOST /api/checkout
   158 ms
3. checkout
   151 ms
4. validate cart
   30 ms
5. charge card
   121 ms

The checkout trace, opened from the session. The browser's fetch span is its root.

This is the same session the ouo11y SDK would have produced, from code you own. Nothing in your browser bundle is ouo11y code: open frontend/package.json and every dependency is React, OpenTelemetry, rrweb or web-vitals.

Next: what the SDK adds on top.