fix(nextjs): Include nextjs config's basePath on urlPrefix

Author: jemmyphan

packages/nextjs/src/config/webpack.ts

@@ -247,14 +247,15 @@ function getWebpackPluginOptions(
   const isWebpack5 = webpack.version.startsWith('5');
   const isServerless = nextConfig.target === 'experimental-serverless-trace';
   const hasSentryProperties = fs.existsSync(path.resolve(projectDir, 'sentry.properties'));
+  const urlPrefix = nextConfig.basePath ? `~${nextConfig.basePath}/_next` : '~/_next';
 
   const serverInclude = isServerless
-    ? [{ paths: ['.next/serverless/'], urlPrefix: '~/_next/serverless' }]
-    : [{ paths: ['.next/server/pages/'], urlPrefix: '~/_next/server/pages' }].concat(
-        isWebpack5 ? [{ paths: ['.next/server/chunks/'], urlPrefix: '~/_next/server/chunks' }] : [],
+    ? [{ paths: ['.next/serverless/'], urlPrefix: `${urlPrefix}/serverless` }]
+    : [{ paths: ['.next/server/pages/'], urlPrefix: `${urlPrefix}/server/pages` }].concat(
+        isWebpack5 ? [{ paths: ['.next/server/chunks/'], urlPrefix: `${urlPrefix}/server/chunks` }] : [],
       );
 
-  const clientInclude = [{ paths: ['.next/static/chunks/pages'], urlPrefix: '~/_next/static/chunks/pages' }];
+  const clientInclude = [{ paths: ['.next/static/chunks/pages'], urlPrefix: `${urlPrefix}/static/chunks/pages` }];
 
   const defaultPluginOptions = dropUndefinedKeys({
     include: isServer ? serverInclude : clientInclude,
@@ -265,7 +266,7 @@ function getWebpackPluginOptions(
     authToken: process.env.SENTRY_AUTH_TOKEN,
     configFile: hasSentryProperties ? 'sentry.properties' : undefined,
     stripPrefix: ['webpack://_N_E/'],
-    urlPrefix: `~/_next`,
+    urlPrefix,
     entries: shouldAddSentryToEntryPoint,
     release: getSentryRelease(buildId),
     dryRun: isDev,

packages/nextjs/test/config.test.ts

@@ -157,8 +157,17 @@ async function materializeFinalWebpackConfig(options: {
     userSentryWebpackPluginConfig,
   );
 
+  // update incomingWebpackBuildContext's config
+  const updatedIncomingWebpackBuildContext = {
+    ...incomingWebpackBuildContext,
+    config: {
+      ...incomingWebpackBuildContext.config,
+      ...userNextConfig,
+    },
+  };
+
   // call it to get concrete values for comparison
-  const finalWebpackConfigValue = webpackConfigFunction(incomingWebpackConfig, incomingWebpackBuildContext);
+  const finalWebpackConfigValue = webpackConfigFunction(incomingWebpackConfig, updatedIncomingWebpackBuildContext);
   const webpackEntryProperty = finalWebpackConfigValue.entry as EntryPropertyFunction;
   finalWebpackConfigValue.entry = await webpackEntryProperty();
 
@@ -420,6 +429,70 @@ describe('Sentry webpack plugin config', () => {
     });
   });
 
+  describe("Sentry webpack plugin `include` option with basePath filled on next's config", () => {
+    const withBaseUrlNextConfig = {
+      ...userNextConfig,
+      basePath: '/city-park',
+    };
+
+    it('has the correct value when building client bundles', async () => {
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig: withBaseUrlNextConfig,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: clientBuildContext,
+      });
+
+      const sentryWebpackPlugin = finalWebpackConfig.plugins?.[0] as SentryWebpackPluginType;
+
+      expect(sentryWebpackPlugin.options?.include).toEqual([
+        { paths: ['.next/static/chunks/pages'], urlPrefix: '~/city-park/_next/static/chunks/pages' },
+      ]);
+    });
+
+    it('has the correct value when building serverless server bundles', async () => {
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig: withBaseUrlNextConfig,
+        incomingWebpackConfig: serverWebpackConfig,
+        incomingWebpackBuildContext: { ...serverBuildContext, config: { target: 'experimental-serverless-trace' } },
+      });
+
+      const sentryWebpackPlugin = finalWebpackConfig.plugins?.[0] as SentryWebpackPluginType;
+
+      expect(sentryWebpackPlugin.options?.include).toEqual([
+        { paths: ['.next/serverless/'], urlPrefix: '~/city-park/_next/serverless' },
+      ]);
+    });
+
+    it('has the correct value when building serverful server bundles using webpack 4', async () => {
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig: withBaseUrlNextConfig,
+        incomingWebpackConfig: serverWebpackConfig,
+        incomingWebpackBuildContext: { ...serverBuildContext, webpack: { version: '4.15.13' } },
+      });
+
+      const sentryWebpackPlugin = finalWebpackConfig.plugins?.[0] as SentryWebpackPluginType;
+
+      expect(sentryWebpackPlugin.options?.include).toEqual([
+        { paths: ['.next/server/pages/'], urlPrefix: '~/city-park/_next/server/pages' },
+      ]);
+    });
+
+    it('has the correct value when building serverful server bundles using webpack 5', async () => {
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig: withBaseUrlNextConfig,
+        incomingWebpackConfig: serverWebpackConfig,
+        incomingWebpackBuildContext: serverBuildContext,
+      });
+
+      const sentryWebpackPlugin = finalWebpackConfig.plugins?.[0] as SentryWebpackPluginType;
+
+      expect(sentryWebpackPlugin.options?.include).toEqual([
+        { paths: ['.next/server/pages/'], urlPrefix: '~/city-park/_next/server/pages' },
+        { paths: ['.next/server/chunks/'], urlPrefix: '~/city-park/_next/server/chunks' },
+      ]);
+    });
+  });
+
   it('allows SentryWebpackPlugin to be turned off for client code (independent of server code)', () => {
     const clientFinalNextConfig = materializeFinalNextConfig({
       ...userNextConfig,

packages/nextjs/test/integration/next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.