If you use New Relic to monitor end-user browser activity, you can take advantage of distributed tracing to see browser-side traces that originate from the end-user experience.
Trace activity from frontend to backend
By reporting browser data in distributed tracing, you can see the connection between frontend activity and backend activity. New Relic traces data across a full transaction, from time spent by an end user in the web browser, to network activity, to associated backend services. This helps you:
- Spot latencies, errors, and anomalies in the browser or network more easily.
- Resolve customer-facing problems more quickly.
- Apply all the benefits of distributed tracing to your end-user monitoring.
This feature reports AJAX requests (
XHR) that occur during a browser interaction. By default, only single-origin requests are monitored unless cross-origin resource sharing is enabled.
Browser and APM versions
Make sure you have the necessary minimum versions for your browser monitoring agent and your agent:
- For distributed tracing: Browser Pro+SPA agent with distributed tracing enabled and Browser agent version 1153 or higher
- For cross-origin resource sharing: Browser agent version 1158 or higher
- For W3C trace context support: Browser agent version 1173 or higher
- Java 5.9.0 or higher
- PHP 9.4.0 or higher
- Other APM agent version requirements
Enable distributed tracing
By default, for agent version 1173 and higher, the
tracestate headers will be added to all same-origin AJAX requests. (If you exclude them, no headers will be sent.) For more information, see our documentation about W3C trace context headers.
To enable distributed tracing for browser monitoring:
- Make sure your browser monitoring agent and APM agent are compatible with distributed tracing. Update to the most recent version if applicable.
- Go to one.newrelic.com > Browser > (select an app) > Settings > Application settings.
- Turn on the Distributed tracing toggle.
- Optional: Enable cross-origin resource sharing.
- Redeploy the browser monitoring agent, either by restarting the associated APM agent or by updating the copy/paste browser installation.
- If you have apps or services that are downstream from your browser app and they use Infinite Tracing, complete the setup steps for Infinite Tracing.
W3C trace context headers
With the release of browser monitoring agent version 1173, we support the W3C trace context headers (
tracestate), so be sure to allow them in your configuration. W3C trace context defines a pair of standardized context HTTP headers that serve to propagate context correlation information between services:
traceparentheader contains the data elements that every distributed tracing model requires to define and propagate context: a trace ID, a parent ID, and a sample flag.
tracestateheader holds vendor-specific, contextual data, typically in order to support additional functionality or optimizations associated with a particular tracing tool.
For more information about W3C trace context, see our blog post.
Enable cross-origin resource sharing (CORS)
If you have AJAX requests that need resources from different origins, you can enable cross-origin resource sharing (CORS). By default, distributed tracing for cross-origin requests is not enabled because of browser CORS security restrictions: Distributed tracing is implemented by adding custom HTTP headers (
tracestate) to outgoing AJAX requests, and browsers typically do not allow custom headers on cross-origin requests.
There are two separate configurations required to enable cross-origin distributed tracing:
- Configure the service on the different origin to accept the
- Configure browser monitoring in your Application settings to include the target origin in distributed tracing.
This section provides key concepts and steps to enable and configure CORS. If you need more background about how cross-origin resource sharing works, we recommend this Mozilla developer document.
As explained in the following section, cross-origin resource sharing can expose you to a high level of risk if the services on the different origins are not configured correctly. We recommend that you read the next three sections sequentially.
Enable Infinite Tracing
We offer a tail-based distributed tracing feature called Infinite Tracing. If your browser apps have downstream services, be sure to enable it. This ensures that your root span (the initiating browser app) is included in the rest of the spans tracked by Infinite Tracing.
To set up Infinite Tracing:
- Complete the steps to enable distributed tracing.
- Go to our Infinite Tracing documentation, then follow the steps to create a trace observer and to select which apps (data sources) you want to send trace spans to the Infinite Tracing trace observer.
Explore your trace data
Here are some tips for finding and querying your trace data in New Relic.
If you want to...
Examine traces originating from end-user experience
Go to any distributed tracing page in the New Relic UI.
View end-user spans
In the distributed tracing UI, end-user spans are indicated with the icon. To see a span's attributes, select a span in the UI.
Query span data
Spans are reported as
If you don't see end-user spans or are having other distributed tracing issues, see our troubleshooting documentation.