Skip to content

feat(replay): Handle large amounts of consecutive events - #7211

Closed
mydea wants to merge 1 commit into
developfrom
fn/replay-detect-many-changes
Closed

feat(replay): Handle large amounts of consecutive events#7211
mydea wants to merge 1 commit into
developfrom
fn/replay-detect-many-changes

Conversation

@mydea

Copy link
Copy Markdown
Member

We've seen problems when a lot of events are happening at the same time. E.g. when thousands of mutation observer events are triggered at the same time, this can lead to very poor performance.

With this change, we detect if more than 2000 events happen in a rolling time window of 100ms. If so, we pause the replay, wait for 100ms, and resume it (which will trigger a full snapshot).

Note: I've selected the values 2000 & 100ms completely random. We can think about what reasonable amounts are here.
This is not a perfect fix, but IMHO it is a better experience to have a 100ms gap in your replay (and afterwards it should continue normally), than to freeze your page.

@billyvg can you try this with the repro app you've got?

We've seen problems when a lot of events are happening at the same time. E.g. when thousands of mutation observer events are triggered at the same time, this can lead to very poor performance.
With this change, we detect if more than 2000 events happen in a rolling time window of 100ms. If so, we pause the replay, wait for 100ms, and resume it (which will trigger a full snapshot).
@mydea
mydea requested review from Lms24 and billyvgFebruary 17, 2023 08:53
@mydeamydea self-assigned this Feb 17, 2023
@github-actions

Copy link
Copy Markdown
Contributor

Replay SDK metrics 🚀

Plain+Sentry+Replay
RevisionValueValueDiffRatioValueDiffRatio
LCPThis PR aacdf2b93.66 ms123.32 ms+29.66 ms+31.66 %157.38 ms+63.72 ms+68.03 %
Previous 1cf898870.81 ms94.27 ms+23.46 ms+33.13 %124.62 ms+53.81 ms+75.99 %
CLSThis PR aacdf2b0.06 ms0.06 ms+0.00 ms+0.07 %0.06 ms+0.00 ms+0.20 %
Previous 1cf89880.06 ms0.06 ms-0.00 ms-0.39 %0.06 ms-0.00 ms-0.46 %
CPUThis PR aacdf2b21.67 %24.57 %+2.90 pp+13.37 %30.16 %+8.49 pp+39.17 %
Previous 1cf898812.30 %12.01 %-0.29 pp-2.37 %17.10 %+4.80 pp+39.02 %
JS heap avgThis PR aacdf2b1.94 MB2 MB+65.34 kB+3.37 %2.86 MB+926.13 kB+47.78 %
Previous 1cf89881.94 MB1.99 MB+48.93 kB+2.52 %2.87 MB+929.88 kB+47.85 %
JS heap maxThis PR aacdf2b2.3 MB2.57 MB+264.75 kB+11.50 %3.36 MB+1.06 MB+46.08 %
Previous 1cf89882.3 MB2.57 MB+267.17 kB+11.60 %3.35 MB+1.05 MB+45.56 %
netTxThis PR aacdf2b0 B0 B0 Bn/a2.23 kB+2.23 kBn/a
Previous 1cf89880 B0 B0 Bn/a2.22 kB+2.22 kBn/a
netRxThis PR aacdf2b0 B0 B0 Bn/a41 B+41 Bn/a
Previous 1cf89880 B0 B0 Bn/a41 B+41 Bn/a
netCountThis PR aacdf2b000n/a1+1n/a
Previous 1cf8988000n/a1+1n/a
netTimeThis PR aacdf2b0.00 ms0.00 ms0.00 msn/a120.01 ms+120.01 msn/a
Previous 1cf89880.00 ms0.00 ms0.00 msn/a91.07 ms+91.07 msn/a

Previous results on branch: develop

RevisionLCPCLSCPUJS heap avgJS heap maxnetTxnetRxnetCountnetTime
1cf8988+53.81 ms-0.00 ms+4.80 pp+929.88 kB+1.05 MB+2.22 kB+41 B+1+91.07 ms
68655e3+72.60 ms+0.00 ms+7.90 pp+922.72 kB+1.04 MB+2.22 kB+41 B+1+109.40 ms
a8449de+58.27 ms-0.00 ms+7.12 pp+927.42 kB+1.05 MB+2.2 kB+41 B+1+98.31 ms
79babe9+58.69 ms-0.00 ms+4.40 pp+927.46 kB+1.06 MB+2.23 kB+41 B+1+103.20 ms
5359ba9+55.62 ms-0.00 ms+4.29 pp+935.26 kB+1.05 MB+2.2 kB+41 B+1+79.05 ms

*) pp - percentage points - an absolute difference between two percentages.
Last updated: Fri, 17 Feb 2023 08:57:44 GMT

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM - this might improve the problems described in #6946

@github-actions

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
@sentry/browser - ES5 CDN Bundle (gzipped + minified)20.05 KB (0%)
@sentry/browser - ES5 CDN Bundle (minified)62.14 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)18.68 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified)55.29 KB (0%)
@sentry/browser - Webpack (gzipped + minified)20.41 KB (0%)
@sentry/browser - Webpack (minified)66.73 KB (0%)
@sentry/react - Webpack (gzipped + minified)20.44 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified)47.78 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)26.93 KB (-0.01% 🔽)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)25.2 KB (-0.01% 🔽)
@sentry/replay ES6 CDN Bundle (gzipped + minified)42.68 KB (+0.37% 🔺)
@sentry/replay - Webpack (gzipped + minified)36.88 KB (+0.44% 🔺)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified)60.31 KB (+0.27% 🔺)
@sentry/browser + @sentry/replay - ES6 CDN Bundle (gzipped + minified)53.91 KB (+0.3% 🔺)

@billyvgbillyvg left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This is not going to help in our particular case because the issue is in the rrweb library before an event is even emitted/processed.

@mydea

mydea commented Mar 2, 2023

Copy link
Copy Markdown
MemberAuthor

Closing this in favor of #7314 and other approaches following this.

@mydeamydea closed this Mar 2, 2023
@mydea
mydea deleted the fn/replay-detect-many-changes branch March 2, 2023 14:33
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@mydea@billyvg@Lms24