Tree Shaking

The Sentry SDK supports 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

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.

__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 performance monitoring. Attention: __SENTRY_TRACING__ must not be replaced with false when you're using any performance monitoring-related SDK features (e.g. Sentry.startTransaction()). This flag is intended to be used in combination with packages like @sentry/next or @sentry/sveltekit, which automatically include performance monitoring functionality.

Tree Shaking Optional Code With Next.js

To tree shake Sentry debug code in Next.js projects, you can use webpack's DefinePlugin in your Next.js configuration.

const nextConfig = {
  webpack: (config, { webpack }) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        __SENTRY_DEBUG__: false,
        __SENTRY_TRACING__: false,
      })
    );

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

For more information on custom webpack configurations in Next.js, see Custom Webpack Config in the Next.js docs.

Tree Shaking Default Integrations

By default, the Sentry SDK sets up a list of default integrations that extend your SDK functionality. You can also add additional or custom integrations to your SDK configuration. If you don't want to include default integrations in your config, you can disable 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:

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);