Tree Shaking
The Sentry SDK supports tree shaking in various ways. To fully utilize the tree shaking capabilities of modern bundlers like webpack or Rollup, some additional configurations must be applied. If you want to minimize the bundle size of the Sentry SDK, we recommend reading through this page and applying the tree shaking configurations as shown.
Tree Shaking Optional Code
The Sentry SDK ships with code that is not strictly required for it to collect your errors. This includes code to debug your Sentry configuration or code to enable performance monitoring, for example. While debug code can be very useful in development environments, it's not typically necessary to include it in your production bundles where it takes up valuable space. The JavaScript SDK includes special flags in its CommonJS and ESM distributions, which can be used to facilitate tree shaking (removal) of this kind of code during the build process.
List Of Flags
To make optional code eligible for tree shaking, you can remove the code from your build output by replacing various flags in the Sentry SDK.
The following flags are available:
__SENTRY_DEBUG__
- Replacing this flag with
false
will tree shake all code in the SDK that is related to debug logging.
__SENTRY_TRACING__
- Replacing this flag with
false
will tree shake all code in the SDK that is related to performance monitoring. Attention:__SENTRY_TRACING__
must not be replaced withfalse
when you're using any performance monitoring-related SDK features (e.g.Sentry.startTransaction()
). This flag is intended to be used in combination with packages like@sentry/next
or@sentry/sveltekit
, which automatically include performance monitoring functionality.
__RRWEB_EXCLUDE_IFRAME__
- Replacing this flag with
true
will tree shake all code in the SDK that is related capturing iframe content with Session Replay. This is only relevant when using Session Replay. You can enable this flag if you don't have any iframes on your page you care to record.
__RRWEB_EXCLUDE_SHADOW_DOM__
- Replacing this flag with
true
will tree shake all code in the SDK that's related to capturing shadow dom elements with Session Replay. This is only relevant when using Session Replay. Enable this flag if you don't have any shadow dom elements on your page you want to record.
__SENTRY_EXCLUDE_REPLAY_WORKER__
- Replacing this flag with
true
will tree shake all code in the SDK that's related to the included compression web worker for Session Replay. This is only relevant when using Session Replay. Enable this flag if you want to host a compression worker yourself - see Using a Custom Compression Worker for details. We do not recommend enabling this flag unless you provide a custom worker URL.
Tree Shaking Optional Code With Sentry Bundler Plugins
This configuration is available starting with v2.9.0 of the bundler plugins.
If you're using one of our bundler plugins, you can use the bundleSizeOptimizations
configuration option to tree shake optional code:
// For example, the @sentry/webpack-plugin passed to the webpack config
sentryPlugin({
// other config
bundleSizeOptimizations: {
excludeDebugStatements: true,
excludePerformanceMonitoring: true,
excludeReplayIframe: true,
excludeReplayShadowDom: true,
excludeReplayWorker: true,
},
});
For more details, see the documentation for the specific bundler plugin you're using:
Tree Shaking Optional Code With Webpack
To tree shake Sentry debug code in your webpack bundles, we recommend using webpack's DefinePlugin:
webpack.config.js
const webpack = require("webpack");
module.exports = {
// ... other options
plugins: [
new webpack.DefinePlugin({
__SENTRY_DEBUG__: false,
__SENTRY_TRACING__: false,
__RRWEB_EXCLUDE_IFRAME__: true,
__RRWEB_EXCLUDE_SHADOW_DOM__: true,
__SENTRY_EXCLUDE_REPLAY_WORKER__: true,
}),
// ... other plugins
],
};
Tree Shaking Optional Code With Rollup
If you're using rollup.js
, we recommend using Rollup's replace
plugin:
rollup.config.js
import replace from "@rollup/plugin-replace";
import { terser } from "rollup-plugin-terser";
export default {
// ... other options
treeshake: "smallest", // recommended for best tree shaking results
plugins: [
replace({
__SENTRY_DEBUG__: false,
__SENTRY_TRACING__: false,
__RRWEB_EXCLUDE_IFRAME__: true,
__RRWEB_EXCLUDE_SHADOW_DOM__: true,
__SENTRY_EXCLUDE_REPLAY_WORKER__: true,
}),
// ... other plugins (best placed after)
],
};
Tree Shaking Default Integrations
By default, the Sentry SDK sets up a list of default integrations that extend your
SDK functionality. You can also add additional or custom
integrations to your SDK configuration.
If you don't want to include default integrations in your config, you can disable
them and add your custom array of integrations.
However, if you also want to tree shake the unused default integrations, you can do so by creating a Client
yourself.
By doing this, you essentially bypass Sentry.init
which normally creates a Client
for you.
The following example shows how to create and bind a Client
which enables tree shaking of unused default integrations:
main.js
import {
BrowserClient,
Breadcrumbs,
Dedupe,
defaultStackParser,
getCurrentHub,
GlobalHandlers,
makeFetchTransport,
LinkedErrors,
} from "@sentry/browser";
const client = new BrowserClient({
// all options you normally pass to Sentry.init
dsn: "your DSN",
// ...
transport: makeFetchTransport,
stackParser: defaultStackParser,
// Only the integrations listed here will be used
integrations: [
new Breadcrumbs(),
new GlobalHandlers(),
new LinkedErrors(),
new Dedupe(),
],
});
getCurrentHub().bindClient(client);
In contrast to Sentry.init
, the Client
constructor expects options of type ClientOptions
instead of Options
.
This means that the ClientOptions.integrations
property is the final array of all integrations that will be used.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
- Package:
- npm:@sentry/angular
- Version:
- 7.86.0
- Repository:
- https://github.com/getsentry/sentry-javascript