Replays are not capturing network requests (possibly due to Authorization header)

[billyvg]

Description

This came in from a user in Discover where their fetch requests are not being captured even though it's seemingly configured correctly. After some debugging the user noticed that the requests with an Authorization header were not being captured and a test request without the header was able to be captured.

[mydea]

Are there more details on this, e.g. their exact SDK setup, and an example request (headers, url & body, possibly?) that is/is not captured?

[billyvg]

The user is working on a minimal repro. Below is the config.

Sentry.init({
  debug: true,
  environment: envName(import.meta.env.VITE_REGEN_ENDPOINT),
  dsn: import.meta.env.VITE_SENTRY_DSN,
  tunnel: import.meta.env.VITE_SENTRY_TUNNEL,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.reactRouterV6BrowserTracingIntegration({
      useEffect: React.useEffect,
      useLocation,
      useNavigationType,
      createRoutesFromChildren,
      matchRoutes,
    }),
    Sentry.replayIntegration({
      maskAllInputs: false,
      maskAllText: false,
      blockAllMedia: false,
      networkDetailAllowUrls: [
        window.location.origin,
        import.meta.env.VITE_REGEN_ENDPOINT,
      ],
      _experiments: {
        traceInternals: true,
        captureExceptions: true,
      },
    }),
    Sentry.replayCanvasIntegration(),
  ],
  transport: Sentry.makeBrowserOfflineTransport(Sentry.makeFetchTransport),
  // Tracing
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set `tracePropagationTargets` to control which URLs distributed
  // tracing should be enabled for
  tracePropagationTargets: [
    new RegExp(`^${import.meta.env.VITE_REGEN_ENDPOINT}`),
  ],
  // Session Replay
  // 1.0 sets the sample rate to 100%. May want the `replaysSessionSampleRate`
  // to be lower in production (e.g. 10%, or 0.1)
  replaysSessionSampleRate: 1.0,
  replaysOnErrorSampleRate: 1.0,
});

[mydea]

they have duplicate browserTracingINtegrations (they should remove browserTracingIntegration and only leave reactRouterV6BrowserTracingIntegration in there!). Possibly this is the cause here... 🤔

[mydea]

#16040 maybe fixes this?

[mydea]

Billy, let us know if removing the duplicate integration fixes the problem, then we can close this issue. Else, the problem may be elsewhere!

[cwinters8]

I'm the user who reported the issue via Discord and was debugging with @billyvg. On Friday, my coworker and I figured out the issue: We are using a generated hey-api client to make HTTP requests to our API, and hey-api was wrapping fetch before Sentry had a chance to, so any API requests made by that client could never be caught by the Sentry SDK. Moving Sentry.init above the initialization for the hey-api client fixed the problem, and now the HTTP requests to our API are being captured in replays.

Thanks for the help on this!

[billyvg]

Glad you were able to resolve this!