Correlate Frontend RUM With Backend Traces (2026)

Q: How do you correlate real user monitoring with backend traces?

Start a span in the browser when the user interacts, propagate the W3C traceparent header on fetch and XHR calls to your own APIs, and continue the trace on the backend. For page navigations, where no JavaScript can add a header, have the server return the trace ID in a Server-Timing header that the RUM SDK reads. Store trace ID and session ID on every RUM event and join on trace ID.

Q: Why does RUM show a slow interaction when APM shows a fast API?

APM measures server time per request, from arrival at your service to the response being written. RUM measures what the user perceives, including DNS, TLS, CORS preflight, main-thread JavaScript before the request and rendering after the response. Their percentiles are also over different populations. Without a shared trace ID, the gap between the two numbers has no address and each team blames the other.

Q: Should the browser fetch or the user interaction be the root span?

The interaction. If the fetch is the root span, main-thread work before the request leaves the browser and render work after the response arrives fall outside every trace, and that is often most of a slow interaction. Starting the root span on input and ending it at the next paint makes the browser time, network time and server time parts of one trace that adds up to what the user felt.

Q: Does adding a traceparent header cause CORS problems?

Yes, on cross-origin requests. traceparent is not a CORS-safelisted header, so the browser sends a preflight OPTIONS request first, and the target must list traceparent in Access-Control-Allow-Headers or the real request is blocked. That is why you propagate only to an explicit allowlist of first-party API hosts, and set Access-Control-Max-Age so browsers cache the preflight instead of repeating it.

Q: How do you get a trace ID for a full page navigation?

The browser makes the navigation request before your JavaScript runs, so nothing can inject a traceparent header. Instead the server starts the trace and returns its ID in a Server-Timing response header. The RUM SDK reads it through the PerformanceServerTiming interface on the navigation timing entry. Cross-origin access requires Timing-Allow-Origin, and you should put only the trace ID in the header, not infrastructure timings.

Q: How should traces that start in the browser be sampled?

Decide once per session in the browser and send the decision in the sampled flag of traceparent. Every backend service should use a parent-based sampler that honours the flag; a service with its own ratio sampler drops spans from traces the browser kept and produces half-traces. Sampling each request independently is also wrong: at 10 per cent per request, a three-call interaction is fully traced only 0.1 per cent of the time.

Q: Is it safe to trust the sampled flag from the browser?

Not without limits. The flag arrives from the public internet, so anyone can send sampled=1 on every request and make you store all of their traffic. Treat it as a request, not a command: cap how much honoured sampling one client or session can trigger at the edge, and re-decide for requests without a valid session. It is a cost control in the same family as rate limiting and cardinality caps.

Q: When is frontend-to-backend trace correlation not worth building?

When pages do not call APIs after load, field Core Web Vitals plus a Server-Timing trace ID on documents is enough. When an internal tool has a few dozen users, session replay and good logs answer more questions for less effort. The full interaction-root architecture pays when you have interactive flows calling APIs, enough traffic for percentiles to mean something, and two teams arguing about whose milliseconds they are.

Satyam Kumar

ブログに戻る

architecture

The Click Is the Root Span: Correlating Frontend RUM With Backend Traces in 2026

By Satyam KumarOctober 30, 202614 min read

real user monitoring rum apm correlation distributed tracing w3c trace context traceparent header opentelemetry browser interaction to next paint core web vitals server-timing header cors preflight trace sampling parent-based sampling frontend observability sentry tracing web performance observability architecture

The Click Is the Root Span: Correlating Frontend RUM With Backend Traces in 2026

Frequently Asked Questions

この記事を共有する

Twitter LinkedIn WhatsApp

Satyam Kumar

Founder & AI Architect, AppScale LLP

AI＆クラウドアーキテクト。数百万人にスケールするシステム構築を支援。

LinkedIn GitHub

The Click Is the Root Span: Correlating Frontend RUM With Backend Traces in 2026

Frequently Asked Questions

この記事を共有する

Comments

Leave a comment