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, the @sentry/nextjs SDK will automatically connect pageload navigations in the frontend with the request transaction that serves the page on the backend.

The SDK will return additional props from your configured Next.js data fetchers that the SDK picks up in to browser to connect the pageload transaction with the backend request.

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/nextjs
Version:
7.54.0
Repository:
https://github.com/getsentry/sentry-javascript