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): Use unwrapped setTimeout to avoid e.g. angular change detection #11924

Merged
merged 11 commits into from May 22, 2024

Conversation

billyvg
Copy link
Member

@billyvg billyvg commented May 6, 2024

This PR makes sure we use the native, unwrapped setTimeout implementation of the browser. Some environments, e.g. Angular, monkey patch this for their change detection, leading to performance issues (possibly). We have already changed this in rrweb, but we also have some usage of this in replay itself.

This PR should work fine, however all test fail today because we heavily use jest.useFakeTimers(), which basically monkey patches fetch too. So with this change, we do not use the patched timers, leading to everything blowing up 🤯

Based on #11864
Depends on #11899

Copy link
Contributor

github-actions bot commented May 6, 2024

size-limit report 📦

Path Size
@sentry/browser 21.77 KB (+0.25% 🔺)
@sentry/browser (incl. Tracing) 32.92 KB (+0.13% 🔺)
@sentry/browser (incl. Tracing, Replay) 68.26 KB (+0.05% 🔺)
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 61.68 KB (+0.11% 🔺)
@sentry/browser (incl. Tracing, Replay with Canvas) 72.29 KB (+0.04% 🔺)
@sentry/browser (incl. Tracing, Replay, Feedback) 84.33 KB (+0.05% 🔺)
@sentry/browser (incl. Feedback) 37.77 KB (+0.16% 🔺)
@sentry/browser (incl. sendFeedback) 26.34 KB (+0.21% 🔺)
@sentry/browser (incl. FeedbackAsync) 30.75 KB (+0.18% 🔺)
@sentry/react 24.45 KB (+0.17% 🔺)
@sentry/react (incl. Tracing) 35.89 KB (+0.08% 🔺)
@sentry/vue 25.72 KB (+0.25% 🔺)
@sentry/vue (incl. Tracing) 34.74 KB (+0.13% 🔺)
@sentry/svelte 21.91 KB (+0.26% 🔺)
CDN Bundle 24.29 KB (+0.12% 🔺)
CDN Bundle (incl. Tracing) 34.34 KB (+0.08% 🔺)
CDN Bundle (incl. Tracing, Replay) 68.04 KB (+0.06% 🔺)
CDN Bundle (incl. Tracing, Replay, Feedback) 73.03 KB (+0.05% 🔺)
CDN Bundle - uncompressed 71.42 KB (+0.13% 🔺)
CDN Bundle (incl. Tracing) - uncompressed 101.84 KB (+0.1% 🔺)
CDN Bundle (incl. Tracing, Replay) - uncompressed 211.46 KB (+0.05% 🔺)
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 223.82 KB (+0.05% 🔺)
@sentry/nextjs (client) 35.17 KB (+0.23% 🔺)
@sentry/sveltekit (client) 33.52 KB (+0.21% 🔺)
@sentry/node 134.17 KB (0%)
@sentry/aws-serverless 128.18 KB (0%)

@billyvg billyvg marked this pull request as ready for review May 7, 2024 14:04
@billyvg billyvg requested a review from a team as a code owner May 7, 2024 14:04
@billyvg billyvg requested a review from mydea May 7, 2024 14:04
Base automatically changed from feat-use-vitest-replay to develop May 8, 2024 10:36
@billyvg billyvg force-pushed the fn/replay-unwrapped-setTimeout-billy branch from 0c5bfa2 to 6940018 Compare May 8, 2024 11:09
@billyvg
Copy link
Member Author

billyvg commented May 8, 2024

tracing/metrics/ tests are flaking a lot, not sure if related to this change specifically

@mydea mydea requested a review from Lms24 May 16, 2024 12:14
@billyvg billyvg force-pushed the fn/replay-unwrapped-setTimeout-billy branch from c4cf4ec to 188f306 Compare May 21, 2024 20:14
mydea and others added 11 commits May 21, 2024 16:15
This moves some code around in `browser-utils` so we can-reuse the logic for getting the unwrapped fetch implementation to also get the unwrapped `setTimeout` implementation. E.g. Angular wraps this for change detection, which can lead to performance degration.
This reverts commit 78221f5.
@billyvg billyvg force-pushed the fn/replay-unwrapped-setTimeout-billy branch from 188f306 to 8cd00ba Compare May 21, 2024 20:15
Comment on lines +22 to +24
function isNative(func: Function): boolean {
return func && /^function\s+\w+\(\)\s+\{\s+\[native code\]\s+\}$/.test(func.toString());
}
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 added this, which is a generic version of this: https://github.com/getsentry/sentry-javascript/blob/develop/packages/browser/src/transports/utils.ts#L56-L58

Without this tracing/metrics/web-vitals-fid was failing consistently. Is the sandboxed version just too slow for our browser tests? cc @mydea

Copy link
Member

Choose a reason for hiding this comment

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

hmm this looks reasonable. TBH the web-vitals tests are a bit of a black box to me, they appear/are brittle overall 😬 if that makes it pass, all good from my POV!

@billyvg billyvg merged commit 772269a into develop May 22, 2024
95 checks passed
@billyvg billyvg deleted the fn/replay-unwrapped-setTimeout-billy branch May 22, 2024 13:45
billyvg added a commit that referenced this pull request May 22, 2024
This makes the `isNativeFetch` check a bit more generic/naive. It no
longer checks that the function name matches `fetch` explicitly, but I
think thats ok.


Follow-up to #11924
Sign up for free to 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.

None yet

2 participants