Sentry integration does not attach tracing headers to axios XHR requests when used with react-query

[damian-broniowski]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

7.52.1

Framework Version

18.2.0

Link to Sentry event

No response

SDK Setup

  Sentry.init({
    dsn: process.env.SENTRY_DSN,
    integrations: [
      new BrowserTracing({
        routingInstrumentation: Sentry.reactRouterV6Instrumentation(
          React.useEffect,
          useLocation,
          useNavigationType,
          createRoutesFromChildren,
          matchRoutes,
        ),
        tracePropagationTargets: [/api\.([^.]+)\.trajector\.cloud/],
      }),
    ],

    tracesSampleRate: 1,
    environment: process.env.NODE_ENV,
    release: process.env.VERSION,
  });

Steps to Reproduce

Use axios with react-query.

useQuery({
    queryKey: [queryKeys.FeatureFlags],
    queryFn: apiRoutes.auth.getFeatureFlags,
    suspense: true,
  });

Expected Result

XHR request to API server should contain sentry headers for distributed tracing

Actual Result

[lforst]

Hey, can you share a small reproduction app where this is happening? Thanks!

As a general note: Tracing headers are only attached when there is an active transaction on the page. Out of the box, this is only during page loads and page navigations.

[damian-broniowski]

@lforst So this fix still applies then?

#3169

You need to manually set up transaction for each outgoing XHR request using interceptors for example?

[lforst]

I don't quite know what fix you're referring to specifically but yes, apart from page loads and navigations you have to manually instrument interactions if you want to trace them. We do have an experimental feature that allows to trace interactions automatically but it is very experimental (and thus might change or stop working at any point):

Sentry.init({
  integrations: [
    new Sentry.BrowserTracing({
      _experiments: {
        enableInteractions: true,
      },
    }),
  ],
});

[damian-broniowski]

@lforst I meant this one to be exact.
#3169 (comment)

[lforst]

@damian-broniowski Yes you could do something like the comment suggests.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀