Add tree shaking guide for default integrations (#4996)

Co-authored-by: Isabel <[email protected]>

Author: 2 people

src/platforms/javascript/common/configuration/tree-shaking/index.mdx

@@ -5,9 +5,15 @@ description: "Learn how to reduce Sentry bundle size by tree shaking unused code
 keywords: ["bundle size", "webpack", "rollup", "debug"]
 ---
 
-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.
+The Sentry SDK supports [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/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.
 
-## List Of Flags
+## Tree Shaking Optional Code
+
+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 (removal) of such code during the build process.
+
+### List Of Flags
 
 To make optional code eligible for tree shaking, you can replace various flags in the Sentry SDK with `false`.
 
@@ -21,9 +27,9 @@ To make optional code eligible for tree shaking, you can replace various flags i
 
 <PlatformSection notSupported={["javascript.nextjs"]}>
 
-## Tree Shaking Optional 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/).
+To tree shake Sentry debug code in your webpack bundles, we recommend using webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/):
 
 ```javascript {filename:webpack.config.js}
 const webpack = require("webpack");
@@ -44,9 +50,9 @@ module.exports = {
 
 <PlatformSection notSupported={["javascript.nextjs"]}>
 
-## Tree Shaking Optional 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).
+If you're using `rollup.js`, we recommend using [Rollup's `replace` plugin](https://github.com/rollup/plugins/tree/master/packages/replace):
 
 ```javascript {filename:rollup.config.js}
 import replace from "@rollup/plugin-replace";
@@ -69,7 +75,7 @@ export default {
 
 <PlatformSection supported={["javascript.nextjs"]}>
 
-## Tree Shaking Optional 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.
 
@@ -92,3 +98,53 @@ const nextConfig = {
 For more information on custom webpack configurations in Next.js, see [Custom Webpack Config](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) in the Next.js docs.
 
 </PlatformSection>
+
+## Tree Shaking Default Integrations
+
+By default, the Sentry SDK sets up a list of [default integrations](../integrations/default) that extend your
+SDK functionality. You can also add [additional](../integrations/plugin) or [custom](../integrations/custom)
+integrations to your SDK configuration.
+If you don't want to include default integrations in your config, you can [disable](../options/#integration-configuration)
+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:
+
+```javascript {filename: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);
+```
+
+<Note>
+
+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.
+
+</Note>