diff --git a/packages/nextjs/src/client/index.ts b/packages/nextjs/src/client/index.ts index ece6bf78db6a..650f0607a2a2 100644 --- a/packages/nextjs/src/client/index.ts +++ b/packages/nextjs/src/client/index.ts @@ -77,21 +77,26 @@ function addClientIntegrations(options: BrowserOptions): void { // Turn `//_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, ''); + const { origin: absPathOrigin } = new URL(frame.abs_path as string); + const { origin: filenameOrigin } = new URL(frame.filename as string); + frame.abs_path = frame.abs_path?.replace(absPathOrigin, 'app://').replace(assetPrefixPath, ''); + frame.filename = frame.filename?.replace(filenameOrigin, 'app://').replace(assetPrefixPath, ''); } 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. + // The corresponding sources that Next.js generates have proper brackets so we also need proper brackets in the frame so that source map resolving works. if (frame.filename && frame.filename.startsWith('app:///_next')) { - // 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. - // The corresponding sources that Next.js generates have proper brackets so we also need proper brackets in the frame so that source map resolving works. frame.filename = decodeURI(frame.filename); } + if (frame.abs_path && frame.abs_path.startsWith('app:///_next')) { + frame.abs_path = decodeURI(frame.abs_path); + } if ( - frame.filename && - frame.filename.match( + frame.abs_path && + frame.abs_path.match( /^app:\/\/\/_next\/static\/chunks\/(main-|main-app-|polyfills-|webpack-|framework-|framework\.)[0-9a-f]+\.js$/, ) ) {