NextJS 13 integration causes bundle to increase significantly

[Tomekmularczyk]

I try to integrate Sentry to the project. I use the installation wizard and all seem to work however when I deploy the app to AWS Amplify I hit a output size limit:

When I inspect the statistics produced by yarn build I can see a significant increase in bundle sizes:

I did not provide any custom configuration to the project besides what the wizard created.

nextjs.config.js

const webpack = require("webpack");
const { withSentryConfig } = require("@sentry/nextjs");
const withNextIntl = require("next-intl/plugin")(
  // This is the default (also the `src` folder is supported out of the box)
  "./src/intl/i18n.ts",
);

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: { appDir: true },
};

const configWithNextIntl = withNextIntl(nextConfig);
const configWithSentry = withSentryConfig(
  configWithNextIntl,
  {
    // For all available options, see:
    // https://github.com/getsentry/sentry-webpack-plugin#options

    // Suppresses source map uploading logs during build
    silent: true,
    org: "xxxx",
    project: "javascript-nextjs",
  },
  {
    // For all available options, see:
    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

    // Upload a larger set of source maps for prettier stack traces (increases build time)
    widenClientFileUpload: true,
    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
    // tunnelRoute: "/monitoring",
    // Hides source maps from generated client bundles
    hideSourceMaps: true,
    // Automatically tree-shake Sentry logger statements to reduce bundle size
    disableLogger: true,
  },
);

module.exports = configWithSentry;

sentry.client.config.ts

// 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: "xxx",

  // 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,

  replaysOnErrorSampleRate: 1.0,

  // 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,

  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
  integrations: [
    new Sentry.Replay({
      // Additional Replay configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

sentry.edge.config.ts

// 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: "xxx",

  // 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,
});

sentry.server.config.ts

// 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: "xxx",

  // 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,
});

src/app/[locale]/sentry-example-page/page.tsx

... just a regular page here

next v.13.4.19
@sentry/nextjs: v^7.69.0

And that's all there is to it...

[smeubank]

checking with the team the source of this error. In the logs or in sentry do you see that some of the artifacts are still uploaded? Are you stack traced still resolved in issues?

[Tomekmularczyk]

I don't know how to check if any artifacts are uploaded. But I can see stack traces with source-maps in sentry when triggering an error from the example page. (I'm testing this on Vercel deployment)

[Lms24]

One thing that definitely increases bundle size a lot is the Replay integration. If you're not planning on using Session Replay, feel free to remove it.

[Tomekmularczyk]

thanks, it made a difference, the impact is smaller

[Lms24]

Furthermore, you might want to look into enabeling advanced tree shaking within the Sentry SDK: https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/

[Tomekmularczyk]

Thanks. That decreased the bundle size even more

But I'm still getting this Amplify upload error, so I guess it's not the bundle size just like @alexlafroscia suggests

[lforst]

The error you're seeing is unrelated to bundle size. It is Amplify complaining that you're uploading to many assets. This is likely because you have a lot or big dependencies. Please check the size of your node_modules (or individual packages within). This might be the SDK or it could be a very big dependency and our SDK just happened to push it over the edge.

[lforst]

that is probably way too big. You should split up your deps into dependencies and devDependencies.

[Tomekmularczyk]

I tried spliting the deps but the same error occurs. Any other idea how could I investigate what causes the problem?

[lforst]

I would check what packages inside your dependencies are big and go from there.

[Tomekmularczyk]

I don't see much of a big dependencies, they're rather average hmm

[lforst]

I recommend reaching out to Amplify Support. I don't think this is caused by our SDK. If you find indication that it is indeed the SDK, let us know!

[Tomekmularczyk]

It was a problem with Amplify hosting (issue), we simply switched to Vercel hosting