Correlating Frontend and Backend Traces
Propagate trace context through fetch requests so backend spans appear under the same trace as the triggering UI action.
The Distributed Trace Goal
The ultimate goal of frontend observability is a single trace that connects a user's click in React through the network, through API handlers, through service calls, and down to the database query that caused a slow response. This end-to-end trace makes root cause analysis instant.
W3C TraceContext Standard
The W3C TraceContext specification defines the traceparent header format: version-traceId-parentSpanId-flags. A sample value looks like: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. The trace ID is shared across the entire distributed trace; the parent span ID changes at each hop.
All lessons in this course
- Frontend Observability: What and Why
- OpenTelemetry Traces from the Browser
- Real User Monitoring and Web Vitals
- Correlating Frontend and Backend Traces