Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(replay): Filter out style mutations when extracting DOM nodes #83016

Merged
merged 2 commits into from
Jan 7, 2025

Conversation

billyvg
Copy link
Member

@billyvg billyvg commented Jan 7, 2025

We have an org that has a small handful of replays where the replayStepper
causes massive perf issues to the extent that it freezes the browser. I
narrowed it down to the diff() code inside of rrdom and a recent upstream
PR (getsentry/rrweb#233) seems to have exacerbated the
problem. I have not been able to figure out the root cause for the perf issues,
but it seems to be related to CSS and the mutations that add style elements.
We will want to try to identify what exactly in these replays are causing the
perf issues.

In the meantime we can filter out these mutations. Since we are only interested
in generating and extracting the HTML for certain breadcrumb events, the styles
should have no affect on the data we are interested in using.

Closes #82221

We have an org that has a small handful of replays where the replayStepper
causes massive perf issues to the extent that it freezes the browser. I
narrowed it down to the `diff()` code inside of `rrdom` and a recent upstream
PR (getsentry/rrweb#233) seems to have exacerbated the
problem. I have not been able to figure out the root cause for the perf issues,
but it seems to be related to CSS and the mutations that add `style` elements.
We will want to try to identify what exactly in these replays are causing the
perf issues.

In the meantime we can filter out these mutations. Since we are only interested
in generating and extracting the HTML for certain breadcrumb events, the styles
should have no affect on the data we are interested in using.

Closes #82221
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jan 7, 2025
@billyvg billyvg marked this pull request as ready for review January 7, 2025 18:32
@billyvg billyvg requested a review from a team as a code owner January 7, 2025 18:32
Comment on lines +548 to +550
e.type === EventType.IncrementalSnapshot &&
'source' in e.data &&
e.data.source === IncrementalSource.Mutation
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i had this same bug! forgetting about FullSnapshot.

there's a new util to help:

import {isRRWebChangeFrame} from 'sentry/utils/replays/types';

in the other places where I've called the util i did not memoize it... because i was lazy and didn't add to ReplayReader; just chained some calls. That could probably be unified.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case, we don't care about full snapshots, only incremental

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(I did copy&paste this from elsewhere though, so would be good to refactor into a helper)

@billyvg billyvg merged commit 592bf6e into master Jan 7, 2025
41 checks passed
@billyvg billyvg deleted the fix-replay-filter-out-styles-extract-dom-elements branch January 7, 2025 20:15
andrewshie-sentry pushed a commit that referenced this pull request Jan 22, 2025
…83016)

We have an org that has a small handful of replays where the
replayStepper
causes massive perf issues to the extent that it freezes the browser. I
narrowed it down to the `diff()` code inside of `rrdom` and a recent
upstream
PR (getsentry/rrweb#233) seems to have
exacerbated the
problem. I have not been able to figure out the root cause for the perf
issues,
but it seems to be related to CSS and the mutations that add `style`
elements.
We will want to try to identify what exactly in these replays are
causing the
perf issues.

In the meantime we can filter out these mutations. Since we are only
interested
in generating and extracting the HTML for certain breadcrumb events, the
styles
should have no affect on the data we are interested in using.

Closes #82221
@github-actions github-actions bot locked and limited conversation to collaborators Jan 23, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Poor Sentry UI performance when loading certain Replays
3 participants