diff --git a/packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts b/packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts index d371b78769bc5..ef47e8d67f70e 100644 --- a/packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts +++ b/packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts @@ -84,7 +84,12 @@ export async function batchedTraceSource( file: sourceFrame.file, lineNumber: sourceFrame.line ?? 0, column: sourceFrame.column ?? 0, - methodName: sourceFrame.methodName ?? frame.methodName ?? '', + methodName: + // We ignore the sourcemapped name since it won't be the correct name. + // The callsite will point to the column of the variable name instead of the + // name of the enclosing function. + // TODO(NDX-531): Spy on prepareStackTrace to get the enclosing line number for method name mapping. + frame.methodName ?? '', ignored, arguments: [], } @@ -226,13 +231,13 @@ async function nativeTraceSource( const originalStackFrame: IgnorableStackFrame = { methodName: - originalPosition.name || - // default is not a valid identifier in JS so webpack uses a custom variable when it's an unnamed default export - // Resolve it back to `default` for the method name if the source position didn't have the method. + // We ignore the sourcemapped name since it won't be the correct name. + // The callsite will point to the column of the variable name instead of the + // name of the enclosing function. + // TODO(NDX-531): Spy on prepareStackTrace to get the enclosing line number for method name mapping. frame.methodName ?.replace('__WEBPACK_DEFAULT_EXPORT__', 'default') - ?.replace('__webpack_exports__.', '') || - '', + ?.replace('__webpack_exports__.', '') || '', column: (originalPosition.column ?? 0) + 1, file: originalPosition.source?.startsWith('file://') ? relativeToCwd(originalPosition.source) diff --git a/packages/next/src/client/components/react-dev-overlay/server/middleware-webpack.ts b/packages/next/src/client/components/react-dev-overlay/server/middleware-webpack.ts index 41b114c6d4bf1..51cfd7c1aa1ec 100644 --- a/packages/next/src/client/components/react-dev-overlay/server/middleware-webpack.ts +++ b/packages/next/src/client/components/react-dev-overlay/server/middleware-webpack.ts @@ -232,7 +232,10 @@ export async function createOriginalStackFrame({ lineNumber: sourcePosition.line, column: (sourcePosition.column ?? 0) + 1, methodName: - sourcePosition.name || + // We ignore the sourcemapped name since it won't be the correct name. + // The callsite will point to the column of the variable name instead of the + // name of the enclosing function. + // TODO(NDX-531): Spy on prepareStackTrace to get the enclosing line number for method name mapping. // default is not a valid identifier in JS so webpack uses a custom variable when it's an unnamed default export // Resolve it back to `default` for the method name if the source position didn't have the method. frame.methodName diff --git a/packages/next/src/server/patch-error-inspect.ts b/packages/next/src/server/patch-error-inspect.ts index 876ca1d0957e5..784530d1e2872 100644 --- a/packages/next/src/server/patch-error-inspect.ts +++ b/packages/next/src/server/patch-error-inspect.ts @@ -255,13 +255,13 @@ function getSourcemappedFrameIfPossible( } const originalFrame: IgnoreableStackFrame = { - methodName: - sourcePosition.name || - // default is not a valid identifier in JS so webpack uses a custom variable when it's an unnamed default export - // Resolve it back to `default` for the method name if the source position didn't have the method. - frame.methodName - ?.replace('__WEBPACK_DEFAULT_EXPORT__', 'default') - ?.replace('__webpack_exports__.', ''), + // We ignore the sourcemapped name since it won't be the correct name. + // The callsite will point to the column of the variable name instead of the + // name of the enclosing function. + // TODO(NDX-531): Spy on prepareStackTrace to get the enclosing line number for method name mapping. + methodName: frame.methodName + ?.replace('__WEBPACK_DEFAULT_EXPORT__', 'default') + ?.replace('__webpack_exports__.', ''), column: sourcePosition.column, file: sourcePosition.source, lineNumber: sourcePosition.line, diff --git a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap index 21f0656c91c63..32c7f29e6d528 100644 --- a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap +++ b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap @@ -57,7 +57,7 @@ exports[`ReactRefreshLogBox default module init error not shown 1`] = ` exports[`ReactRefreshLogBox default should show anonymous frames in stack trace 1`] = ` "Array.map (0:0) -map +Page pages/index.js (2:13)" `; diff --git a/test/development/acceptance/__snapshots__/error-recovery.test.ts.snap b/test/development/acceptance/__snapshots__/error-recovery.test.ts.snap index ec3621003e019..729a695b8ed29 100644 --- a/test/development/acceptance/__snapshots__/error-recovery.test.ts.snap +++ b/test/development/acceptance/__snapshots__/error-recovery.test.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ReactRefreshLogBox default syntax > runtime error 1`] = ` -"index.js (5:9) @ Error +"index.js (5:9) @ eval 3 | setInterval(() => { 4 | i++ diff --git a/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts b/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts index a8b794ff74897..d4f3395677ec5 100644 --- a/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts +++ b/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts @@ -39,6 +39,7 @@ describe('app-dir - capture-console-error-owner-stack', () => { const result = await getRedboxResult(browser) + // TODO(veil): Inconsistent cursor position for the "Page" frame if (process.env.TURBOPACK) { expect(result).toMatchInlineSnapshot(` { @@ -65,11 +66,11 @@ describe('app-dir - capture-console-error-owner-stack', () => { { "callStacks": "button (0:0) - button + Page app/browser/event/page.js (5:6)", "count": 1, "description": "trigger an console ", - "source": "app/browser/event/page.js (7:17) @ error + "source": "app/browser/event/page.js (7:17) @ onClick 5 |