Dealing with CORS Issues
If your frontend and backend are hosted on different domains (for example, your frontend is on https://example.com
and your backend is on https://api.example.com
), you need to configure your backend CORS headers to prevent requests from being blocked by the browser.
Sentry doesn't attach the sentry-trace
and baggage
(and optionally traceparent
) headers to every outgoing request. Instead, it only attaches these headers to requests whose URLs match the patterns specified in the tracePropagationTargets
configuration option.
By default, tracePropagationTargets
is set to ['localhost', /^\//]
, which means trace headers are only attached to:
- Requests containing
localhost
in their URL (e.g.,http://localhost:3000/api
) - Requests whose URL starts with
/
(e.g.,/api/users
,/graphql
)
This default behavior helps prevent sending trace data to third-party services and avoids potential CORS issues.
To enable distributed tracing across different domains, you need to configure tracePropagationTargets
to include the URLs of your backend services:
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0example-org / example-project",
integrations: [Sentry.browserTracingIntegration()],
tracePropagationTargets: [
"localhost", // For local development
/^\/api\//, // For same-origin API calls
"https://api.example.com", // For your backend domain
"https://auth.example.com", // For additional services
],
});
Once you've configured tracePropagationTargets
to include your backend domains, you need to configure your backend to allow the trace headers:
Access-Control-Allow-Headers: sentry-trace, baggage
Your server's exact configuration will depend on your setup, but the important part is allowing both the sentry-trace
and baggage
headers.
If you set propagateTraceparent
option to true
, you also need to allow the traceparent
header:
Access-Control-Allow-Headers: sentry-trace, baggage, traceparent
If you want to disable distributed tracing entirely and ensure no trace headers are sent:
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0example-org / example-project",
// Empty array prevents all trace header propagation
tracePropagationTargets: [],
});
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").