Custom Instrumentation
On this page you will learn how to manually propagate trace information into and out of your JavaScript application.
Distributed tracing will be set up automatically if:
- You've Set Up Performance in Sentry.
- You're using one of the SDKs that include distributed tracing out of the box:
@sentry/nextjs
@sentry/sveltekit
@sentry/remix
@sentry/astro
If you are using a different package, and have not enabled performance monitoring, you can manually set up your application for distributed tracing to work.
For distributed tracing to work, the two headers that you extracted and stored in the active root span, sentry-trace
and baggage
, must be added to outgoing HTTP requests.
Here's an example of how to collect and inject this tracing information to outgoing requests:
const activeSpan = Sentry.getActiveSpan();
const rootSpan = activeSpan ? Sentry.getRootSpan(activeSpan) : undefined;
// Create `sentry-trace` header
const sentryTraceHeader = rootSpan
? Sentry.spanToTraceHeader(rootSpan)
: undefined;
// Create `baggage` header
const sentryBaggageHeader = rootSpan
? Sentry.spanToBaggageHeader(rootSpan)
: undefined;
// Make outgoing request
fetch('https://example.com', {
method: 'GET',
headers: {
baggage: sentryBaggageHeader,
'sentry-trace': sentryTraceHeader,
},
}).then(response => {
// ...
});
In this example, tracing information is propagated to the project running at https://example.com
. If this project uses a Sentry SDK, it will extract and save the tracing information for later use.
The two services are now connected with your custom distributed tracing implementation.
If you make outgoing requests from your project to other services, check if the headers sentry-trace
and baggage
are present in the request. If so, distributed tracing is working.
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").