Product
API
Sandbox
Sign In

Connect Services

When

tracingThe process of logging the events that took place during a request, often across multiple services.
is enabled, the SDK will attach an outgoing header called sentry-trace to requests. This depends on the out of the box integrations we provide, but you can expect the header sentry-trace to be present. If it's not, you can manually add sentry-trace headers to any requests by learning more about its structure.

SDKs with performance monitoring support listen to incoming requests and typically automatically pick up the incoming sentry-trace header to continue the trace (with the same trace-id) from there, connecting backend and frontend transactions into a single coherent trace using the trace_id value. Depending on the circumstance, this ID is transmitted either in a request header or in an HTML <meta> tag.

All your transactions that have the same trace-id are connected. Linking transactions in this way makes it possible to navigate among them in sentry.io to better understand how the different parts of your system are affecting one another. You can learn more about this model in our Distributed Tracing docs.

For traces that begin in the front end, any requests made (and any requests your backend makes as a result) are linked through the request headers sentry-trace and baggage. The sentry-trace header holds information for identifying the trace, while the W3C compliant baggage header contains additional trace-related data that is used for trace-based sampling.

All of Sentry's

tracingThe process of logging the events that took place during a request, often across multiple services.
-related integrations (BrowserTracing, Http, and Express), as well as the Next.JS SDK, either generate or pick up and propagate the trace headers automatically, as appropriate, for all transactions and spans that they generate.

The JavaScript SDK will only attach the trace headers to outgoing HTTP requests for which the destination is a substring or regex match to the tracePropagationTargets list. tracePropagationTargets was previously called tracingOrigins.

You'll need to configure your web server CORS to allow the sentry-trace and baggage headers. The configuration might look like "Access-Control-Allow-Headers: sentry-trace" and "Access-Control-Allow-Headers: baggage", but the configuration depends on your setup. If you don't allow the sentry-trace and baggage headers, the request might be blocked.

Pageload

For traces that begin in your backend, you can connect the automatically-generated pageload transaction on the frontend with the request transaction that serves the page on the backend. Because JavaScript code running in a browser cannot read the response headers of the current page, the trace data must be transmitted in the response itself, specifically in <meta> tags in the <head> of the HTML sent from your backend.

Copied
<html>
  <head>
    <meta name="sentry-trace" content="{{ span.toTraceparent() }}" />
    <meta name="baggage" content="{{ serializeBaggage(span.getBaggage()) }}" />
    <!-- ... -->
  </head>
</html>

The name attributes must be the strings "sentry-trace" and "baggage" and the content attributes must be generated by your backend Sentry SDK. For sentry-trace, use span.toSentryTrace() (or equivalent, depending on the backend platform). This guarantees that a new and unique value will be generated for each request. For baggage, use serializeBaggage(span.getBaggage()).

The span reference is either the transaction that serves the HTML or any of its child spans. It defines the parent of the pageload transaction.

Once the data is included in the <meta> tags, our BrowserTracing integration will pick them up automatically and link them to the transaction generated on pageload. Note that they will not be linked to automatically-generated navigation transactions — that is, those that don't require a full page reload. Each of those will be the result of a different request transaction on the backend and, therefore, should have a unique trace_id.

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
Suggest an edit to this page   |  Contribute to Docs   |  Report a problem
Package:
npm:@sentry/browser
Version:
7.51.0
Repository:
https://github.com/getsentry/sentry-javascript