vercel · sokra · Dec 6, 2024 · Mar 13, 2025
diff --git a/...ages/next/src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx b/...ages/next/src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx
@@ -10,6 +10,7 @@ import {
   groupCodeFrameLines,
   parseLineNumberFromCodeFrameLine,
 } from './parse-code-frame'
+import { isHiddenMethodName } from '../../../../../../shared/lib/stack-trace-utils'
 
 export type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }
 
@@ -44,10 +45,14 @@ export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
           <span className="code-frame-icon">
             <FileIcon lang={fileExtension} />
           </span>
-          <span data-text>
-            {getFrameSource(stackFrame)} @{' '}
-            <HotlinkedText text={stackFrame.methodName} />
-          </span>
+          {isHiddenMethodName(stackFrame.methodName) ? (
+            <span data-text>{getFrameSource(stackFrame)}</span>
+          ) : (
+            <span data-text>
+              {getFrameSource(stackFrame)} @{' '}
+              <HotlinkedText text={stackFrame.methodName} />
+            </span>
+          )}
           <button
             aria-label="Open in editor"
             data-with-open-in-editor-link-source-file

diff --git a/packages/next/src/server/patch-error-inspect.ts b/packages/next/src/server/patch-error-inspect.ts
@@ -11,6 +11,7 @@ import { parseStack } from '../client/components/react-dev-overlay/server/middle
 import { getOriginalCodeFrame } from '../client/components/react-dev-overlay/server/shared'
 import { workUnitAsyncStorage } from './app-render/work-unit-async-storage.external'
 import { dim } from '../lib/picocolors'
+import { isHiddenMethodName } from '../shared/lib/stack-trace-utils'
 
 type FindSourceMapPayload = (
   sourceURL: string
@@ -83,7 +84,7 @@ function frameToString(frame: StackFrame): string {
     fileLocation = frame.file
   }
 
-  return frame.methodName
+  return frame.methodName && !isHiddenMethodName(frame.methodName)
     ? `    at ${frame.methodName} (${fileLocation}${sourceLocation})`
     : `    at ${fileLocation}${sourceLocation}`
 }

diff --git a/packages/next/src/shared/lib/stack-trace-utils.ts b/packages/next/src/shared/lib/stack-trace-utils.ts
@@ -0,0 +1,6 @@
+// Hide the method name when showing a stack trace in the error overlay or when displaying a stack trace in the console.
+export function isHiddenMethodName(methodName: string) {
+  return /^(?:Object\.|Module\.)?(?:<anonymous>|eval|__TURBOPACK__module__evaluation__)$/.test(
+    methodName
+  )
+}
diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts
@@ -93,8 +93,7 @@ describe('ReactRefreshLogBox app', () => {
          "description": "Error: no",
          "environmentLabel": null,
          "label": "Runtime Error",
-         "source": "index.js (3:7) @ Module.
-       {module evaluation}
+         "source": "index.js (3:7)
        > 3 | throw new Error('no')
            |       ^",
          "stack": [
@@ -110,7 +109,7 @@ describe('ReactRefreshLogBox app', () => {
            "description": "Error: no",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "index.js (3:7) @ eval
+           "source": "index.js (3:7)
        > 3 | throw new Error('no')
            |       ^",
            "stack": [
@@ -130,7 +129,7 @@ describe('ReactRefreshLogBox app', () => {
            "description": "Error: no",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "index.js (3:7) @ eval
+           "source": "index.js (3:7)
        > 3 | throw new Error('no')
            |       ^",
            "stack": [
@@ -1208,7 +1207,7 @@ describe('ReactRefreshLogBox app', () => {
          "description": "Error: This is an error from an anonymous function",
          "environmentLabel": "Server",
          "label": "Runtime Error",
-         "source": "app/page.js (4:13) @ <anonymous>
+         "source": "app/page.js (4:13)
        > 4 |       throw new Error("This is an error from an anonymous function");
            |             ^",
          "stack": [
@@ -1223,7 +1222,7 @@ describe('ReactRefreshLogBox app', () => {
          "description": "Error: This is an error from an anonymous function",
          "environmentLabel": "Server",
          "label": "Runtime Error",
-         "source": "app/page.js (4:13) @ eval
+         "source": "app/page.js (4:13)
        > 4 |       throw new Error("This is an error from an anonymous function");
            |             ^",
          "stack": [
@@ -1527,7 +1526,7 @@ describe('ReactRefreshLogBox app', () => {
            "description": "Error: module error",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "index.js (1:7) @ eval
+           "source": "index.js (1:7)
          > 1 | throw new Error('module error')
              |       ^",
            "stack": [
@@ -1679,8 +1678,7 @@ export default function Home() {
          "description": "Error: utils error",
          "environmentLabel": null,
          "label": "Runtime Error",
-         "source": "app/utils.ts (1:7) @ Module.
-       {module evaluation}
+         "source": "app/utils.ts (1:7)
        > 1 | throw new Error('utils error')
            |       ^",
          "stack": [
@@ -1697,7 +1695,7 @@ export default function Home() {
            "description": "Error: utils error",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "app/utils.ts (1:7) @ eval
+           "source": "app/utils.ts (1:7)
        > 1 | throw new Error('utils error')
            |       ^",
            "stack": [
@@ -1717,7 +1715,7 @@ export default function Home() {
            "description": "Error: utils error",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "app/utils.ts (1:7) @ eval
+           "source": "app/utils.ts (1:7)
        > 1 | throw new Error('utils error')
            |       ^",
            "stack": [

diff --git a/test/development/acceptance-app/error-recovery.test.ts b/test/development/acceptance-app/error-recovery.test.ts
@@ -547,7 +547,7 @@ describe('Error recovery app', () => {
        "description": "Error: no 1",
        "environmentLabel": null,
        "label": "Runtime Error",
-       "source": "index.js (7:11) @ eval
+       "source": "index.js (7:11)
      >  7 |     throw Error('no ' + i)
           |           ^",
        "stack": [

diff --git a/test/development/acceptance/ReactRefreshLogBox.test.ts b/test/development/acceptance/ReactRefreshLogBox.test.ts
@@ -143,7 +143,7 @@ describe('ReactRefreshLogBox', () => {
            "description": "Error: no",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "index.js (3:7) @ eval
+           "source": "index.js (3:7)
          > 3 | throw new Error('no')
              |       ^",
            "stack": [
@@ -189,7 +189,7 @@ describe('ReactRefreshLogBox', () => {
            "description": "Error: no",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "index.js (3:7) @ eval
+           "source": "index.js (3:7)
          > 3 | throw new Error('no')
              |       ^",
            "stack": [
@@ -1249,7 +1249,7 @@ describe('ReactRefreshLogBox', () => {
          "description": "Error: anonymous error!",
          "environmentLabel": null,
          "label": "Runtime Error",
-         "source": "pages/index.js (3:11) @ eval
+         "source": "pages/index.js (3:11)
        > 3 |     throw new Error("anonymous error!");
            |           ^",
          "stack": [

diff --git a/test/development/acceptance/error-recovery.test.ts b/test/development/acceptance/error-recovery.test.ts
@@ -772,7 +772,7 @@ describe('pages/ error recovery', () => {
          "description": "Error: no 1",
          "environmentLabel": null,
          "label": "Runtime Error",
-         "source": "index.js (5:9) @ eval
+         "source": "index.js (5:9)
        > 5 |   throw Error('no ' + i)
            |         ^",
          "stack": [

diff --git a/...ent/app-dir/owner-stack-react-missing-key-prop/owner-stack-react-missing-key-prop.test.ts b/...ent/app-dir/owner-stack-react-missing-key-prop/owner-stack-react-missing-key-prop.test.ts
@@ -24,7 +24,7 @@ describe('app-dir - owner-stack-react-missing-key-prop', () => {
          at Page (app/rsc/page.tsx (6:13))"
         `)
       expect(source).toMatchInlineSnapshot(`
-         "app/rsc/page.tsx (7:9) @ <anonymous>
+         "app/rsc/page.tsx (7:9)
 
             5 |     <div>
             6 |       {list.map((item, index) => (
@@ -41,7 +41,7 @@ describe('app-dir - owner-stack-react-missing-key-prop', () => {
          at Page (app/rsc/page.tsx (6:13))"
         `)
       expect(source).toMatchInlineSnapshot(`
-          "app/rsc/page.tsx (7:9) @ eval
+          "app/rsc/page.tsx (7:9)
 
              5 |     <div>
              6 |       {list.map((item, index) => (
@@ -86,7 +86,7 @@ describe('app-dir - owner-stack-react-missing-key-prop', () => {
          at Page (app/ssr/page.tsx (8:13))"
         `)
       expect(source).toMatchInlineSnapshot(`
-          "app/ssr/page.tsx (9:9) @ eval
+          "app/ssr/page.tsx (9:9)
 
              7 |     <div>
              8 |       {list.map((item, index) => (

diff --git a/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts b/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts
@@ -323,7 +323,7 @@ describe('react-dom/server in React Server environment', () => {
         expect(redbox).toMatchInlineSnapshot(`
           {
             "description": "TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
-            "source": "app/exports/app-code/react-dom-server-node-explicit/page.js (1:1) @ Object.{module evaluation}
+            "source": "app/exports/app-code/react-dom-server-node-explicit/page.js (1:1)
 
           > 1 | import * as ReactDOMServerNode from 'react-dom/server.node'
               | ^
@@ -334,10 +334,9 @@ describe('react-dom/server in React Server environment', () => {
         `)
       } else {
         expect(redbox).toMatchInlineSnapshot(`
-         {
-           "description": "Error: react-dom/server is not supported in React Server Components.",
-           "source": "app/exports/app-code/react-dom-server-node-explicit/page.js (1:1) @ Module.
-         {module evaluation}
+          {
+            "description": "Error: react-dom/server is not supported in React Server Components.",
+            "source": "app/exports/app-code/react-dom-server-node-explicit/page.js (1:1)
 
          > 1 | import * as ReactDOMServerNode from 'react-dom/server.node'
              | ^
@@ -437,7 +436,7 @@ describe('react-dom/server in React Server environment', () => {
         expect(redbox).toMatchInlineSnapshot(`
           {
             "description": "TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
-            "source": "internal-pkg/server.node.js (1:1) @ Object.{module evaluation}
+            "source": "internal-pkg/server.node.js (1:1)
 
           > 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
               | ^
@@ -448,10 +447,9 @@ describe('react-dom/server in React Server environment', () => {
         `)
       } else {
         expect(redbox).toMatchInlineSnapshot(`
-         {
-           "description": "Error: react-dom/server is not supported in React Server Components.",
-           "source": "internal-pkg/server.node.js (1:1) @ Module.
-         {module evaluation}
+          {
+            "description": "Error: react-dom/server is not supported in React Server Components.",
+            "source": "internal-pkg/server.node.js (1:1)
 
          > 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
              | ^
@@ -736,7 +734,7 @@ describe('react-dom/server in React Server environment', () => {
         expect(redbox).toMatchInlineSnapshot(`
           {
             "description": "TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
-            "source": "internal-pkg/server.node.js (1:1) @ Object.{module evaluation}
+            "source": "internal-pkg/server.node.js (1:1)
 
           > 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
               | ^
@@ -749,8 +747,7 @@ describe('react-dom/server in React Server environment', () => {
         expect(redbox).toMatchInlineSnapshot(`
          {
            "description": "Error: react-dom/server is not supported in React Server Components.",
-           "source": "internal-pkg/server.node.js (1:1) @ Module.
-         {module evaluation}
+           "source": "internal-pkg/server.node.js (1:1)
 
          > 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
              | ^
@@ -795,7 +792,7 @@ describe('react-dom/server in React Server environment', () => {
         expect(redbox).toMatchInlineSnapshot(`
           {
             "description": "TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
-            "source": "internal-pkg/server.node.js (1:1) @ Object.{module evaluation}
+            "source": "internal-pkg/server.node.js (1:1)
 
           > 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
               | ^
@@ -808,8 +805,7 @@ describe('react-dom/server in React Server environment', () => {
         expect(redbox).toMatchInlineSnapshot(`
          {
            "description": "Error: react-dom/server is not supported in React Server Components.",
-           "source": "internal-pkg/server.node.js (1:1) @ Module.
-         {module evaluation}
+           "source": "internal-pkg/server.node.js (1:1)
 
          > 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
              | ^

diff --git a/test/development/middleware-errors/index.test.ts b/test/development/middleware-errors/index.test.ts
@@ -172,14 +172,14 @@ describe('middleware - development errors', () => {
       expect(stripAnsi(next.cliOutput)).toContain(
         isTurbopack
           ? '\n ⨯ Error [ReferenceError]: test is not defined' +
-              '\n    at eval (middleware.js:4:8)' +
+              '\n    at middleware.js:4:8' +
               '\n    at <unknown> (middleware.js:4:8)' +
               // TODO(veil): Should be sourcemapped
               '\n    at __TURBOPACK__default__export__ ('
           : '\n ⨯ Error [ReferenceError]: test is not defined' +
               // TODO(veil): Redundant and not clickable
-              '\n    at eval (file://webpack-internal:///(middleware)/./middleware.js)' +
-              '\n    at eval (middleware.js:4:8)' +
+              '\n    at file://webpack-internal:///(middleware)/./middleware.js' +
+              '\n    at middleware.js:4:8' +
               '\n    at default (middleware.js:4:8)' +
               "\n  2 |       import { NextResponse } from 'next/server'"
       )
@@ -205,7 +205,7 @@ describe('middleware - development errors', () => {
            "description": "ReferenceError: test is not defined",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "middleware.js (4:9) @ eval
+           "source": "middleware.js (4:9)
          > 4 |         eval('test')
              |         ^",
            "stack": [
@@ -221,7 +221,7 @@ describe('middleware - development errors', () => {
            "description": "ReferenceError: test is not defined",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "middleware.js (4:9) @ eval
+           "source": "middleware.js (4:9)
          > 4 |         eval('test')
              |         ^",
            "stack": [
@@ -268,12 +268,12 @@ describe('middleware - development errors', () => {
         isTurbopack
           ? '\n ⨯ Error: booooom!' +
               // TODO(veil): Should be sourcemapped
-              '\n    at Module.__TURBOPACK__module__evaluation__ (middleware.js:3:12)'
+              '\n    at middleware.js:3:12'
           : '\n ⨯ Error: booooom!' +
               // TODO: Should be anonymous method without a method name
               '\n    at <unknown> (middleware.js:3)' +
               // TODO: Should be ignore-listed
-              '\n    at eval (middleware.js:3:12)' +
+              '\n    at middleware.js:3:12' +
               '\n    at (middleware)/./middleware.js (.next/server/middleware.js:18:1)' +
               '\n    at __webpack_require__ '
       )
@@ -288,8 +288,7 @@ describe('middleware - development errors', () => {
            "description": "Error: booooom!",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "middleware.js (3:13) @ Module.
-         {module evaluation}
+           "source": "middleware.js (3:13)
          > 3 |       throw new Error('booooom!')
              |             ^",
            "stack": [
@@ -303,7 +302,7 @@ describe('middleware - development errors', () => {
            "description": "Error: booooom!",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "middleware.js (3:13) @ eval
+           "source": "middleware.js (3:13)
          > 3 |       throw new Error('booooom!')
              |             ^",
            "stack": [

diff --git a/test/development/pages-dir/client-navigation/index.test.ts b/test/development/pages-dir/client-navigation/index.test.ts
@@ -1350,7 +1350,7 @@ describe('Client Navigation', () => {
              "description": "Error: An Expected error occurred",
              "environmentLabel": null,
              "label": "Runtime Error",
-             "source": "pages/error-in-the-browser-global-scope.js (2:9) @ eval
+             "source": "pages/error-in-the-browser-global-scope.js (2:9)
            > 2 |   throw new Error('An Expected error occurred')
                |         ^",
              "stack": [

diff --git a/test/development/pages-dir/client-navigation/rendering.test.ts b/test/development/pages-dir/client-navigation/rendering.test.ts
@@ -290,7 +290,7 @@ describe('Client Navigation rendering', () => {
            "description": "ReferenceError: aa is not defined",
            "environmentLabel": null,
            "label": "Runtime Error",
-           "source": "pages/error-in-the-global-scope.js (1:1) @ eval
+           "source": "pages/error-in-the-global-scope.js (1:1)
          > 1 | aa = 10 //eslint-disable-line
              | ^",
            "stack": [