Allow tree shaking of @sentry/replay if unused

[ChrisRast]

Problem Statement

Currently, if we use @sentry/browser or any similar package, but we don't use any replay feature (for any reason), we want to avoid shipping the whole replay package to our customers.

We use webpack and I setup a specific rule through resolve.alias configuration to resolve all occurrences of the replay package to null.

resolve: {
  alias: {
    '@sentry/replay': false
  }
}

It works, and doesn't create any error, but it's not really "clean".

Solution Brainstorm

Offer a flag to let bundler choose similar to these https://docs.sentry.io/platforms/javascript/guides/react/configuration/tree-shaking/#list-of-flags

Tag: __SENTRY_REPLAY__

It would be much cleaner than a webpack resolve config.

[AbhiPrasad]

Hey @ChrisRast, webpack should be automatically treeshaking the replay integration when set to production mode. This is what we found when testing internally. This is because Replay is simply a class export, so Webpack should just remove it if it's not being imported.

Could you provide a reproduction where this is not happening?

[mydea]

Also note that treeshaking may only happen in production builds, so development builds can often incorrectly show it being included. Please make sure to check with a production build, if it is included.

[shymkovayu]

@AbhiPrasad Hello, I think I have a similar issue.

Sentry.init({
   integrations: [new RewriteFrames(), new ExtraErrorData(), new BrowserTracing()]
})

This is what inside one of the chunks on production. Performance of the app got worse after update.

[mydea]

@AbhiPrasad Hello, I think I have a similar issue.

Sentry.init({
   integrations: [new RewriteFrames(), new ExtraErrorData(), new BrowserTracing()]
})

This is what inside one of the chunks on production. Performance of the app got worse after update.

Hi! Could you provide some details how you build your app? E.g. with webpack, ...? Also could you let me know:

• Which framework do you use (react, ...)?
• Which version of sentry SDK are you using?

Thank you!

[shymkovayu]

@mydea Ah, sorry! Webpack 4 (@rails/webpacker), React 17.0.2, @sentry/react + integrations + tracing 7.29.0

[mydea]

Hmm, maybe it is due to webpack 4 not treeshaking properly 🤔
Did you configure it similar to as outlines in this article: https://medium.com/@craigmiller160/how-to-fully-optimize-webpack-4-tree-shaking-405e1c76038 ? Just to rule out any config problems!

[shymkovayu]

@mydea Thank you for the reference, I'll double check and get back!

[ChrisRast]

Hello,
Sorry for the delay.

I'm using webpack 5, so it's not related to webpack version. I'll try to create a reproducible example soon.
I checked that I'm properly creating a production build too.
Sometimes, webpack cannot treeshake properly due to some index.js importing everything, even though you're not using some of it. You might want to avoid importing Replay in other packages, like here: export { Replay } from '@sentry/replay';

And for some numbers:

• React 17
• @sentry/react@7.30
• Webpack 5

[mydea]

Do you happen to have a reproduction for this somewhere? We're having a hard time reproducing this - generally, the code is treeshaken away, we've tested this with webpack and other bundlers, and haven't seen this being included in production builds.