Replay tree shaking not working with TypeScript

[ba0708]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

7.53.0

Framework Version

No response

Link to Sentry event

No response

SDK Setup

// Imports here

const client = new BrowserClient({
  transport: makeXHRTransport,
  stackParser: defaultStackParser,
  dsn: "https://123@sentry.io/123",
  environment: "development",
  integrations: [new HttpContext(), new Dedupe(), new FunctionToString()],
  beforeSend(event) {
    console.log(event);
    return null; // Don't send the event
  }
});

const scope = new Scope();
const hub = new Hub(client, scope);

Steps to Reproduce

Make a webpack build with a TypeScript loader. See below for a setup that reproduces the issue.

https://codesandbox.io/s/spring-sun-2orqwn

1. Download code as zip & extract
2. yarn install or npm install
3. node_modules/.bin/webpack

To visualize the bundle size, run the following commands afterwards:

1. node_modules/.bin/webpack --json > dist/stats.json
2. node_modules/webpack-bundle-analyzer/lib/bin/analyzer.js dist/stats.json dist

Expected Result

I am not using the Replay integration and so I expect it to be removed from my bundle during tree shaking. This should happen according to the discussions in #6886 and #6762, but I can only get this to work for plain JavaScript builds. To be clear, the TypeScript build works fine; the bundle is just too big.

Actual Result

The Replay integration is part of the bundle and therefore significantly increases its size. I haven't tested if the rest of the tree shaking works yet, but Replay is by far the biggest problem anyway.

Here are a few bundle sizes for different versions of @sentry/browser, based on the above example project.

7.26:

7.27:

7.53:

The problem clearly started as of version 7.27.0 with the introduction of Replay and has gradually gotten worse since then - probably due to more features being added.

I have isolated this to being an issue when using TypeScript. Modifying the above example to using plain JavaScript works as intended. I have tested a handful different versions of both webpack and TypeScript (including 3.8.3, which this library is locked to), but the result is the same. I never had any bundle size issues while using TypeScript before version 7.27.0.

Other things I've tried:

• Followed the tree shaking documentation.
• Only tested on production builds.
• ES6 target instead of ES5.
• Using Sentry.init() instead of BrowserClient.

Am I missing anything in my setup to get this to work? Thanks.

[lforst]

Webpack docs:

Your config:

Let us know if this resolves your issue.

[ba0708]

@lforst I literally just figured that out. I thought I had tested everything. I can confirm that it works. Sorry for the inconvenience and thank you for the help!