handle pages router ignored frames

vercel · Nov 27, 2024 · 433ba0e · 433ba0e
1 parent f43b888
commit 433ba0e
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 10 deletions.
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
@@ -1,7 +1,6 @@
 import type { IncomingMessage, ServerResponse } from 'http'
 import {
   badRequest,
-  findSourcePackage,
   getOriginalCodeFrame,
   internalServerError,
   json,
@@ -38,15 +37,27 @@ export async function batchedTraceSource(
   if (!file) return
 
   const sourceFrame = await project.traceSource(frame)
-  if (!sourceFrame) return
+  if (!sourceFrame) {
+    return {
+      frame: {
+        file,
+        lineNumber: frame.line ?? 0,
+        column: frame.column ?? 0,
+        methodName: frame.methodName ?? '<unknown>',
+        ignored: shouldIgnorePath(frame.file),
+        arguments: [],
+      },
+      source: null,
+    }
+  }
 
   let source = null
   // Don't look up source for node_modules or internals. These can often be large bundled files.
   const ignored =
     shouldIgnorePath(sourceFrame.file) ||
     // isInternal means resource starts with turbopack://[turbopack]
     !!sourceFrame.isInternal
-  if (sourceFrame.file && !ignored) {
+  if (sourceFrame && sourceFrame.file && !ignored) {
     let sourcePromise = currentSourcesByFile.get(sourceFrame.file)
     if (!sourcePromise) {
       sourcePromise = project.getSourceForAsset(sourceFrame.file)
@@ -103,15 +114,12 @@ export async function createOriginalStackFrame(
 ): Promise<OriginalStackFrameResponse | null> {
   const traced = await batchedTraceSource(project, frame)
   if (!traced) {
-    const sourcePackage = findSourcePackage(frame)
-    if (sourcePackage) return { sourcePackage }
     return null
   }
 
   return {
     originalStackFrame: traced.frame,
     originalCodeFrame: getOriginalCodeFrame(traced.frame, traced.source),
-    sourcePackage: findSourcePackage(traced.frame),
   }
 }
 

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
@@ -7,7 +7,6 @@ import { getSourceMapFromFile } from '../internal/helpers/get-source-map-from-fi
 import { launchEditor } from '../internal/helpers/launchEditor'
 import {
   badRequest,
-  findSourcePackage,
   getOriginalCodeFrame,
   internalServerError,
   json,
@@ -246,7 +245,6 @@ export async function createOriginalStackFrame({
   return {
     originalStackFrame: traced,
     originalCodeFrame: getOriginalCodeFrame(traced, sourceContent),
-    sourcePackage: findSourcePackage(traced),
   }
 }
 
@@ -413,8 +411,21 @@ export function getOverlayMiddleware(options: {
         return internalServerError(res)
       }
 
+      // This stack frame is used for the one that couldn't locate the source or source mapped frame
+      const defaultStackFrame: IgnorableStackFrame = {
+        file: frame.file,
+        lineNumber: frame.lineNumber,
+        column: frame.column ?? 1,
+        methodName: frame.methodName,
+        ignored: shouldIgnorePath(frame.file),
+        arguments: [],
+      }
       if (!source) {
-        return noContent(res)
+        // return original stack frame with no source map
+        return json(res, {
+          originalStackFrame: defaultStackFrame,
+          originalCodeFrame: null,
+        })
       }
 
       try {
@@ -425,7 +436,10 @@ export function getOverlayMiddleware(options: {
         })
 
         if (!originalStackFrameResponse) {
-          return noContent(res)
+          return json(res, {
+            originalStackFrame: defaultStackFrame,
+            originalCodeFrame: null,
+          })
         }
 
         return json(res, originalStackFrameResponse)

diff --git a/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts b/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts
@@ -137,4 +137,86 @@ describe('error-ignored-frames', () => {
       `)
     }
   })
+
+  it('should be able to collapse pages router ignored frames', async () => {
+    const browser = await next.browser('/pages')
+    await assertHasRedbox(browser)
+
+    const defaultStack = await getStackFramesContent(browser)
+    expect(defaultStack).toMatchInlineSnapshot(`""`)
+
+    await toggleCollapseCallStackFrames(browser)
+
+    const expendedStack = await getStackFramesContent(browser)
+    if (process.env.TURBOPACK) {
+      expect(expendedStack).toMatchInlineSnapshot(`
+        "at react-stack-bottom-frame ()
+        at renderWithHooks ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at finishFunctionComponent ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderNode ()
+        at renderChildrenArray ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderNode ()
+        at renderChildrenArray ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at finishFunctionComponent ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()"
+      `)
+    } else {
+      expect(expendedStack).toMatchInlineSnapshot(`
+        "at react-stack-bottom-frame ()
+        at renderWithHooks ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at finishFunctionComponent ()
+        at renderElement ()
+        at retryNode ()
+        at renderNodeDestructive ()
+        at renderNode ()
+        at renderChildrenArray ()"
+      `)
+    }
+  })
 })
diff --git a/test/development/app-dir/error-overlay/error-ignored-frames/pages/pages.tsx b/test/development/app-dir/error-overlay/error-ignored-frames/pages/pages.tsx
@@ -0,0 +1,4 @@
+export default function Page() {
+  throw new Error('boom')
+  return <p>hello world</p>
+}