Document how to handle sideEffects #9787
Description
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
latest
Framework Version
next latest
Link to Sentry event
No response
SDK Setup
No response
Steps to Reproduce
It looks like sth. related to tree shaking in Webpack (https://webpack.js.org/guides/tree-shaking/)
It can be easily reproduced using even the latest next and @sentry/nextjs versions - e.g. via project created using npx create-next-app@latest; npx @Sentry/wizard@latest -i nextjs. With such a sample project created, all works as expected.
Interesting things start to happen, when you add "sideEffects": false to the package.json:
Both sentry.edge.config.(js|ts) and sentry.server.config.(js|ts) seem to be completely ignored - the content of both could be only throw new Error(); - these won't even be loaded. However, if you remove any, the Webpack plugin will complain about the missing file(s).
In my initial message I have mentioned that the API route errors are reported to Sentry - it looks like, however, it was due to the Next's Error Overlay being displayed and @sentry/browser jumping in.
I had the "sideEffects": false entry in my project's package.json for some long time already - it was actually resulting in my app client bundle files size being smaller by ~10kb due to a better tree shaking on my project's dependencies. I do not, however, see the same in the sample project created above. It's not affecting Sentry running in the browser - here all works as expected.
The 'solution' to the issue is to remove "sideEffects": false from package.json, or at least change it to the following:
"sideEffects": [
"./sentry.client.config.*s",
"./sentry.edge.config.*s",
"./sentry.server.config.*s"
]
I would, however, expect the Sentry Webpack plugin does it automatically (i.e. prevents these files being shaken out).
Or, at least, Sentry documentation mentions this trap...
Expected Result
I would, however, expect the Sentry Webpack plugin does it automatically (i.e. prevents these files being shaken out).
Actual Result
package.json includes "sideEffects": false, the Sentry Webpack plugin appears to ignore certain configuration files (sentry.edge.config.(js|ts) and sentry.server.config.(js|ts)). Even if the content of these files is set to something simple like throw new Error();, they are not loaded, and removing any of these files results in a Webpack plugin complaint about missing files.
Additionally, the report notes that API route errors are reported to Sentry, possibly due to Next.js Error Overlay being displayed and @sentry/browser jumping in. Despite these issues, the Sentry Webpack plugin seems to work as expected in the browser, indicating a specific problem when sideEffects is set to false in the project's configuration.
┆Issue is synchronized with this Jira Improvement by Unito