# Tree Shaking | Sentry for Next.js

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.

## [Tree Shaking Optional Code](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking.md#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 tracing, 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.

Anything that you don't import and use will *automatically* be tree shaken away when using any modern bundler like Webpack, Rollup, Vite, or similar. This means that optional integrations like Replay, BrowserTracing, BrowserProfiling, and any unused utility methods won't be included in your bundle unless you import and use them yourself. The rest of this page relates to ways to tree shake internal SDK code, which isn't strictly required unless you use certain features.

### [Tree Shaking With Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking.md#tree-shaking-with-nextjs)

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

`next.config.(js|mjs)`

```javascript
const nextConfig = {
  webpack: (config, { webpack }) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        __SENTRY_DEBUG__: false,
        __SENTRY_TRACING__: false,
        __RRWEB_EXCLUDE_IFRAME__: true,
        __RRWEB_EXCLUDE_SHADOW_DOM__: true,
        __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
      }),
    );

    // return the modified config
    return config;
  },
};
```

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.

### [Manual Tree Shaking](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking.md#manual-tree-shaking)

If you want to tree shake optional code, remove the code from your build output by replacing various flags in the Sentry SDK. Note that if you already configured tree shaking via the Sentry Bundler Plugins, you do not need to do this manually - the plugins will take care of it for you.

**The following flags are available:**

`__SENTRY_DEBUG__`

Replacing this flag with `false` will tree shake any SDK code that's related to debug logging.

`__SENTRY_TRACING__`

Replacing this flag with `false` will tree shake any SDK code that's related to tracing.

`__SENTRY_TRACING__` must not be replaced with `false` when you're using any tracing-related SDK features (for example,`Sentry.startTransaction()`). This flag is intended to be used in combination with packages like `@sentry/next` or `@sentry/sveltekit`, which automatically include the tracing functionality.

This has no effect if you did not add `browserTracingIntegration`.

`__RRWEB_EXCLUDE_IFRAME__`

Replacing this flag with `true` will tree shake any SDK code related to capturing iframe content with Session Replay. It's only relevant when using [Session Replay](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay.md). Enable this flag if you don't want to record any iframes. This has no effect if you did not add `replayIntegration`.

`__RRWEB_EXCLUDE_SHADOW_DOM__`

Replacing this flag with `true` will tree shake any SDK code related to capturing shadow dom elements with Session Replay. It's only relevant when using [Session Replay](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay.md). Enable this flag if you don't want to record any shadow dom elements. This has no effect if you didn't add `replayIntegration`.

`__SENTRY_EXCLUDE_REPLAY_WORKER__`

Replacing this flag with `true` will tree shake any SDK code that's related to the included compression web worker for Session Replay. It's only relevant when using [Session Replay](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay.md). Enable this flag if you want to host a compression worker yourself. See [Using a Custom Compression Worker](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay/configuration.md#using-a-custom-compression-worker) for details. **We don't recommend enabling this flag unless you provide a custom worker URL.** This has no effect if you did not add `replayIntegration`.

## [Tree Shaking Default Integrations](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking.md#tree-shaking-default-integrations)

By default, the Sentry SDK sets up a list of [default integrations](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/integrations.md) that extend your SDK functionality. You can also add [additional](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/integrations.md) or [custom](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/integrations/custom.md) integrations to your SDK configuration. If you don't want to include default integrations in your config, you can [disable](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options.md#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:

`main.js`

```javascript
import {
  BrowserClient,
  breadcrumbsIntegration,
  dedupeIntegration,
  defaultStackParser,
  getCurrentScope,
  globalHandlersIntegration,
  makeFetchTransport,
  linkedErrorsIntegration,
} 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: [
    breadcrumbsIntegration(),
    globalHandlersIntegration(),
    linkedErrorsIntegration(),
    dedupeIntegration(),
  ],
});

getCurrentScope().setClient(client);
client.init();
```

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.
