fix(nextjs): handle assetPrefix

Author: tomas-c

packages/nextjs/src/config/types.ts

@@ -30,6 +30,8 @@ export type NextConfigObject = {
   distDir?: string;
   // The root at which the nextjs app will be served (defaults to "/")
   basePath?: string;
+  // The asset prefix (pathname or full URL) if assets will not be stored at the default Next.js location
+  assetPrefix?: string;
   // Config which will be available at runtime
   publicRuntimeConfig?: { [key: string]: unknown };
   // File extensions that count as pages in the `pages/` directory

packages/nextjs/src/config/webpack.ts

@@ -5,6 +5,7 @@ import { default as SentryWebpackPlugin } from '@sentry/webpack-plugin';
 import * as chalk from 'chalk';
 import * as fs from 'fs';
 import * as path from 'path';
+import * as url from 'url';
 
 import {
   BuildContext,
@@ -457,7 +458,14 @@ export function getWebpackPluginOptions(
   const isWebpack5 = webpack.version.startsWith('5');
   const isServerless = userNextConfig.target === 'experimental-serverless-trace';
   const hasSentryProperties = fs.existsSync(path.resolve(projectDir, 'sentry.properties'));
-  const urlPrefix = userNextConfig.basePath ? `~${userNextConfig.basePath}/_next` : '~/_next';
+
+  let assetPrefix = userNextConfig.assetPrefix || userNextConfig.basePath || '';
+  if (assetPrefix) {
+    const assertPrefixUrl = url.parse(assetPrefix);
+    assetPrefix = assertPrefixUrl.pathname || '';
+    assetPrefix = assetPrefix.endsWith('/') ? assetPrefix.slice(0, -1) : assetPrefix;
+  }
+  const urlPrefix = `~${assetPrefix}/_next`;
 
   const serverInclude = isServerless
     ? [{ paths: [`${distDirAbsPath}/serverless/`], urlPrefix: `${urlPrefix}/serverless` }]

packages/nextjs/test/config/webpack/sentryWebpackPlugin.test.ts

@@ -295,6 +295,89 @@ describe('Sentry webpack plugin config', () => {
     });
   });
 
+  describe('Sentry webpack plugin `urlPrefix` option with assetPrefix set', () => {
+    it('has the correct value given a path', async () => {
+      const exportedNextConfigWithAssetPrefix = {
+        ...exportedNextConfig,
+        assetPrefix: '/asset-prefix',
+      };
+      const buildContext = getBuildContext('client', exportedNextConfigWithAssetPrefix);
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        exportedNextConfig: exportedNextConfigWithAssetPrefix,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: buildContext,
+      });
+
+      const sentryWebpackPluginInstance = findWebpackPlugin(
+        finalWebpackConfig,
+        'SentryCliPlugin',
+      ) as SentryWebpackPlugin;
+
+      expect(sentryWebpackPluginInstance.options.urlPrefix).toEqual('~/asset-prefix/_next');
+    });
+
+    it('has the correct value given a path with a leading slash', async () => {
+      const exportedNextConfigWithAssetPrefix = {
+        ...exportedNextConfig,
+        assetPrefix: '/asset-prefix/',
+      };
+      const buildContext = getBuildContext('client', exportedNextConfigWithAssetPrefix);
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        exportedNextConfig: exportedNextConfigWithAssetPrefix,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: buildContext,
+      });
+
+      const sentryWebpackPluginInstance = findWebpackPlugin(
+        finalWebpackConfig,
+        'SentryCliPlugin',
+      ) as SentryWebpackPlugin;
+
+      expect(sentryWebpackPluginInstance.options.urlPrefix).toEqual('~/asset-prefix/_next');
+    });
+
+    it('has the correct value when given a full URL', async () => {
+      const exportedNextConfigWithAssetPrefix = {
+        ...exportedNextConfig,
+        assetPrefix: 'https://cdn.mydomain.com/asset-prefix',
+      };
+      const buildContext = getBuildContext('client', exportedNextConfigWithAssetPrefix);
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        exportedNextConfig: exportedNextConfigWithAssetPrefix,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: buildContext,
+      });
+
+      const sentryWebpackPluginInstance = findWebpackPlugin(
+        finalWebpackConfig,
+        'SentryCliPlugin',
+      ) as SentryWebpackPlugin;
+
+      expect(sentryWebpackPluginInstance.options.urlPrefix).toEqual('~/asset-prefix/_next');
+    });
+
+    it('takes priority over basePath ', async () => {
+      const exportedNextConfigWithAssetPrefix = {
+        ...exportedNextConfig,
+        assetPrefix: '/asset-prefix',
+        basePath: '/base-path',
+      };
+      const buildContext = getBuildContext('client', exportedNextConfigWithAssetPrefix);
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        exportedNextConfig: exportedNextConfigWithAssetPrefix,
+        incomingWebpackConfig: clientWebpackConfig,
+        incomingWebpackBuildContext: buildContext,
+      });
+
+      const sentryWebpackPluginInstance = findWebpackPlugin(
+        finalWebpackConfig,
+        'SentryCliPlugin',
+      ) as SentryWebpackPlugin;
+
+      expect(sentryWebpackPluginInstance.options.urlPrefix).toEqual('~/asset-prefix/_next');
+    });
+  });
+
   describe('SentryWebpackPlugin enablement', () => {
     let processEnvBackup: typeof process.env;