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

@@ -426,6 +426,76 @@ describe('Sentry webpack plugin config', () => {
     });
   });
 
+  describe("Sentry webpack plugin `include` option with basePath filled on next's config", () => {
+    const userNextConfigWithBasePath = {
+      ...userNextConfig,
+      basePath: '/city-park',
+    };
+
+    it('has the correct value when building client bundles', async () => {
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig: userNextConfigWithBasePath,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: getBuildContext('client', userNextConfigWithBasePath),
+      });
+
+      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 userNextConfigServerless = { ...userNextConfigWithBasePath };
+      userNextConfigServerless.target = 'experimental-serverless-trace';
+
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig: userNextConfigServerless,
+        incomingWebpackConfig: serverWebpackConfig,
+        incomingWebpackBuildContext: getBuildContext('server', userNextConfigServerless),
+      });
+
+      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 serverBuildContextWebpack4 = getBuildContext('server', userNextConfigWithBasePath);
+      serverBuildContextWebpack4.webpack.version = '4.15.13';
+
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig: userNextConfigWithBasePath,
+        incomingWebpackConfig: serverWebpackConfig,
+        incomingWebpackBuildContext: serverBuildContextWebpack4,
+      });
+
+      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: userNextConfigWithBasePath,
+        incomingWebpackConfig: serverWebpackConfig,
+        incomingWebpackBuildContext: getBuildContext('server', userNextConfigWithBasePath),
+      });
+
+      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,