@sentry/gatsby massively increases bundle size

[abemedia]

Problem Statement

I'm using @sentry/gatsby on my Gatsby site with a very minimal config using no integrations at all:

import { init } from '@sentry/gatsby'

init({ dsn: 'my_dsn', release: 'my_release', environment: 'my_environment' })

Also, I followed your docs for tree-shaking and I'm setting this in gatsby-node.ts:

export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new DefinePlugin({
        __SENTRY_DEBUG__: false,
        __SENTRY_TRACING__: false,
      }),
    ],
  })
}

However, since the plugin imports all of @sentry/react the entry bundle ends up doubling in size, due to a whole host of things I'm not even using like @sentry/replay (see bundle sizes and screenshot below).

Without Sentry:

Parsed - 220 KB

framework-db6efceca1bda05be7cc.js (138.02 KB)
app-e772bc819c92a4c1c3de.js (76.22 KB)
webpack-runtime-254aede136f93df2497d.js (5.76 KB)

Gzipped - 72.1 KB

framework-db6efceca1bda05be7cc.js (44.57 KB)
app-e772bc819c92a4c1c3de.js (24.82 KB)
webpack-runtime-254aede136f93df2497d.js (2.71 KB)

With Sentry:

Parsed - 456.43 KB

app-0664ec417cf99fc2283f.js (188.48 KB)
framework-db6efceca1bda05be7cc.js (138.02 KB)
b3a13d7d-5e4d58d867fc4502e74f.js (123.89 KB) - @sentry/replay
webpack-runtime-d6110011ba2fbc8a1b6c.js (6.04 KB)

Gzipped - 145.54 KB

app-0664ec417cf99fc2283f.js (60.26 KB)
framework-db6efceca1bda05be7cc.js (44.57 KB)
b3a13d7d-5e4d58d867fc4502e74f.js (37.87 KB) - @sentry/replay
webpack-runtime-d6110011ba2fbc8a1b6c.js (2.84 KB)

Solution Brainstorm

It would be great if there was a way to avoid loading all of this stuff and only importing what we need.
Ideally setting sentry options in gatsby-config.ts should be removed completely, so the plugin doesn't import anything into the bundle that is not imported in sentry.config.ts and only handles webpack config and loading the user-defined sentry.config.ts, thus allowing the user to have full control.

It seems kinda crazy that sentry alone is bigger than React, Gatsby and all my other Gatsby plugins combined...

[Lms24]

Hey @abemedia,

usually, Webpack should be able to tree-shake away Replay if it is not referenced anywhere in the code. You posted a Sentry.init snipped above but our docs show to init the SDK in the gatsby.config.js plugins option. Did you try this as well?

I'm wondering if Gatsby modifies the webpack config to disable tree shaking in some way?

Full disclosure: I don't have a lot of context around Gatsby so it's possible that I'm missing something here.

[abemedia]

According to your docs the config should be done in a sentry.config.ts file.

[abemedia]

Hi, I've created a simple example to demonstrate the bundle bloat in a gatsby website: https://github.com/abemedia/gatsby-sentry-bundle-bloat-example

As you can see I'm not using replay, tracing, breadcrumbs etc. and yet they are included in the (massive) bundle!

[abemedia]

Furthermore, if you check the size it adds to the bundle and then check https://bundlephobia.com/package/@sentry/gatsby@7.48.0 you will see nothing is tree-shaken and we get the full whack.

[mydea]

Hey,

Thank you for the reproduction! We will take a look and see if we can figure out why this is not properly tree shaken.