The sentry-trace header is not being sent with fetch requests

[taylorlapeyre]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• Provide a link to the affected event from your Sentry account

Example event: https://sentry.io/organizations/project-wren/issues/2399314422/events/85d536082ab64b56bf22835c708d986f/

Package + Version

• @sentry/browser: "^1.4.9",
• @sentry/node: "^6.3.5"
• @sentry/tracing: ""^6.3.5""
• raven-js
• raven-node (raven for node)
• other:

Version:

1.4.9

Description

It seems like the sentry-trace header is not being sent in fetch requests that we send from our app's frontend. We construct our requests this way:

function generateHeaders() {
  const headers = new Headers({
    'Content-Type': 'application/json',
  });

  const token = getSessionToken();

  if (token) {
    headers.set('Authorization', `Bearer ${token}`);
  }

  // another internal header not relevant, 
  headers.set('...', 'something');

  return headers;
}


async function post(endpoint, body) {
  const request = new Request(`${API_URL}/${endpoint}`, {
    method: 'POST',
    headers: generateHeaders(),
    body: JSON.stringify(body),
  });

  const response = await fetch(request);

  if (contentType && contentType.includes('application/json')) {
    const responseBody = await response.json();
    return [response, responseBody];
  }

  return [response, null];
}

We aren't seeing any distributed tracing for our backend service for requests being initiated this way, and the sentry header is not present:

Our Sentry init:

Sentry.init({
  dsn: '...'
  integrations: [
    new Integrations.BrowserTracing(),
    new SentryFullStory('project-wren'),
  ],
  environment: getReleaseStageFromURL(),
  release: window.appVersion,
  tracingOrigins: ['localhost', 'wren.co'],
  ignoreErrors: [
    'disguiseToken',
    'cancelled',
    'Illegal invocation',
    'Failed to load Stripe.js',
    'Non-Error promise rejection captured',
    'chunk',
  ],
  beforeSend(event) {
    const user = getStore().getState().user;
    if (event.exception) {
      Sentry.showReportDialog({
        eventId: event.event_id,
        user: {
          name: user.firstName,
          email: user.email,
        },
      });
    }

    return event;
  },

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 0.5,
});

[kamilogorek]

There has to be an active transaction in order for sentry-trace header to be sent. You can try to call Sentry.getCurrentHub().getScope().getTransaction() just before you send an API request to see whether there's something to be even attached.

[bzeskis]

Hi Taylor, have you managed to find a solution?

[taylorlapeyre]

Hey @bzeskis, yes this can be closed!

[fliespl]

@taylorlapeyre do you mind sharing you solution? Currently struggling with same :) Pageload metrics are being sent, but later on XHR/Fetch requests are not.

[boukeversteegh]

I'm having the same issue. I cannot find documentation that explains how I can configure sentry to keep tracing after the initial pageload.

Sentry.init({
  Vue,
  dsn: config.api.sentry.dsn,
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: [config.hosts.com, config.services.api.host],
    }),
  ],
  tracesSampleRate: 1.0,
})

When I look at the options in BrowserTracing, it implies that it will generate a new transaction automatically on each URL change, and that each transaction lasts at most 1 second.

However, only the very first API request will get a sentry-trace, and everything after doesn't.

---

Update: I found out the issue in my case is not 'first' vs 'subsequent' requests. My first request was done with window.fetch, whereas my follow up requests were done with an API client generated by swagger-codegen (typescript-fetch). Once I change my first request to use the API client as well, no traces are added even for the first request.

In short, there's an issue with tracing using typescript-fetch api clients with sentry, I may report an issue if I cannot solve it.

[boukeversteegh]

Potentially related issue: #4439

[amcsi]

In case anyone runs into the same issue as me where Sentry would attach the appropriate headers to XHR request, but not fetch requests:

Upgrading from @sentry/react v9 to v10 (which in turn also upgrades the @sentry/browser and @sentry/core packages to v10) made it work for me.

See my next comment instead.

[amcsi]

I lied above; it didn't actually work...

However, I did find the real reason why Sentry didn't add the trace headers to fetch...

The culprit was a combination of using immer for fetch's request config, and the way Sentry internally attaches headers to outgoing requests in fetch.

I used immer's produce() function to modify an options object (to be passed to fetch) to include an authorization header. It turns out that immer by default automatically freezes objects returned by the function.

Why is that a problem?

Because Sentry for some reason is implemented such that it mutates the options object you pass to fetch to include the tracing headers. So what would happen is Sentry would try to mutate the headers property in the options object, and it would fail due to the options object being frozen, and then would silently not include the headers. Well, it wouldn't be silent if debug mode were enabled for Sentry.

So yeah, I solved this by not using immer on the options object, ensuring that an options object that's not frozen is passed to Sentry.

Though it would probably be nicer if Sentry didn't mutate the options object passed to fetch at all, and instead cloned it, because you don't know if maybe the caller expects the config object passed to fetch to be left alone.