Skip to content

Commit

Permalink
fix(replay): Fix potential broken CSS in styled-components
Browse files Browse the repository at this point in the history
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
  • Loading branch information
billyvg committed Oct 12, 2023
1 parent e507110 commit 042553c
Showing 1 changed file with 6 additions and 2 deletions.
8 changes: 6 additions & 2 deletions packages/replay/src/integration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,14 @@ export class Replay implements Integration {
// collect fonts, but be aware that `sentry.io` needs to be an allowed
// origin for playback
collectFonts: true,
errorHandler: (err: Error) => {
errorHandler: (err: Error & {__rrweb__?: boolean, __source__?: string}) => {
try {
// @ts-expect-error Set this so that replay SDK can ignore errors originating from rrweb
err.__rrweb__ = true;

// Re-throw as styled-components relies on thrown exception when CSS rule fails to be inserted.
if (err.__source__ === 'CSSStyleSheet.insertRule') {
throw err;
}
} catch {
// avoid any potential hazards here
}
Expand Down

0 comments on commit 042553c

Please sign in to comment.