Tree shaking does not seem to be working

[aaa3334]

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?

@sentry/nextjs

SDK Version

8.54.0

Framework Version

14.2.23

Link to Sentry event

No response

Reproduction Example/SDK Setup

client config:

// This file configures the initialization of Sentry on the client.
// The config you add here will be used whenever a users loads a page in their browser.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

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

Sentry.init({
  dsn: SENTRY_DSN,

  // Add optional integrations for additional features
  // integrations: [Sentry.replayIntegration()],

  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,

  // Define how likely Replay events are sampled.
  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  // replaysSessionSampleRate: 0.1,

  // Define how likely Replay events are sampled when an error occurs.
  // replaysOnErrorSampleRate: 1.0,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,

  enabled: process.env.NODE_ENV === "production",
});

edge config:

// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
// The config you add here will be used whenever one of the edge features is loaded.
// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

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

Sentry.init({
  dsn: SENTRY_DSN,

  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,
  enabled: process.env.NODE_ENV === "production",
});

Server config:
// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

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

Sentry.init({
  dsn: SENTRY_DSN,

  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,

  enabled: process.env.NODE_ENV === "production",
});

-------- next.config.js -------- (slightly modified to remove sensitive info)

/** @type {import('next').NextConfig} */

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const nextConfig = {
  experimental: {
    optimizePackageImports: ['@radix-ui/react-icons', '@radix-ui/react-accordion', '@radix-ui/themes', '@aws-sdk', '@remotion', 'react-icons', '@react-pdf', '@sentry/nextjs', 'ua-parser-js'],
    instrumentationHook: true,
  },
  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,
      })
    );

    // Modified optimization configuration
    config.optimization = {
      ...config.optimization,
      sideEffects: true,
    };

    return config;
  },
  images: {
    remotePatterns: [
     ....
  },
  async headers() {
    return [
     ....
    ]
  }
}

module.exports = withBundleAnalyzer(nextConfig);

// Sentry configuration
const { withSentryConfig } = require("@sentry/nextjs");

module.exports = withSentryConfig(
  module.exports,
  {
    org: ....
    project: "javascript-nextjs",
    silent: !process.env.CI,
    widenClientFileUpload: true,
    reactComponentAnnotation: {
      enabled: true,
    },
    tunnelRoute: "/monitoring",
    hideSourceMaps: true,
    disableLogger: true,
    sourcemaps: {
      disable: true,
    },
    automaticVercelMonitors: false,
    webpack: (config) => {
      config.optimization = {
        ...config.optimization,
        sideEffects: true,
      };
      return config;
    }
  }
);

Steps to Reproduce

Install sentry
run build - notice the build is twice the size and much slower to handle - eg instead of instantly navigating with the links as before, it takes a few seconds (even though I am using Next's Link functionality) - it seems to be in the middleware?
I tried to add treeshaking to combat this but the treeshaking has no effect.. I asked support and they said it looked correct according to the docs - so I am wondering if it is my setup which is just wrong?

Note as in the docs I am using the import:

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

I can go through and change it but then should i also be changing eg the instrumentation file etc. to change the imports there? The sentry package is by far the largest package I have in my application yet it is also insanely useful so I would like to be able to keep using it but the current performance tradeoff is causing me more than a few issues....

(Note I have the samples up to 100% as I currently only have a handful of users - I will dial that down when I have more users)

Note I am also getting this issue: #15100 but that is covered by a different issue here (but may be linked - I am not sure)
Webpack Bundle Analyzer saved report to /Users/a/Documents/Automations/front-end-some/website/.next/analyze/nodejs.html
Webpack Bundle Analyzer saved report to /Users/a/Documents/Automations/front-end-some/website/.next/analyze/edge.html
[webpack.cache.PackFileCacheStrategy] Serializing big strings (318kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
Webpack Bundle Analyzer saved report to /Users/a/Documents/Automations/front-end-some/website/.next/analyze/client.html

Expected Result

I don't mind it increasing the build time and slightly making the site slower, but it is significantly making the site slower...

I would also expect that tree shaking would make a difference

Actual Result

The site performs sluggish and is quite slow. I am not sure if it is just my config (I did email support about it and they said it looked correct) but the tree shaking is having 0 effect

This is my first load before adding sentry:

+ First Load JS shared by all 88.5 kB
├ chunks/2117-ba1e2ea7196e8b9a.js 31.8 kB
├ chunks/fd9d1056-c66439d2a62f7fbd.js 53.6 kB
└ other shared chunks (total) 3.05 kB

ƒ Middleware 59.2 kB

This is my fastload (and middleware) after adding sentry:

+ First Load JS shared by all 117 kB
├ chunks/5430-cbf5d05a2d45a79b.js 59.3 kB
├ chunks/fd9d1056-42eac2514f2cc8ee.js 53.8 kB
└ other shared chunks (total) 3.61 kB

ƒ Middleware 114 kB

[lforst]

There seems to be a misunderstanding what tree shaking is about. Treeshaking is about bundle size, eliminating dead code. It has noting to do with build times - if anything treeshaking will make your builds slower. There is one thing in your config that will with almost certainly just disable tree shaking globally: sideffects: true.

Unfortunately, there is nothing really actionable here. The Sentry SDK has code and that code needs to be processed by Next.js. There is no way around that. As for the serialization warning, you can try disabling reactComponentAnnotation, other than that the SDK doesn't do any big serialization of strings. I have seen that warning appear in projects that simply have big files (without Sentry SDK), so that warning can also be emitted by nextjs internally.