feat(nextjs): Add option to use hidden-source-map as webpack devtool value

packages/nextjs/src/config/types.ts

@@ -20,6 +20,7 @@ export type NextConfigObject = {
   sentry?: {
     disableServerWebpackPlugin?: boolean;
     disableClientWebpackPlugin?: boolean;
+    hideSourceMaps?: boolean;
   };
 } & {
   // other `next.config.js` options

packages/nextjs/src/config/webpack.ts

@@ -77,12 +77,17 @@ export function constructWebpackConfigFunction(
     if (enableWebpackPlugin) {
       // TODO Handle possibility that user is using `SourceMapDevToolPlugin` (see
       // https://webpack.js.org/plugins/source-map-dev-tool-plugin/)
-      // TODO Give user option to use `hidden-source-map` ?
 
-      // Next doesn't let you change this is dev even if you want to - see
+      // Next doesn't let you change `devtool` in dev even if you want to, so don't bother trying - see
       // https://github.com/vercel/next.js/blob/master/errors/improper-devtool.md
       if (!buildContext.dev) {
-        newConfig.devtool = 'source-map';
+        // `hidden-source-map` produces the same sourcemaps as `source-map`, but doesn't include the `sourceMappingURL`
+        // comment at the bottom. For folks who aren't publicly hosting their sourcemaps, this is helpful because then
+        // the browser won't look for them and throw errors into the console when it can't find them. Because this is a
+        // front-end-only problem, and because `sentry-cli` handles sourcemaps more reliably with the comment than
+        // without, the option to use `hidden-source-map` only applies to the client-side build.
+        newConfig.devtool =
+          userNextConfig.sentry?.hideSourceMaps && !buildContext.isServer ? 'hidden-source-map' : 'source-map';
       }
 
       newConfig.plugins = newConfig.plugins || [];

packages/nextjs/test/config.test.ts

@@ -300,6 +300,26 @@ describe('webpack config', () => {
     expect(finalWebpackConfig).toEqual(expect.objectContaining(materializedUserWebpackConfig));
   });
 
+  it('allows for the use of `hidden-source-map` as `devtool` value for client-side builds', async () => {
+    const userNextConfigHiddenSourceMaps = { ...userNextConfig, sentry: { ...userNextConfig.sentry } };
+    userNextConfigHiddenSourceMaps.sentry.hideSourceMaps = true;
+
+    const finalClientWebpackConfig = await materializeFinalWebpackConfig({
+      userNextConfig: userNextConfigHiddenSourceMaps,
+      incomingWebpackConfig: clientWebpackConfig,
+      incomingWebpackBuildContext: clientBuildContext,
+    });
+
+    const finalServerWebpackConfig = await materializeFinalWebpackConfig({
+      userNextConfig: userNextConfigHiddenSourceMaps,
+      incomingWebpackConfig: serverWebpackConfig,
+      incomingWebpackBuildContext: serverBuildContext,
+    });
+
+    expect(finalClientWebpackConfig.devtool).toEqual('hidden-source-map');
+    expect(finalServerWebpackConfig.devtool).toEqual('source-map');
+  });
+
   describe('webpack `entry` property config', () => {
     const serverConfigFilePath = `./${SERVER_SDK_CONFIG_FILE}`;
     const clientConfigFilePath = `./${CLIENT_SDK_CONFIG_FILE}`;