Skip to content

feat(replay): Allow to treeshake & configure compression worker URL - #9409

Merged
mydea merged 3 commits into
developfrom
fn/worker-customize
Oct 31, 2023
Merged

feat(replay): Allow to treeshake & configure compression worker URL#9409
mydea merged 3 commits into
developfrom
fn/worker-customize

Conversation

@mydea

@mydeamydea commented Oct 30, 2023

Copy link
Copy Markdown
Member

This PR does two things:

  1. Allow to configure a workerUrl in replay config, which is expected to be an URL of a self-hosted worker script.
    a. Added an example worker script, which is a built version of the pako-based compression worker
    a. Users can basically host this file themselves and point to it in workerUrl, as long as it is on the same origin as the website itself.
    a. We can eventually document this in docs
  2. Allows to configure __SENTRY_EXCLUDE_REPLAY_WORKER__ in your build to strip the default included web worker. You can configure this if you're disabling compression anyhow, or if you want to configure a custom web worker as in the above step.

Fixes#6739, and allows to reduce bundle size further. Once merged/released we can also add this to the bundler plugins bundleSizeOptimizations options.

Note that we do not recommend to disable the web worker completely. We only recommend to tree shake the worker code if you provide a custom worker URL - else, replay payloads will not be compressed, resulting in much larger payloads sent over the network, which is bad for your applications performance.

Also note that when providing a custom worker, it is your own responsibility to keep it up to date - we try to keep the worker interface stable, and the worker is generally not updated often, but you should still check regularly when updating the SDK if the example worker has changed.

@mydea
mydea requested review from billyvg and c298leeOctober 30, 2023 10:36
@mydeamydea self-assigned this Oct 30, 2023
expect(replayEvent0).toEqual(getExpectedReplayEvent());

const snapshots = getFullRecordingSnapshots(await reqPromise0);
expect(replayEnvelopeIsCompressed(req0)).toEqual(true);

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

I also added a check to actually test that we are sending a compressed payload 😅

@mydea
mydeaforce-pushed the fn/worker-customize branch 4 times, most recently from 62dccc4 to 61feab0CompareOctober 30, 2023 10:40
@github-actions

github-actionsBot commented Oct 30, 2023

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)77.52 KB (+0.11% 🔺)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)56.75 KB (-14.66% 🔽)
@sentry/browser (incl. Tracing) - Webpack (gzipped)30.97 KB (0%)
@sentry/browser - Webpack (gzipped)21.3 KB (+0.01% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)67.89 KB (+0.33% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)29.09 KB (+0.45% 🔺)
@sentry/browser - ES6 CDN Bundle (gzipped)21.23 KB (+0.48% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)217.06 KB (+0.31% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)88.28 KB (+0.5% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)63.28 KB (+0.7% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)31.8 KB (+0.19% 🔺)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)77.9 KB (+0.11% 🔺)
@sentry/react - Webpack (gzipped)21.34 KB (0%)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)94.24 KB (+0.09% 🔺)
@sentry/nextjs Client - Webpack (gzipped)47.86 KB (0%)

@mydea

Copy link
Copy Markdown
MemberAuthor

Follow up: In e.g. next.js, we could do this automatically, which would reduce bundle size etc.

Comment threadpackages/browser-integration-tests/utils/replayHelpers.ts Outdated
@mydea
mydeaforce-pushed the fn/worker-customize branch from de39290 to f5afdb0CompareOctober 31, 2023 08:44
@@ -0,0 +1,2 @@
/*! Sentry Replay Worker 7.76.0 (de39290bc) | https://github.com/getsentry/sentry-javascript */

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

I added a banner here with the version etc. for clarity!

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.

Allow worker to load from a URL instead of a blob

2 participants

@mydea@billyvg