@sentry/nextjs bundle size and tree shaking

[carbonrobot]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using? If you use the CDN bundles, please specify the exact bundle (e.g. bundle.tracing.min.js) in your SDK setup.

@sentry/nextjs

SDK Version

7.46.0

Framework Version

7.46.0

Link to Sentry event

No response

SDK Setup

import * as Sentry from '@sentry/nextjs';

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN,
  environment: process.env.STAGE
});

Steps to Reproduce

Using @sentry/nextjs": "^7.15.0, the bundle analyzer reports

Stat: 84.93KB
Parsed Size: 20.52KB
Gzipped: 6.41KB

Using @sentry/nextjs": "^7.46.0, the bundle analyzer reports

Stat: 305.32KB
Parsed Size: 50.19KB
Gzipped: 15.56KB

Attempting to follow the tree shaking guide and the following setup produces roughly the same result

import {
  defaultStackParser,
  getCurrentHub,
  Breadcrumbs,
  BrowserClient,
  makeFetchTransport,
  Dedupe,
  FunctionToString,
  GlobalHandlers,
  HttpContext,
  InboundFilters,
  LinkedErrors,
  TryCatch,
} from '@sentry/nextjs';

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

getCurrentHub().bindClient(
  new BrowserClient({
    dsn: SENTRY_DSN,
    transport: makeFetchTransport,
    stackParser: defaultStackParser,
    environment: process.env.STAGE,
    integrations: [
      new Breadcrumbs(),
      new Dedupe(),
      new FunctionToString(),
      new GlobalHandlers(),
      new HttpContext(),
      new InboundFilters(),
      new LinkedErrors(),
      new TryCatch(),
    ],
  })
);

Expected Result

The bundle size should not constitute a significant portion of the overall application bundle, or at least be tree shakeable.

Actual Result

The bundle size has grown significantly over past releases

The following related issue does not seem to have a resolution

#2707

[lforst]

We do have a continuous effort to keep bundle size low. Unfortunately for the amount of features we provide (and users want to see and use) there is a trade-off to be had. Trust me when I say, that the term "bundle size" is a term that is mentioned almost daily in the team ^^

I am gonna close this issue because it is not actionable at the moment. Feel free to reopen if you have a suspicion that this is a) a regression or b) if you have an idea of how to resolve this.

In case of a) please also provide a link to a website where we can check if unwanted code is included.

[davidfurlong]

this is kinda unusable for a bunch of kinds of apps; production build - standard @sentry/next-js setup on "@sentry/nextjs": "^7.46.0",

[rchl]

Inclusion of @sentry/replay is probably the biggest offender as it's probably not used by most people anyway.

I would think that NOT doing import * as Sentry should tree shake it out but I don't have experience with Next SDK, only with Vue SDK, where it does indeed help to not import *.

[lforst]

I couldn't reproduce this exact issue in a test app but something caught my eye and I have a feeling it is gonna fix this: #7710

[philwolstenholme]

Do you know when that change might make it into a release @lforst ? I'm evaluating Sentry with Next at the moment at work, but adding it has taken us over our performance budget.

[lforst]

@philwolstenholme probably sometime in the next few days. Just to confirm what you mean by performance budget: It's bundle size right and not Sentry Transaction quota, right?

[philwolstenholme]

@lforst ah yes sorry, it's nothing to do with Sentry, it's Lighthouse in CI running against a deployment preview URL.

[luukdv]

Another option is not bundling Sentry in your main bundle (if you can accept the tradeoff of not having Sentry available from the very first millisecond):

// sentry.js

export default function sentry() {
  Sentry.init();
}

// main.js

import("./sentry").then((sentry) => sentry.default());

[carbonrobot]

@luukdv absolutely. I've been looking at ways of removing our dependency on the sentry/nextjs package and just pulling everything in manually to avoid the bundling. Nextjs packages are already fairly large and as much as we love sentry we can't take the size it imposes for many apps