diff --git a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx index 18159d5c9f02f0..e75914ca1e5d02 100644 --- a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx +++ b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx @@ -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. -## 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/). @@ -23,6 +33,7 @@ module.exports = { plugins: [ new webpack.DefinePlugin({ __SENTRY_DEBUG__: false, + __SENTRY_TRACING__: false, }), // ... other plugins ], @@ -33,7 +44,7 @@ module.exports = { -## 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). @@ -47,6 +58,7 @@ export default { plugins: [ replace({ __SENTRY_DEBUG__: false, + __SENTRY_TRACING__: false, }), // ... other plugins (best placed after) ], @@ -57,7 +69,7 @@ export default { -## 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. @@ -67,6 +79,7 @@ const nextConfig = { config.plugins.push( new webpack.DefinePlugin({ __SENTRY_DEBUG__: false, + __SENTRY_TRACING__: false, }) );