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

Author: lforst

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.
 
 <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/).
 
@@ -23,6 +33,7 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       __SENTRY_DEBUG__: false,
+      __SENTRY_TRACING__: false,
     }),
     // ... other plugins
   ],
@@ -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).
 
@@ -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 {
 
 <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.
 
@@ -67,6 +79,7 @@ const nextConfig = {
     config.plugins.push(
       new webpack.DefinePlugin({
         __SENTRY_DEBUG__: false,
+        __SENTRY_TRACING__: false,
       })
     );