getsentry / sentry-javascript

Official Sentry SDKs for JavaScript
https://sentry.io
MIT License
7.76k stars 1.52k forks source link

[nextjs] Add option to disable source map uploading but still create sourcemaps #6240

Closed joliss closed 1 year ago

joliss commented 1 year ago

Problem Statement

The manual setup documentation for Next.js says:

If you want or need to handle source map uploading separately, the plugin can be disabled for either the server or client build process. [...]

const moduleExports = {
  sentry: {
    disableServerWebpackPlugin: true,
    disableClientWebpackPlugin: true,
  },
};

I do want to disable source map uploading, because the Sentry Release GitHub Action handles it for me. But if I set the disableServerWebpackPlugin and disableClientWebpackPlugin, it stops creating source maps altogether:

When I run next build, there are no source maps in .next/**/*.map.

When I run next export, there are no source maps in out/**/*.map.

Solution Brainstorm

I'd like to have options to only disable the upload, but still apply the webpack configuration needed for Sentry.

I was able to suppress uploading by setting dryRun: true in my sentryWebpackPluginOptions. However, this option was hard to find (I had to google a lot, and it's only documented on the @sentry/webpack-plugin npm page), and the "dry run" naming is surprising for something that I add permanently to my configuration file.

If this is indeed the right option to do this, then perhaps the documentation snippet I linked above just needs to be updated to recommend dryRun instead.

lobsterkatie commented 1 year ago

Hi, @joliss.

If you've disabled the webpack plugin, we assume you are handling the things it does (sourcemap generation and uploading, setting the release in your Sentry.init) yourself. It sounds like the GHA has you covered for the sourcemap upload. For sourcemap generation, you can tell webpack to create sourcemaps (whether or not you're using sentry) by adding to your next config the webpack option, with devtool set either to source-map or hidden-source-map:

const moduleExports = {
  webpack: {devtool: "source-map"},
  sentry: {
    disableServerWebpackPlugin: true,
    disableClientWebpackPlugin: true,
  },
};

You'll also need to make sure to include the release value in your Sentry.init(), both for server and client. (You're right that our docs could be better on this score, because they don't tell you that, for example.)

That said, it's likely easier to just let the plugin do its thing, given that it's set up specifically for nextjs apps, and use the GHA for setting commits but not dealing with sourcemaps. Is there a reason you'd rather do the upload through GHA?

The solution you found, using dryRun, also works, because it makes the plugin output what it would communicate and upload to sentry, without actually doing it.

joliss commented 1 year ago

Thanks for the doc fix @lobsterkatie, that makes it much clearer!

That said, it's likely easier to just let the plugin do its thing, given that it's set up specifically for nextjs apps, and use the GHA for setting commits but not dealing with sourcemaps. Is there a reason you'd rather do the upload through GHA?

The reason I do the upload through GitHub Actions is that I want my teammates to be able to run the Next production server locally (using next build && next start) to diagnose performance issues, without them having to be logged into Sentry.

As a small bonus, using GHA gives me releases named after the git commit, rather than random IDs.

lobsterkatie commented 1 year ago

Ah. Both of those things are possible other ways, but if what you have is working for you, then no reason to change.