Skip to content
ouo11y

Quickstarts

Each quickstart starts from an empty folder and ends with something you can see in Grafana. You write every file yourself, one step at a time, and each step says what you should see before you move on. Every file is on the page, and the finished folder is a download, so you never need our repository.

All three use the same small shop: a React page and an Express API. That way the differences are only in what you are learning.

You build
React shopquickstart 1, 3: @ouo11y/browser
quickstart 2: plain OpenTelemetry
Express APIOpenTelemetry Node SDK
You run
The ouo11y stackcollector · Tempo · Loki · Mimir · rum-api · Grafana
You see
A crashed sessionits trace, timeline and replay
A funnelquickstart 3: where shoppers dropped off
The same shop in all three. What changes is how the browser is instrumented and what you look at in Grafana.

The series

Section titled “The series”
1. Tiny ShopStart here. Trace an API with OpenTelemetry, add @ouo11y/browser to the shop, and follow one crashed session from the click to the API's spans and the replay. About 30 minutes.
2. Tiny Shop without our SDKThe same shop with no ouo11y code in the browser: the OpenTelemetry JS SDK, rrweb and web-vitals, written by hand to the contract ouo11y reads. Same sessions, same traces, same replay. About 45 minutes.
3. FunnelsPage views and custom events as funnel steps, fifty generated shoppers, a funnel in Grafana, and the replay of a shopper who gave up. About 40 minutes.

Which one first?

Section titled “Which one first?”
  • New to ouo11y: quickstart 1. It is the shortest path to a session you can open.
  • You cannot ship vendor code in your bundle, or want to know exactly what goes over the wire: quickstart 2. It is the proof that you do not need our SDK.
  • You want product analytics on top of RUM: quickstart 3, after 1.

What you need

Section titled “What you need”

Node 24 or newer, Docker Desktop, and a terminal. Each quickstart checks your tools in its first step.