Not getting baggage and sentry-trace headers for fetch requests in React

[jamescrosswell]

I'm trying to get a super simple app running that will call a backend server (could be written in anything) and will send through sentry-trace and baggage headers... so basically Sentry's browser tracing feature. I've been banging my head against this for a couple of hours now without any success though. Hoping someone here can help spot my mistake.

Events are coming through to Sentry... I see error details and Replay sessions in there. However these aren't tied with any Trace to events in the backend application (which is also logging events/errors just fine... but obviously not correlated to anything on the front end, as there's no trace header that could be used for that).

I must be making some noob mistake...

index.js (less the imports)

Sentry.init({
  dsn: "...my dsn here (not this, obviously)", 
  debug: true,
  integrations: [
    new Sentry.BrowserTracing({
    tracePropagationTargets: ["localhost", "localhost:59740", /.*/],
    }),
    new Sentry.Replay({
      networkDetailAllowUrls: [
        window.location.origin,
        /.*/,
      ],
      networkRequestHeaders: ["referrer", "sentry-trace", "baggage"],
      networkResponseHeaders: ["Server"],
    }),
  ],
  tracesSampleRate: 1.0, 
  replaysSessionSampleRate: 1.0, 
  replaysOnErrorSampleRate: 1.0, 
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

App.js (less the imports)

function App() {

  const sayHello  = async () => {
    const transaction = Sentry.startTransaction({ name: "saying hello" });
    var response;
    try
    {
        response = await fetch('http://localhost:59740/hello', {
        method: 'GET',
        headers: {
          Accept: 'application/json',
        },
      });
    }
    finally
    {
      transaction.finish();
    }
    if (!response.ok) {
      alert(`Error! status: ${response.status}`);
      return;
    }
    const result = await response.text();
    alert(result);
 }

  return (
    <div className="App">
      <button onClick={sayHello}>Say gidday</button>
    </div>
  );
}

export default App;

Relevant dependencies in packages.json:

    "@sentry/react": "^7.57.0",
    "react": "^18.2.0",

[AbhiPrasad]

hey @jamescrosswell

we rely on looking up a span/transaction on an internal storage we call the scope to determine if it's "active" or not. This is what we use to automatically attach spans generated from integrations as well as grab the active span to attach tracing headers.

So what you need to do here is to

const transaction = Sentry.startTransaction({ name: "saying hello" });
Sentry.configureScope(scope => {
  scope.setSpan(transaction);
});

// ... do fetch request logic here

Soon though we'll be officially releasing a helper to make this easy, in the meantime it's still exported so you can use it.

function App() {
  const sayHello  = async () => {
   const response = await Sentry.trace({ name: 'saying hello' }, () => {
     return fetch('http://localhost:59740/hello', {
        method: 'GET',
        headers: {
          Accept: 'application/json',
        },
      });
   });
    const result = await response.text();
    alert(result);
 }

  return (
    <div className="App">
      <button onClick={sayHello}>Say gidday</button>
    </div>
  );
}

export default App;

It's not a great experience - we are actively working on making it better! See the RFC (that I'm also working on) to propose this new callback API for all of our SDKs. getsentry/rfcs#101

[jamescrosswell]

By the way, I didn't find that little nugget you just shared in any of:

• Getting Started
• Set Up Performance
• Performance Troubleshooting

I originally tried to set things up in Svelte... which didn't work and thought maybe something svelte specific, so tried again in React and eventually Angular. Of course, I was making the same mistake in all of them and there were no docs indicating how to do this the right way.

Maybe worth adding, at the very least, to the troubleshooting section of the docs?

[AbhiPrasad]

Maybe worth adding, at the very least, to the troubleshooting section of the docs?

Once we've merged in the RFC we'll be updating all of our docs to use this method!

[AbhiPrasad]

Our custom instrumentation docs do outline setting the transaction on the scope

[abentpole]

Is this still required, even if you're not using custom instrumentation?

[AbhiPrasad]

@abentpole with 8.x things have changed here, if you are using any of the startSpanX APIs you don't need to set the transactions explicitly on the scope.

If you need clarification, I recommend opening a new GH discussion. We can chat there!

[joshacheson]

@AbhiPrasad I'm having the same issue described here (no baggage or sentry-trace headers going up with requests). Relevant things I can think of to mention:

Package versions:

        "@sentry/integrations": "^7.75.0",
        "@sentry/react": "^7.75.0",
        "@sentry/utils": "^7.75.0",

Relevant Config:

        tracesSampleRate: 1.0,
        tracePropagationTargets: [/.*/, 'mydomain.com'], // stripped out our real domain, but the catch all regex should pass in every case i think?

I'm not using BrowserTracing because i don't want automatic instrumentation, instead calling Sentry.addTracingExtensions(); before the call to Sentry.init(). Though it's worth saying that I have tried turning automatic instrumentation on using the conventional/recommended approach ,but still no luck with the headers.

Finally, usage looks like:

            //... in the context of a "save button handler"
            return Sentry.startSpan({ name: 'Span Testing' }, () => {
                return apiClient.request({
                    method: 'POST',
                    url: 'some_api_url',
                    data: someData,
                });
            });

I can clearly see the request for this transaction/span going out to sentry and the transaction appears in the Performance tab for our app, but no headers which I understand will mean distributed transactions wont work. I've tried all the variants of the new span APIs as well as the legacy approach with a transaction (including setting it as the active span for the scope and not doing that). Any thoughts?

Also for what it's worth we had these headers sending in a previous version of the sentry client. I'm not sure if something meaningfully changed since ~7.17.

[AbhiPrasad]

If you're not using BrowserTracing, you'll have to still instrument the requests.

import * as Sentry from '@sentry/browser';

Sentry.instrumentOutgoingRequests({
  // you'll have to duplicate tracePropagationTargets from Sentry.init
  tracePropagationTargets: ...
});

[joshacheson]

Thanks for such a quick reply! When I am using BrowserTracing, I have the same issue. Two questions:

• Should I include options like tracePropogationTargets in the constructor options to BrowserTracing, or to Sentry.init? (edit: I see that this is no longer an option to the BrowserTracing constructor)
• Given that the issue happens in both cases, does anything otherwise stand out as wrong to you about my configuration?

[AbhiPrasad]

If using BrowserTracing still leads to no headers being attached then there's something strange going on. Can you try using /^\/(?!\/)/ as your catch-all regex?