Skip to content

Add instructions to tree shake tracing code in JS SDK #5086

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

Merged
merged 2 commits into from
May 30, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,23 @@ description: "Learn how to reduce Sentry bundle size by tree shaking unused code
keywords: ["bundle size", "webpack", "rollup", "debug"]
---

Sentry ships with code that enables you to debug your Sentry configuration, primarily through logging. While this 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 a special flag in its CommonJS and ESM distributions which can be used to facilitate [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) (removal) of such code during the build process.
The Sentry SDK ships with code that is not strictly required for it to collect your errors. This includes, for example, code to debug your Sentry configuration or code to enable performance monitoring. 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 a special flags in its CommonJS and ESM distributions, which can be used to facilitate [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) (removal) of such code during the build process.

To make debugging code eligible for tree shaking, you must replace the `__SENTRY_DEBUG__` flag in the Sentry SDK with `false`.
## List Of Flags

To make optional code eligible for tree shaking, you can replace various flags in the Sentry SDK with `false`.

`__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 automatic instrumentation performance monitoring.

<PlatformSection notSupported={["javascript.nextjs"]}>

## Tree Shaking Debug Code With Webpack
## Tree Shaking Optional Code With Webpack

To tree shake Sentry debug code in your webpack bundles, we recommend using webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/).

Expand All @@ -23,6 +33,7 @@ module.exports = {
plugins: [
new webpack.DefinePlugin({
__SENTRY_DEBUG__: false,
__SENTRY_TRACING__: false,
}),
// ... other plugins
],
Expand All @@ -33,7 +44,7 @@ module.exports = {

<PlatformSection notSupported={["javascript.nextjs"]}>

## Tree Shaking Debug Code With Rollup
## Tree Shaking Optional Code With Rollup

If you're using `rollup.js`, we recommend using [Rollup's `replace` plugin](https://github.com/rollup/plugins/tree/master/packages/replace).

Expand All @@ -47,6 +58,7 @@ export default {
plugins: [
replace({
__SENTRY_DEBUG__: false,
__SENTRY_TRACING__: false,
}),
// ... other plugins (best placed after)
],
Expand All @@ -57,7 +69,7 @@ export default {

<PlatformSection supported={["javascript.nextjs"]}>

## Tree Shaking Debug Code With Next.js
## Tree Shaking Optional Code With Next.js

To tree shake Sentry debug code in Next.js projects, you can use webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) in your Next.js configuration.

Expand All @@ -67,6 +79,7 @@ const nextConfig = {
config.plugins.push(
new webpack.DefinePlugin({
__SENTRY_DEBUG__: false,
__SENTRY_TRACING__: false,
})
);

Expand Down