Tree-shaking browserTracingIntegration in NextJS

[antongunkin]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/nextjs

SDK Version

8

Framework Version

Next 14.2.10

Link to Sentry event

No response

Reproduction Example/SDK Setup

Hey!

Can't get rid of extra browserTracingIntegration integration.
As I can see it happened here: https://github.com/getsentry/sentry-javascript/releases/tag/8.26.0

It worked (-50kb size-limit) prior this version.
Could you please check?

Thank you!

Steps to Reproduce

sentry.client.config.ts

Sentry.init({
  enableTracing: false,
});

next.config.js

config.plugins.push(
  new webpack.DefinePlugin({
    __SENTRY_TRACING__: false,
  }),
);

const sentryConfig = {
  bundleSizeOptimizations: {
    excludeTracing: true,
  },
};

module.exports = module.exports = withSentryConfig(nextConfig, sentryConfig);

Expected Result

No browserTracingIntegration.js in clients js-bundle.

Actual Result

Extra integration, increased bundle-size.

[mydea]

Hmm, you can omit enableTracing: false, this should not be necessary.

I just tried in our own size-limit setup, and it seems to be correct to me like this:

{
    name: '@sentry/nextjs (without tracing)',
    path: 'packages/nextjs/build/esm/client/index.js',
    import: '{ init }',
    ignore: ['next/router', 'next/constants'],
    gzip: true,
    limit: '39 KB',
    modifyWebpackConfig: function (config) {
      const webpack = require('webpack');
      const TerserPlugin = require('terser-webpack-plugin');

      config.plugins.push(
        new webpack.DefinePlugin({
          __SENTRY_TRACING__: false,
        }),
      );

      config.optimization.minimize = true;
      config.optimization.minimizer = [new TerserPlugin()];

      return config;
    },
  },

is smaller than without the webpack config, in the range that I would expect.

You wrote:

It worked (-50kb size-limit) prior this version.

Do you mean that with version 8.25.0 it worked for you, and then not anymore?

[antongunkin]

Hey @mydea !

Do you mean that with version 8.25.0 it worked for you, and then not anymore?

Correct! Only 8.25.0 (and below) works well.
And yes, enableTracing: false does nothing.

🤷‍♂️

[mydea]

Hmm, and the only change you did there was to bump the version from 8.25.0 to 8.26.0 - no other (e.g. config) changes?

I don't immediately see anything in 8.25.0...8.26.0 that jumps out, and our size limit seems to still tree shake properly 🤔 cc @lforst or @chargome could you try this in some "real" next app to verify that tree shaking works on the latest version of the SDK?

[antongunkin]

@mydea Thanks for checking!

What I see in 8.26.0:

• feat(nextjs): Always add browserTracingIntegration #13324
• Always add browserTracingIntegration in Meta Framework SDKs #13010

Plus extra non-documented options here: https://github.com/getsentry/sentry-javascript/pull/13323/files#diff-338f827c7c3625622b0b38a45cd130517a9f872f6de2d354a7c80785462dcc3dR122 (which also didn't help)