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

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);
  }

1. Now the webapp loads and renders Grommet ui components as expected:
2. 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.