use definePlugin to fix rewriteFrames base path

Author: lobsterkatie

packages/nextjs/package.json

@@ -35,7 +35,8 @@
   },
   "peerDependencies": {
     "next": "^10.0.8 || ^11.0",
-    "react": "15.x || 16.x || 17.x"
+    "react": "15.x || 16.x || 17.x",
+    "webpack": ">= 4.0.0"
   },
   "scripts": {
     "build": "run-p build:esm build:es5",

packages/nextjs/src/config/types.ts

@@ -14,6 +14,8 @@ export type NextConfigObject = {
   webpack?: WebpackConfigFunction;
   // whether to build serverless functions for all pages, not just API routes
   target?: 'server' | 'experimental-serverless-trace';
+  // the output directory for the built app (defaults to ".next")
+  distDir?: string;
   sentry?: {
     disableServerWebpackPlugin?: boolean;
     disableClientWebpackPlugin?: boolean;

packages/nextjs/src/config/webpack.ts

@@ -3,6 +3,7 @@ import { dropUndefinedKeys, logger } from '@sentry/utils';
 import * as SentryWebpackPlugin from '@sentry/webpack-plugin';
 import * as fs from 'fs';
 import * as path from 'path';
+import { DefinePlugin } from 'webpack';
 
 import {
   BuildContext,
@@ -78,6 +79,21 @@ export function constructWebpackConfigFunction(
       };
     }
 
+    // Support non-default output directories by making the output path (easy to get here at build-time) available to
+    // the SDK's default `RewriteFrames` instance (which needs it at runtime).
+    const distDir = buildContext.config.distDir;
+    newConfig.plugins = newConfig.plugins || [];
+
+    const definePluginInstance = newConfig.plugins.find(
+      plugin => plugin.constructor.name === 'DefinePlugin',
+    ) as DefinePlugin;
+
+    if (definePluginInstance) {
+      definePluginInstance.definitions['__rewriteFramesDistDir__'] = distDir;
+    } else {
+      newConfig.plugins.push(new DefinePlugin({ __rewriteFramesDistDir__: distDir }));
+    }
+
     // Enable the Sentry plugin (which uploads source maps to Sentry when not in dev) by default
     const enableWebpackPlugin = buildContext.isServer
       ? !userNextConfig.sentry?.disableServerWebpackPlugin
@@ -94,7 +110,6 @@ export function constructWebpackConfigFunction(
         newConfig.devtool = 'source-map';
       }
 
-      newConfig.plugins = newConfig.plugins || [];
       newConfig.plugins.push(
         // @ts-ignore Our types for the plugin are messed up somehow - TS wants this to be `SentryWebpackPlugin.default`,
         // but that's not actually a thing

packages/nextjs/src/index.server.ts

@@ -29,7 +29,6 @@ export function init(options: NextjsOptions): void {
   const metadataBuilder = new MetadataBuilder(options, ['nextjs', 'node']);
   metadataBuilder.addSdkMetadata();
   options.environment = options.environment || process.env.NODE_ENV;
-  // TODO capture project root and store in an env var for RewriteFrames?
   addServerIntegrations(options);
   // Right now we only capture frontend sessions for Next.js
   options.autoSessionTracking = false;
@@ -47,7 +46,8 @@ function sdkAlreadyInitialized(): boolean {
   return !!hub.getClient();
 }
 
-const SOURCEMAP_FILENAME_REGEX = /^.*\/\.next\//;
+// webpack will replace this placeholder at build time
+const SOURCEMAP_FILENAME_REGEX = new RegExp('__rewriteFramesDistDir__');
 
 const defaultRewriteFramesIntegration = new RewriteFrames({
   iteratee: frame => {