fix(nextjs): Widen scope for client file upload (#4705)

When nextjs builds an app, compiled versions of each page end up in `.next/static/chunks/pages`. In some circumstances, however, user-generated code ends up outside of `pages/`, and in those cases sourcemaps are broken because the relevant files aren't being uploaded.

This fixes that by optionally widening the scope of the upload, while excluding files known to contain only nextjs and webpack code. (Every build will generate other files which should be excluded, but there's no way to tell in advance what they're going to be called.) In order to reduce the number of irrelevant files being uploaded to Sentry, this behavior is off by default, but can be turned on with a new option `widenClientFileUpload`:

```
const { withSentryConfig } = require("@sentry/nextjs");

const moduleExports = {
  sentry: {
    widenClientFileUpload: true,
  },
};

const sentryWebpackPluginOptions = {
  // ...
};

module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);
```

This change is documented in getsentry/sentry-docs#4827.

Fixes #3896

Author: lobsterkatie

packages/nextjs/src/config/types.ts

@@ -21,6 +21,13 @@ export type NextConfigObject = {
     disableServerWebpackPlugin?: boolean;
     disableClientWebpackPlugin?: boolean;
     hideSourceMaps?: boolean;
+
+    // Upload files from `<distDir>/static/chunks` rather than `<distDir>/static/chunks/pages`. Usually files outside of
+    // `pages/` only contain third-party code, but in cases where they contain user code, restricting the webpack
+    // plugin's upload breaks sourcemaps for those user-code-containing files, because it keeps them from being
+    // uploaded. At the same time, we don't want to widen the scope if we don't have to, because we're guaranteed to end
+    // up uploading too many files, which is why this defaults to `false`.
+    widenClientFileUpload?: boolean;
   };
 } & {
   // other `next.config.js` options

packages/nextjs/src/config/webpack.ts

@@ -294,11 +294,19 @@ export function getWebpackPluginOptions(
         isWebpack5 ? [{ paths: [`${distDir}/server/chunks/`], urlPrefix: `${urlPrefix}/server/chunks` }] : [],
       );
 
-  const clientInclude = [{ paths: [`${distDir}/static/chunks/pages`], urlPrefix: `${urlPrefix}/static/chunks/pages` }];
+  const clientInclude = userNextConfig.sentry?.widenClientFileUpload
+    ? [{ paths: [`${distDir}/static/chunks`], urlPrefix: `${urlPrefix}/static/chunks` }]
+    : [{ paths: [`${distDir}/static/chunks/pages`], urlPrefix: `${urlPrefix}/static/chunks/pages` }];
 
   const defaultPluginOptions = dropUndefinedKeys({
     include: isServer ? serverInclude : clientInclude,
-    ignore: [],
+    ignore:
+      isServer || !userNextConfig.sentry?.widenClientFileUpload
+        ? []
+        : // Widening the upload scope is necessarily going to lead to us uploading files we don't need to (ones which
+          // don't include any user code). In order to lessen that where we can, exclude the internal nextjs files we know
+          // will be there.
+          ['framework-*', 'framework.*', 'main-*', 'polyfills-*', 'webpack-*'],
     url: process.env.SENTRY_URL,
     org: process.env.SENTRY_ORG,
     project: process.env.SENTRY_PROJECT,

packages/nextjs/test/config.test.ts

@@ -598,6 +598,24 @@ describe('Sentry webpack plugin config', () => {
       ]);
     });
 
+    it('has the correct value when building client bundles using `widenClientFileUpload` option', async () => {
+      const userNextConfigWithWidening = { ...userNextConfig, sentry: { widenClientFileUpload: true } };
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig: userNextConfigWithWidening,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: getBuildContext('client', userNextConfigWithWidening),
+      });
+
+      const sentryWebpackPluginInstance = findWebpackPlugin(
+        finalWebpackConfig,
+        'SentryCliPlugin',
+      ) as SentryWebpackPlugin;
+
+      expect(sentryWebpackPluginInstance.options.include).toEqual([
+        { paths: ['.next/static/chunks'], urlPrefix: '~/_next/static/chunks' },
+      ]);
+    });
+
     it('has the correct value when building serverless server bundles', async () => {
       const userNextConfigServerless = { ...userNextConfig };
       userNextConfigServerless.target = 'experimental-serverless-trace';
@@ -657,6 +675,45 @@ describe('Sentry webpack plugin config', () => {
     });
   });
 
+  describe('Sentry webpack plugin `ignore` option', () => {
+    it('has the correct value when building client bundles', async () => {
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: clientBuildContext,
+      });
+
+      const sentryWebpackPluginInstance = findWebpackPlugin(
+        finalWebpackConfig,
+        'SentryCliPlugin',
+      ) as SentryWebpackPlugin;
+
+      expect(sentryWebpackPluginInstance.options.ignore).toEqual([]);
+    });
+
+    it('has the correct value when building client bundles using `widenClientFileUpload` option', async () => {
+      const userNextConfigWithWidening = { ...userNextConfig, sentry: { widenClientFileUpload: true } };
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig: userNextConfigWithWidening,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: getBuildContext('client', userNextConfigWithWidening),
+      });
+
+      const sentryWebpackPluginInstance = findWebpackPlugin(
+        finalWebpackConfig,
+        'SentryCliPlugin',
+      ) as SentryWebpackPlugin;
+
+      expect(sentryWebpackPluginInstance.options.ignore).toEqual([
+        'framework-*',
+        'framework.*',
+        'main-*',
+        'polyfills-*',
+        'webpack-*',
+      ]);
+    });
+  });
+
   describe("Sentry webpack plugin `include` option with basePath filled on next's config", () => {
     const userNextConfigWithBasePath = {
       ...userNextConfig,