[sentry/nextjs] sentry/tracing adds 30kb, can we opt-out ?

[belgattitude]

Problem Statement

Following the sentry/nextjs recommended approach, it's difficult to opt-out from tracing in the browser.

The sentry/tracing adds more or less 30kb to the browser final bundle which is a hard blocker in some circumstances.

Here's a tree map taken with the recommended approach and tested with @sentry/nextjs 6.18.2

Solution Brainstorm

I was able to remove the sentry/tracing from the browser, by importing sentry/react rather than sentry/nextjs

// import { init as sentryInit } from '@sentry/nextjs';
import { init as sentryInit } from '@sentry/react';

sentryInit({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  // tracesSampleRate: 1.0,
});

That reduced the bundle from 103kb to 73kb

The setup is belgattitude/nextjs-monorepo-example#1409

Is there any drawbacks or risks to this approach (apart from not sending traces) ?

[lobsterkatie]

Hi, @belgattitude.

You're right - if you're not using tracing, ideally it shouldn't be in your bundle. We've been doing (and continue to do) a lot of treeshaking work this quarter, and I've added this particular scenario to our list. In the meantime, I believe you're correct that everything the nextjs SDK adds on top of the react SDK is tracing-related, so your workaround is probably fine.

@AbhiPrasad, since you're our react SDK expert, any drawbacks you can see to his current solution?

[AbhiPrasad]

No drawbacks from the react import other than missing out from the stuff done here. Maybe we can expose an initWithoutTracing.

[belgattitude]

Maybe we can expose an initWithoutTracing.

Why not ? It's a good idea imo.

[AbhiPrasad]

Closing this for now since we've released v7: https://github.com/getsentry/sentry-javascript/releases/tag/7.0.0

[belgattitude]

@AbhiPrasad congrats it works perfect 💯 Thanks a lot

PS: Note for others, simply add this in next.config.js

  webpack: (config, { webpack }) => {
    // https://docs.sentry.io/platforms/javascript/configuration/tree-shaking
    config.plugins.push(
      new webpack.DefinePlugin({
        __SENTRY_DEBUG__: false,
        __SENTRY_TRACING__: false,
      })
    );