sentry-javascript: Replays are randomly missing data (headers, API calls, console etc)

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?

Self-hosted/on-premise (23.12.1)

Which SDK are you using?

@sentry/react

SDK Version

7.93.0

Framework Version

18.2.0

Link to Sentry event

No response

SDK Setup

const ALLOWED_HEADERS = ['content-type', 'x-custom-header',  'other-custom-header', '*'];

const isProductionEnvironment = (environment) => environment === 'prod';

const getDSN = (environment) =>
  isProductionEnvironment(environment)
    ? 'prod-dsn'
    : 'general-dsn';

const initSentry = ({ environment, brand, isTestBot }) => {
  init({
    environment,
    beforeSend: (event) => {
      const tool = getRoot();
      event.extra = { ...(event.extra || {}), tool, isTestBot };
      event.tags = { ...(event.tags || {}), module: 'app-shell', tool, isTestBot };
      return event;
    },
    dsn: getDSN(environment),
    normalizeDepth: 10,
    integrations: [
      new BrowserTracing({
        routingInstrumentation: reactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes),
        idleTimeout: 10000,
      }),
      new Replay({
        maskAllText: isProductionEnvironment(environment),
        useCompression: true,
        blockAllMedia: false,
        networkDetailAllowUrls: [/.*/g],
        networkRequestHeaders: clone(ALLOWED_HEADERS),
        networkResponseHeaders: clone(ALLOWED_HEADERS),
      }),
      isProductionEnvironment(environment) ? null : new BrowserProfilingIntegration(),
    ].filter(Boolean),
    tracesSampleRate: 1.0,
    tracePropagationTargets: ['localhost'],
    replaysSessionSampleRate: 0.0,
    replaysOnErrorSampleRate: 1.0,
    profilesSampleRate: isProductionEnvironment(environment) ? 0.0 : 1.0,
  });

  setTag('brand', brand);
};

Steps to Reproduce

1. Configure the @sentry/react SDK to capture Replays as per the docs (see config)
2. Deploy to live enviroment
3. Capture actual replays
4. Inspect them in Sentry

Expected Result

UPDATE: Initially this ticket was only about missing request/response headers, but upon further investigation we have found that other data goes randomly missing as well.

The Replay should consistently show expected header captures for all logged network calls.

Note that I have explicitly set networkDetailAllowUrls to /.*/g to capture any URL, just to make sure it was not some weirdness with certain subpaths of our API. Prior to this I just whitelisted that API domain itself - behaviour remains the same.

Note also that the response ALLOWED_HEADERS are ALWAYS sent by our API. There is no call where they will NOT be in the response, so the below behaviour cannot be explained by the headers simply missing.

Actual Result

Header captures - and just overall network behaviour overall - is extremely inconsistent.

For the same Replay, on calls to the same API (but different endpoints of said API), we see that:

1. Sometimes, everything works as expected and headers are properly captured and displayed in Sentry:

1. Other times, it only captures only the default headers (as stated above - custom headers are ALWAYS sent, and calling the API manually or from the website confirms this to be the case):

1. Other times, it does not work at all - the response looks as if we had never setup capture in the first place:

Again, keep in mind that ALL these happen in the SAME replay, for the SAME API domain being called. I don’t know what other differences we could rule out.