Browser data in distributed tracing works with the Pro and Pro+SPA browser agent. Read the docs
Checking for browser agent…
New Relic distributed tracing

Follow
the click.

Press a button and follow one request from this page, across the network, and into the services behind it. Every hop lands in the same trace, and so do the logs written along the way.

Start tracing Jump to the query
traceparent The agent adds trace headers to your page's own requests, plus any origins you allow under CORS. A backend with a New Relic APM agent reads them and joins the same trace. This page shows you the exact headers on every request.
Trace 4bf92f35…4736412 ms
click: Run checkout browser
POST /api/checkout ajax
api/checkout API
  internal/inventory API
  internal/payment API
browsernetworkbackendinternal call
Your data is tagged as … NR-XXXX Change

Your name and code are attached to your browser data as demoUser and demoCode (your name also becomes your end-user ID via setUserId()), and sent to the backend, which tags its transactions too. The inspector also keeps the trace ID of every request you make, so the queries below can look up exactly your traces.

Your code is NR-XXXX. It stays the same on every page until you click New code or close this tab.

Try it / Generate traces

Send some requests

Each click is a browser interaction, and each request made during it gets its own trace. The inspector on the right shows the headers the agent added, whether the backend joined the trace, and the log this page wrote for it.

Trace mode Browser-only Requests go to static files on this site. You will see browser spans and real trace headers.
What the agent adds

Headers on your last request

These are the real values the browser agent attached. traceparent is the W3C standard header. tracestate and newrelic carry New Relic's account and app details so the trace is stitched together correctly.

Send a request below to see its trace headers.
Logs in the trace

Put your logs on the same trace

The agent puts trace headers on your requests automatically, but it does not add a trace ID to browser logs from newrelic.log() or wrapLogger(). Add it yourself as trace.id, the attribute New Relic uses to show logs on a trace. A key like traceId would be saved but not linked.

Added to every browser log

  • session, the browser session ID
  • ptid, the page view's trace ID
  • pageUrl and your custom attributes, like demoCode

You add per request

  • trace.id from the traceparent your request carried (this page captures it)
  • or from the response: the demo backend returns x-trace-id, exposed through CORS
// After a request: log with the same trace ID the request carried
const traceId = traceparent.split('-')[1]  // version-TRACEID-parentId-flags
newrelic.log('GET /api/products 200', {
  level: 'info',
  customAttributes: { 'trace.id': traceId, requestUrl: '/api/products' }
})

On the server, the Node.js agent's newrelic.recordLogEvent() adds trace.id and span.id for you, so checkout writes three backend logs (inventory, payment, checkout) onto your trace. Successful requests log at INFO, so set your app's manual log verbosity to INFO or lower in Application settings.

1 · A single request

fetch and XHR

Both request styles are traced the same way. Compare their headers in the inspector.

2 · A user journey

Checkout flow

One click, three requests in a row: cart, checkout, order. With the backend, checkout also calls internal inventory and payment services, which appear as child spans in the same trace.

3 · When things go wrong

Slow and failing calls

Traces show you where the time went and which hop failed. Slow and server-error calls need the backend.

4 · Cross-origin

Requests that are not traced

Browsers block custom headers on cross-origin requests unless the other server allows them. So the agent only adds trace headers to origins you list under CORS in Application settings.

Find it / Search the shared account

Find your traces

Allow a minute or two for traces to arrive. The first query uses the trace IDs captured from your own requests, so it matches only your traces.

Your traces, by trace ID

  1. Open the query builder in New Relic and run this. Browser spans show browserApp.name; backend spans show appName.
  2. To see a waterfall, open Distributed tracing and search for one of these trace IDs.
Send a request above to fill in your trace IDs.
Open New Relic

Your logs, browser and backend together

  1. Run this to see every log written on your traces. Browser logs have a session; backend logs have a span.id.
  2. Or open any of your traces in Distributed tracing and look at its Logs tab.
Send a request above to fill in your trace IDs.

Your requests, from the browser

Every request is also an AjaxRequest event tagged with your code.


          

        

        

          
Your requests, from the backend

          
With the backend connected, its transactions carry your code too.

          

          

        

      

      

        
No backend spans?In browser-only mode that is expected. Static files have no APM agent. Connect the backend in backend/README.md to see the full path.

        
No INFO logs?Successful requests log at INFO. If your app keeps only WARN and above, raise the manual log verbosity under Browser > Application settings.

        
Backend not joining?Add its origin under CORS in Application settings, then re-copy the snippet into the pages. The inspector tells you which step is missing.

        
Learn moreBrowser data in distributed tracing · W3C Trace Context