feat(nextjs): Do not strip origin information from different origin stack frames

Author: Luca Forstner

packages/nextjs/src/client/clientNormalizationIntegration.ts

@@ -1,16 +1,24 @@
-import { rewriteFramesIntegration } from '@sentry/browser';
+import { WINDOW, rewriteFramesIntegration } from '@sentry/browser';
 import { defineIntegration } from '@sentry/core';
 
+const windowOrigin = WINDOW.location.origin;
+
 export const nextjsClientStackFrameNormalizationIntegration = defineIntegration(
-  ({ assetPrefixPath }: { assetPrefixPath: string }) => {
+  ({ assetPrefix, basePath }: { assetPrefix?: string; basePath?: string }) => {
     const rewriteFramesInstance = rewriteFramesIntegration({
       // Turn `<origin>/<path>/_next/static/...` into `app:///_next/static/...`
       iteratee: frame => {
-        try {
-          const { origin } = new URL(frame.filename as string);
-          frame.filename = frame.filename?.replace(origin, 'app://').replace(assetPrefixPath, '');
-        } catch (err) {
-          // Filename wasn't a properly formed URL, so there's nothing we can do
+        if (assetPrefix) {
+          frame.filename = frame.filename?.replace(assetPrefix, 'app://');
+        } else if (basePath) {
+          try {
+            const { origin: frameOrigin } = new URL(frame.filename as string);
+            if (frameOrigin === windowOrigin) {
+              frame.filename = frame.filename?.replace(frameOrigin, 'app://').replace(basePath, '');
+            }
+          } catch (err) {
+            // Filename wasn't a properly formed URL, so there's nothing we can do
+          }
         }
 
         // We need to URI-decode the filename because Next.js has wildcard routes like "/users/[id].js" which show up as "/users/%5id%5.js" in Error stacktraces.

packages/nextjs/src/client/index.ts

@@ -16,7 +16,8 @@ export { captureUnderscoreErrorException } from '../common/pages-router-instrume
 export { browserTracingIntegration } from './browserTracingIntegration';
 
 const globalWithInjectedValues = GLOBAL_OBJ as typeof GLOBAL_OBJ & {
-  _sentryRewriteFramesAssetPrefixPath: string;
+  _sentryAssetPrefix?: string;
+  _sentryBasePath?: string;
 };
 
 // Treeshakable guard to remove all code related to tracing
@@ -67,13 +68,11 @@ function getDefaultIntegrations(options: BrowserOptions): Integration[] {
     customDefaultIntegrations.push(browserTracingIntegration());
   }
 
-  // This value is injected at build time, based on the output directory specified in the build config. Though a default
+  // These values are injected at build time, based on the output directory specified in the build config. Though a default
   // is set there, we set it here as well, just in case something has gone wrong with the injection.
-  const assetPrefixPath =
-    process.env._sentryRewriteFramesAssetPrefixPath ||
-    globalWithInjectedValues._sentryRewriteFramesAssetPrefixPath ||
-    '';
-  customDefaultIntegrations.push(nextjsClientStackFrameNormalizationIntegration({ assetPrefixPath }));
+  const assetPrefix = process.env._sentryAssetPrefix || globalWithInjectedValues._sentryAssetPrefix;
+  const basePath = process.env._sentryBasePath || globalWithInjectedValues._sentryBasePath;
+  customDefaultIntegrations.push(nextjsClientStackFrameNormalizationIntegration({ assetPrefix, basePath }));
 
   return customDefaultIntegrations;
 }

packages/nextjs/src/config/webpack.ts

@@ -595,8 +595,6 @@ function addValueInjectionLoader(
   buildContext: BuildContext,
   releaseName: string | undefined,
 ): void {
-  const assetPrefix = userNextConfig.assetPrefix || userNextConfig.basePath || '';
-
   const isomorphicValues = {
     // `rewritesTunnel` set by the user in Next.js config
     _sentryRewritesTunnelPath:
@@ -619,11 +617,7 @@ function addValueInjectionLoader(
 
   const clientValues = {
     ...isomorphicValues,
-    // Get the path part of `assetPrefix`, minus any trailing slash. (We use a placeholder for the origin if
-    // `assetPrefix` doesn't include one. Since we only care about the path, it doesn't matter what it is.)
-    _sentryRewriteFramesAssetPrefixPath: assetPrefix
-      ? new URL(assetPrefix, 'http://dogs.are.great').pathname.replace(/\/$/, '')
-      : '',
+    _sentryAssetPrefix: userNextConfig.assetPrefix,
   };
 
   if (buildContext.isServer) {

packages/nextjs/src/config/withSentryConfig.ts

@@ -250,7 +250,6 @@ function setUpTunnelRewriteRules(userNextConfig: NextConfigObject, tunnelPath: s
 
 // TODO: For Turbopack we need to pass the release name here and pick it up in the SDK
 function setUpBuildTimeVariables(userNextConfig: NextConfigObject, userSentryOptions: SentryBuildOptions): void {
-  const assetPrefix = userNextConfig.assetPrefix || userNextConfig.basePath || '';
   const basePath = userNextConfig.basePath ?? '';
   const rewritesTunnelPath =
     userSentryOptions.tunnelRoute !== undefined && userNextConfig.output !== 'export'
@@ -261,11 +260,6 @@ function setUpBuildTimeVariables(userNextConfig: NextConfigObject, userSentryOpt
     // Make sure that if we have a windows path, the backslashes are interpreted as such (rather than as escape
     // characters)
     _sentryRewriteFramesDistDir: userNextConfig.distDir?.replace(/\\/g, '\\\\') || '.next',
-    // Get the path part of `assetPrefix`, minus any trailing slash. (We use a placeholder for the origin if
-    // `assetPrefix` doesn't include one. Since we only care about the path, it doesn't matter what it is.)
-    _sentryRewriteFramesAssetPrefixPath: assetPrefix
-      ? new URL(assetPrefix, 'http://dogs.are.great').pathname.replace(/\/$/, '')
-      : '',
   };
 
   if (rewritesTunnelPath) {
@@ -276,6 +270,10 @@ function setUpBuildTimeVariables(userNextConfig: NextConfigObject, userSentryOpt
     buildTimeVariables._sentryBasePath = basePath;
   }
 
+  if (userNextConfig.assetPrefix) {
+    buildTimeVariables._sentryAssetPrefix = userNextConfig.assetPrefix;
+  }
+
   if (typeof userNextConfig.env === 'object') {
     userNextConfig.env = { ...buildTimeVariables, ...userNextConfig.env };
   } else if (userNextConfig.env === undefined) {