Repository navigation
Sentry 7.73.0 causes styled-components to fail to render with styles/CSS #9170
Description
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.
Reacted by Josh Tomaino, John Forrest, Mustafa Ismail and Ethan Setnik
Metadata
Metadata
Assignees
Labels
No labels
Projects
- Status
Activity
AbhiPrasad commentedon Oct 3, 2023
If you add SDK version
7.72.0and use Session Replay withSentry.Replay()does the UI components work fine? If so, this is probably due to the rrweb upgrade in in7.73.0. Something we need to take a look at.cc @billyvg.
jornncc commentedon Oct 3, 2023
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 commentedon Oct 3, 2023
@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 commentedon Oct 6, 2023
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.
21 remaining items
mydea commentedon Oct 12, 2023
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 commentedon Oct 12, 2023
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 commentedon Oct 12, 2023
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.
fix(replay): Fix potential broken CSS in styled-components
fix(replay): Fix potential broken CSS in styled-components
fix(replay): Fix potential broken CSS in styled-components (#9234)
mydea commentedon Oct 13, 2023
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 commentedon Nov 8, 2023
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.