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

jornncc · 2023-10-03T19:38:50Z

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

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:
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.
The webapp built - and deployed and we noticed that UI components from the Grommet library no longer showed properly.
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
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);
  }

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

The text was updated successfully, but these errors were encountered:

AbhiPrasad · 2023-10-03T19:46:31Z

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 · 2023-10-03T19:49:39Z

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 · 2023-10-03T20:35:03Z

@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 · 2023-10-06T20:19:22Z

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.

CopyJosh · 2023-10-09T15:53:52Z

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.

We use Grommet but also found the issue to be tied to styled-components, not necessarily anything with Grommet. In our NextJs app it looks like our styled-components ssr without styles.

billyvg · 2023-10-10T14:44:31Z

Thanks -- I'll take a look at this today with a focus on styled-components and SSR.

sashamorozov · 2023-10-10T14:59:02Z

Hi, I don’t know if this relates to these problems, but after switching to 7.73.0 in my project, many users have such errors due to rrweb. I don't use SSR.

As far as I can see it does not affect the interface.

../../node_modules/@sentry-internal/rrweb/es/rrweb/packages/rrweb/src/record/observer.js in initAdoptedStyleSheetObserver at line 532:1

const originalPropertyDescriptor = Object.getOwnPropertyDescriptor(patchTarget === null || patchTarget === void 0 ? void 0 : patchTarget {snip}

marksweb · 2023-10-11T14:06:51Z

Just wanted to +1 this.

Been trying to debug an issue of some styled components not being styled.

We had @sentry/browser 7.73, dropping to 7.72 resolves the issues.

We're using React 17.0.2, styled-components 5.3.0.

Let me know if I can be of any further use. I took a screen recording of what I was seeing that I was going to send through to my Sentry contact.

esetnik · 2023-10-11T15:38:16Z

Just wanted to chime in and report that we are also seeing this issue in production using styled-components. We are rolling back to 7.72

billyvg · 2023-10-11T16:53:44Z

Just wanted to +1 this.

Been trying to debug an issue of some styled components not being styled.

We had @sentry/browser 7.73, dropping to 7.72 resolves the issues.

We're using React 17.0.2, styled-components 5.3.0.

Let me know if I can be of any further use. I took a screen recording of what I was seeing that I was going to send through to my Sentry contact.

Can you send it to me as well please? billy at sentry.io

Can anyone provide an example styled component snippet that is losing its styles? I've tested some basic styled components usage and am not able to reproduce the issue.

billyvg · 2023-10-11T23:15:13Z

So I was able to kind of reproduce it where the replay is missing the styles, but the production application still maintains them. I'm hoping this is the root cause for both cases of the bug.

For those that were affected, do you know if the replay that was captured have the CSS applied?

CopyJosh · 2023-10-12T04:52:59Z

So I was able to kind of reproduce it where the replay is missing the styles, but the production application still maintains them. I'm hoping this is the root cause for both cases of the bug.

For those that were affected, do you know if the replay that was captured have the CSS applied?

Our replay ran out so actually didn’t get a chance to see what the actual affects on replays were 😵

esetnik · 2023-10-12T12:03:17Z

So I was able to kind of reproduce it where the replay is missing the styles, but the production application still maintains them. I'm hoping this is the root cause for both cases of the bug.

For those that were affected, do you know if the replay that was captured have the CSS applied?

We did not get a sentry replay because there was no error generated, however we did see the css styles missing in our e2e test replay on cypress as well as in production so it doesn't affect just the sentry replays. The strange thing is that we could only reproduce the issue when navigating between pages using react router. The initial landing page of our app (login) had the correct styles, but after logging in the next page (dashboard) had partially missing styles. A browser reload would clear the issue and cause the styles to load on dashboard.

esetnik · 2023-10-12T12:21:14Z

Additionally, in case it helps with reproduction we are using styled-components v5.3.11 and unable to update to v6

mydea · 2023-10-12T14:51:27Z

Hi, I don’t know if this relates to these problems, but after switching to 7.73.0 in my project, many users have such errors due to rrweb. I don't use SSR.

As far as I can see it does not affect the interface.

../../node_modules/@sentry-internal/rrweb/es/rrweb/packages/rrweb/src/record/observer.js in initAdoptedStyleSheetObserver at line 532:1

const originalPropertyDescriptor = Object.getOwnPropertyDescriptor(patchTarget === null || patchTarget === void 0 ? void 0 : patchTarget {snip}

This problem at least should be fixed by: getsentry/rrweb#110, hard to say if that is also the cause of some of the other problems 🤔

marksweb · 2023-10-12T15:45:12Z

I've just been setting up an environment to create this problem again and it may be useful for people to know that it wasn't 7.73 alone that caused it.

I also had to enable replays.

billyvg · 2023-10-12T17:49:05Z

Thanks folks, especially @marksweb for the repro environment -- we've figured out the issue: in our SDK we were aggressively catching exceptions so that they don't bubble up into your projects, in doing so we were catching exceptions that the styled-components library was relying when a rule would fail to be inserted (i.e. chrome will throw on unsupported, browser specific pseudo selectors). Any rules following that would fail to be inserted because of an out of bounds index error.

We'll be releasing a patch for this ASAP. Thanks again for your reports and sorry for the issues this caused.

NOTE: This requires a bump to rrweb library Fixes an issue where the Replay integration can potentially break applications that use `styled-components`. `styled-components` [relies on an exception being throw](https://github.com/styled-components/styled-components/blob/b7b374bb1ceff1699f7035b15881bc807110199a/packages/styled-components/src/sheet/Tag.ts#L32-L40) for CSS rules that are not supported by the browser engine. However, our SDK suppresses any exceptions thrown from within rrweb, so `styled-components` assumes that an unsupported rule was inserted successfully and increases a rule index, which causes following inserted rules to fail due to an out-of-bounds error. getsentry/rrweb#111 introduces a change the adds metadata to exceptions that occur when calling `insertRule`, and this PR will re-throw those exceptions that will then bubble up to `styled-components`. Fixes #9170

Fixes an issue where the Replay integration can potentially break applications that use `styled-components`. `styled-components` [relies on an exception being throw](https://github.com/styled-components/styled-components/blob/b7b374bb1ceff1699f7035b15881bc807110199a/packages/styled-components/src/sheet/Tag.ts#L32-L40) for CSS rules that are not supported by the browser engine. However, our SDK suppressed any exceptions thrown from within rrweb, so `styled-components` assumes that an unsupported rule was inserted successfully and increases a rule index, which causes following inserted rules to fail due to an out-of-bounds error. This was a regression from v1 as [we were always re-throwing the exception](https://github.com/getsentry/rrweb/blob/sentry-v1/packages/rrweb/src/sentry/callbackWrapper.ts#L17) Fixes #9170 --------- Co-authored-by: Francesco Novy <francesco.novy@sentry.io>

mydea · 2023-10-13T11:53:54Z

We've just released v7.74.0 which hopefully fixes this issue! Please let us know if you still run into this after updating. Thanks a lot for the patience, and sorry again for the inconvenience.

jornncc · 2023-11-08T23:04:42Z

We've just released v7.74.0 which hopefully fixes this issue! Please let us know if you still run into this after updating. Thanks a lot for the patience, and sorry again for the inconvenience.

Just upgraded to v7.77 and everything looks great - no more unstyled components :-D Thank you for taking care of this issue so far. Glad we could get back to normal dependency update cycle.

jornncc added the Type: Bug label Oct 3, 2023

getsantry bot added the Waiting for: Product Owner label Oct 3, 2023

github-actions bot added the Package: react Issues related to the Sentry React SDK label Oct 3, 2023

AbhiPrasad added the Package: replay Issues related to the Sentry Replay SDK label Oct 3, 2023

getsantry bot removed the Waiting for: Product Owner label Oct 3, 2023

getsantry bot added the Waiting for: Product Owner label Oct 3, 2023

billyvg self-assigned this Oct 3, 2023

getsantry bot removed the Waiting for: Product Owner label Oct 3, 2023

getsantry bot added the Waiting for: Product Owner label Oct 6, 2023

getsantry bot removed the Waiting for: Product Owner label Oct 10, 2023

getsantry bot added the Waiting for: Product Owner label Oct 10, 2023

getsantry bot removed the Waiting for: Product Owner label Oct 11, 2023

billyvg changed the title ~~Sentry 7.73.0 causes Grommet UI components to fail to function and render w/o theme~~ Sentry 7.73.0 causes styled-components to fail to render with styles/CSS Oct 11, 2023

escobarjonatan mentioned this issue Oct 12, 2023

feat: Added Sentry for error logging purposes projectNEWM/newm-web#390

Merged

getsantry bot added the Waiting for: Product Owner label Oct 12, 2023

getsantry bot removed the Waiting for: Product Owner label Oct 12, 2023

getsantry bot added the Waiting for: Product Owner label Oct 12, 2023

getsantry bot removed the Waiting for: Product Owner label Oct 12, 2023

billyvg mentioned this issue Oct 12, 2023

feat(record): Allow callbackWrapper to attach a __source__ property to exceptions getsentry/rrweb#111

Closed

billyvg mentioned this issue Oct 12, 2023

fix(replay): Fix potential broken CSS in styled-components #9234

Merged

mydea closed this as completed in #9234 Oct 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jornncc commented Oct 3, 2023 •

edited

Loading

AbhiPrasad commented Oct 3, 2023

jornncc commented Oct 3, 2023

billyvg commented Oct 3, 2023

johnhforrest commented Oct 6, 2023

CopyJosh commented Oct 9, 2023

billyvg commented Oct 10, 2023

sashamorozov commented Oct 10, 2023 •

edited

Loading

marksweb commented Oct 11, 2023

esetnik commented Oct 11, 2023

billyvg commented Oct 11, 2023

billyvg commented Oct 11, 2023

CopyJosh commented Oct 12, 2023

esetnik commented Oct 12, 2023

esetnik commented Oct 12, 2023

mydea commented Oct 12, 2023

marksweb commented Oct 12, 2023

billyvg commented Oct 12, 2023

mydea commented Oct 13, 2023

jornncc commented Nov 8, 2023

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

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

Comments

jornncc commented Oct 3, 2023 • edited Loading

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

AbhiPrasad commented Oct 3, 2023

jornncc commented Oct 3, 2023

billyvg commented Oct 3, 2023

johnhforrest commented Oct 6, 2023

CopyJosh commented Oct 9, 2023

billyvg commented Oct 10, 2023

sashamorozov commented Oct 10, 2023 • edited Loading

marksweb commented Oct 11, 2023

esetnik commented Oct 11, 2023

billyvg commented Oct 11, 2023

billyvg commented Oct 11, 2023

CopyJosh commented Oct 12, 2023

esetnik commented Oct 12, 2023

esetnik commented Oct 12, 2023

mydea commented Oct 12, 2023

marksweb commented Oct 12, 2023

billyvg commented Oct 12, 2023

mydea commented Oct 13, 2023

jornncc commented Nov 8, 2023

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

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

jornncc commented Oct 3, 2023 •

edited

Loading

sashamorozov commented Oct 10, 2023 •

edited

Loading