Skip to content

Replays are randomly missing data (headers, API calls, console etc) #10154

@csvan

Description

@csvan

Is there an existing issue for this?

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:
Screenshot 2024-01-11 at 19 48 28
  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):
Screenshot 2024-01-11 at 19 53 04
  1. Other times, it does not work at all - the response looks as if we had never setup capture in the first place:
Screenshot 2024-01-11 at 19 50 46

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugPackage: reactIssues related to the Sentry React SDKPackage: replayIssues related to the Sentry Replay SDK

    Projects

    Status

    Waiting for: Product Owner

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions