Sentry 7.73.0 causes `styled-components` to fail to render with styles/CSS

[jornncc]

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.73.0

Framework Version

React 17.0.2

Link to Sentry event

No response

SDK Setup

const props = {
    dsn: window.config.sentryDsn,
    environment: window.config.sentryEnv,

    // we are leaving this at zero, so we only record error sessions:
    replaysSessionSampleRate: 0,

    replaysOnErrorSampleRate: 1,

    integrations: [
      new BrowserTracing(),
      new Sentry.Integrations.Breadcrumbs({
        console: false
      }),
      new Sentry.Replay({
        useCompression: false,
        maskAllText: true,
        maskAllInputs: true,
        blockAllMedia: true,
      }),
    ],
    tracesSampleRate: 0.2,
    ignoreErrors: [
      'ResizeObserver loop limit exceeded',
    ],
  };
  try {
    Sentry.init(props);
  } catch (error) {
    console.error('Unable to initialize Sentry', error);
  }

Steps to Reproduce

1. Our webapp was using Sentry 7.69.0, grommet v2.33.2, grommet-hpe-theme^4.2.0, and everything was working great and Grommet UI components rendered as expected. Here is an example that shows drop down, text input, icons and a data table:
   
2. Renovate overnight created a PR that was auto merged for upgrading @sentry/react and @sentry/tracing from version 7.69.0 to version 7.73.0.
3. The webapp built - and deployed and we noticed that UI components from the Grommet library no longer showed properly.
   
4. I then went through the motions to upgrade one release at a time from v7.69 --> v7.73.0 - and found out that our webapp worked fine on version 7.72.0 but not on 7.73.0
5. So, I look at what https://github.com/getsentry/sentry-javascript/releases/tag/7.73.0 contains - and it spoke about Sentry Replay... so I wonder - what happens if I remove replay from our webapp? so I change the Sentry.Init setup to not include Sentry.Replay. This is the adjusted sentry.init logic after removing Sentry.Replay:

const props = {
    dsn: window.config.sentryDsn,
    environment: window.config.sentryEnv,

    // we are leaving this at zero, so we only record error sessions:
    replaysSessionSampleRate: 0,

    replaysOnErrorSampleRate: 1,

    integrations: [
      new BrowserTracing(),
      new Sentry.Integrations.Breadcrumbs({
        console: false
      }),
    ],
    tracesSampleRate: 0.2,
    ignoreErrors: [
      'ResizeObserver loop limit exceeded',
    ],
  };
  try {
    Sentry.init(props);
  } catch (error) {
    console.error('Unable to initialize Sentry', error);
  }

7. Now the webapp loads and renders Grommet ui components as expected:
   
8. So, with these steps... there is something about Sentry.Replay that is affecting our ui components.

Expected Result

Having Sentry.Replay enabled in v7.73.0 should not affect the webapp ui Grommet Components.

Actual Result

Please see screenshots above (steps to reproduce) where you will see before upgrading to v7.73.0 and after screenshots.

[AbhiPrasad]

If you add SDK version 7.72.0 and use Session Replay with Sentry.Replay() does the UI components work fine? If so, this is probably due to the rrweb upgrade in in 7.73.0. Something we need to take a look at.

cc @billyvg.

[jornncc]

If you add SDK version 7.72.0 and use Session Replay with Sentry.Replay() does the UI components work fine? If so, this is probably due to the rrweb upgrade in in 7.73.0. Something we need to take a look at.

cc @billyvg.

Yes - 7.72.0 worked fine with Sentry.Replay() active. If I upgrade to 7.73.0 - with Replay - then it affects the UI as I've shown above. Running 7.73.0 w/o Replay solved the UI issue and UI was no longer affected.

Thank you for taking a look.

[billyvg]

@jornncc Just to clarify, Replay is causing regressions on your production app and not in the replay, correct?

I have not had any luck so far creating a repro, would you be able to help us create one here? https://codesandbox.io/s/upbeat-cloud-y35pzz

[johnhforrest]

We also just hit this issue and had to rollback to 7.72.0. We don't use Grommet, but we do use Styled Components. I didn't debug too deeply, but it does look like a bunch of styled components seemed to lose their styling with 7.73.0.