@sentry/nextjs: option for hidden-source-map instead of source-map

[Pikachews]

Firstly, thanks for all your hard work, Sentry is one of the best development tools out there, hands down. 👍

I have a small request for the new @sentry/nextjs plugin.
Based on this line here:

sentry-javascript/packages/nextjs/src/utils/config.ts

Line 151 in 60e1982

newConfig.devtool = 'source-map';

It seems the plugin only allows using source-map for devtools. Would it be possible to add an option to use hidden-source-map instead? The current configuration leaves the reference to the source map file, causing Chrome DevTools to report a bunch of

DevTools failed to load SourceMap: Could not load content for https://...: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

since I do not upload the source maps to the server. 🙁

Thanks for the consideration.

[Ryz0nd]

I temporarily solved this problem using patch-package.

[kamilogorek]

withSentryConfig which is used to generate the config is nothing else than a function that processes input config, and outputs updated one. There's nothing that'd stop you from changing any of the values once it's processed.

Based on this docs: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#extend-default-webpack-usage-for-source-maps

Given this config (shortened for readabilty):

const { withSentryConfig } = require("@sentry/nextjs");
// ...
module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

You can write:

const { withSentryConfig } = require("@sentry/nextjs");
// ...
const sentryConfig = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
const stashedWebpackConfig = sentryConfig.webpack;
sentryConfig.webpack = (config, options) => {
  const updatedConfig = stashedWebpackConfig(config, options);
  // see: https://github.com/vercel/next.js/blob/master/errors/improper-devtool.md
  if (!options.dev) {
    updatedConfig.devtool = 'hidden-source-map';
  }
  return updatedConfig;
}
module.exports = sentryConfig;

While definitely not perfect, it should let you get unblocked.

[lobsterkatie]

We are considering whether (and if so, when and how best) to do this. Reopening until we come to a decision.

[jgibbons]

I tried the solution referenced above to set hidden-source-map but it resulted in Sentry no longer using source maps for SSR pages. Is this a known issue or perhaps something simple I'm missing?

[hellojser]

class HiddenSourceMapPlugin {
  apply(compiler) {
    compiler.hooks.environment.tap('HiddenSourceMapPlugin', () => {
      compiler.options.devtool =
        compiler.options.name === 'server' ? false : 'hidden-source-map';
    });
  }
}

[AlexBeauchemin]

I created a webpack plugin which remove all sourcemaps after sentry's upload and implement @hellojser solution to remove the sourcemap references to avoid 404 errors by browser calling the unexisting map files

https://github.com/AlexBeauchemin/webpack-delete-sourcemaps-plugin

[disguised-uchiha]

class HiddenSourceMapPlugin {
  apply(compiler) {
    compiler.hooks.environment.tap('HiddenSourceMapPlugin', () => {
      compiler.options.devtool =
        compiler.options.name === 'server' ? false : 'hidden-source-map';
    });
  }
}

This worked for me. No need to install another plugin.
I'm using nextjs.

All I did was paste the following code in my next.config.js file:

class HiddenSourceMapPlugin {
   apply(compiler) {
     compiler.hooks.environment.tap('HiddenSourceMapPlugin', () => {
       compiler.options.devtool =
         compiler.options.name === 'server' ? false : 'hidden-source-map';
     });
   }
 }

 const nextConfig = {
  webpack(config) {
    config.plugins.push(new HiddenSourceMapPlugin());
    return config;
  },
};

[lobsterkatie]

@disguised-uchiha You don't need to even go through all of that. Check out the change in #4436.

[mAAdhaTTah]

Hey @lobsterkatie thanks for enabling this! QQ: why does this require the Webpack plugin to be enabled to work? We run our builds in Docker, so we can't use the Sentry Webpack plugin to upload at the same time (the asset uploading is a separate step after the build has completed). We're enabling hidden-source-maps ourselves so it's not a huge deal, but would be nice to have one bit less of configuration.

[lobsterkatie]

QQ: why does this require the Webpack plugin to be enabled to work?

It's a good question. You're right that sourcemap creation and sourcemap uploading aren't necessarily tied to one another - there's no technical reason for the requirement. The reason it exists, though, is because we don't want to be changing users' webpack configs any more than we have to. If the sentry webpack plugin is disabled, the reason for us to set the devtool value also disappears, and so we leave it alone.

[mAAdhaTTah]

@lobsterkatie Fair enough, thanks for the explanation!