"Observability for the Front End"
summary
Claim: OpenTelemetry can trace browser requests end-to-end but it’s partial and fiddly. Uses OpenTelemetry protocol with W3C traceparent headers, demo ties a browser span through checkout to backend services (demo uses 10 languages, Jager and Honeycomb backends). Automatic fetch and ajax spans and document-load metrics work; user-interaction spans often fail in React so manual wiring (and Zone for Angular) is required. Built demos (observaquiz, RUM integration) mostly work but require extra code to get reliable causality.
AI-written summary · about
chapters (13)
- 0:00Front-end observability intro
- 2:07What is OpenTelemetry and why it matters
- 4:58Observability defined
- 7:46OpenTelemetry service maps
- 8:50Live OpenTelemetry demo
- 13:54Understanding distributed traces in depth
- 18:29OpenTelemetry backend today
- 19:12Front-end observability tools
- 21:42Browser instrumentation
- 24:14Front-end tracing limits
- 26:18Front-end observability vision
- 28:09Get involved with OpenTelemetry
- 29:14Observability 2.0 future
related talks
17mObservability in frontend: React Open Telemetry
22mTracing is for Everyone, Not Just Backend Engineers. (How Tracing Could Help Front-e...
17mUnlocking Observability with React & Node.js
40mObservability for All!
32mObservability for Frontend Engineers
44mOpenTelemetry in the JavaScript World: Taming Observability in Web Apps
43mObservability for React applications
22mFrontend Observability Odyssey