refactor to capture stack trace

Author: huozhi

packages/next/src/client/components/globals/intercept-console-error.ts

@@ -1,13 +1,10 @@
 import isError from '../../../lib/is-error'
 import { isNextRouterError } from '../is-next-router-error'
-import { stripStackByFrame } from '../react-dev-overlay/internal/helpers/strip-stack-frame'
+import { captureStackTrace } from '../react-dev-overlay/internal/helpers/capture-stack-trace'
 import { handleClientError } from '../react-dev-overlay/internal/helpers/use-error-handler'
 
 const NEXT_CONSOLE_STACK_FRAME = 'next-console-stack-frame'
 
-const stripBeforeNextConsoleFrame = (stack: string) =>
-  stripStackByFrame(stack, NEXT_CONSOLE_STACK_FRAME, false)
-
 export const originConsoleError = window.console.error
 
 // Patch console.error to collect information about hydration errors
@@ -38,17 +35,15 @@ export function patchConsoleError() {
       if (!isNextRouterError(maybeError)) {
         if (process.env.NODE_ENV !== 'production') {
           // Create an origin stack that pointing to the origin location of the error
-          const captureStackErrorStackTrace = new Error().stack || ''
-          const strippedStack = stripBeforeNextConsoleFrame(
-            captureStackErrorStackTrace
-          )
+          if (!isReplayedError && isError(maybeError)) {
+            captureStackTrace(maybeError)
+          }
 
           handleClientError(
             // replayed errors have their own complex format string that should be used,
             // but if we pass the error directly, `handleClientError` will ignore it
             maybeError,
-            args,
-            isReplayedError ? '' : strippedStack
+            args
           )
         }
 

packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts

@@ -1,11 +1,6 @@
 import React from 'react'
 import isError from '../../../../../lib/is-error'
-import { stripStackByFrame } from './strip-stack-frame'
-
-const REACT_ERROR_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame'
-
-const stripAfterReactBottomFrame = (stack: string) =>
-  stripStackByFrame(stack, REACT_ERROR_STACK_BOTTOM_FRAME, true)
+import { stripReactStackTrace } from './strip-stack-frame'
 
 export function getReactStitchedError<T = unknown>(err: T): Error | T {
   if (typeof (React as any).captureOwnerStack !== 'function') {
@@ -15,7 +10,7 @@ export function getReactStitchedError<T = unknown>(err: T): Error | T {
   const isErrorInstance = isError(err)
   const originStack = isErrorInstance ? err.stack || '' : ''
   const originMessage = isErrorInstance ? err.message : ''
-  let newStack = stripAfterReactBottomFrame(originStack)
+  let newStack = stripReactStackTrace(originStack)
 
   const newError = new Error(originMessage)
   // Copy all enumerable properties, e.g. digest

packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.test.ts

@@ -1,36 +1,31 @@
-import { stripStackByFrame } from './strip-stack-frame'
+import { stripReactStackTrace } from './strip-stack-frame'
 
-describe('stripStackByFrame', () => {
+describe('stripReactStackTrace', () => {
   it('strips stack after frame', () => {
-    const stripStackByFrameBefore = (stack: string) =>
-      stripStackByFrame(stack, 'special-stack-frame', true)
-
     const stack = `Error: test
     at page (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
-    at special-stack-frame (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
+    at react-stack-bottom-frame (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
     at foo (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
     `
 
-    const strippedStack = stripStackByFrameBefore(stack)
+    const strippedStack = stripReactStackTrace(stack)
     expect(strippedStack).toMatchInlineSnapshot(`
-      "Error: test
-          at page (http://localhost:3000/_next/static/chunks/webpack.js:1:1)"
+      "    at foo (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
+          "
     `)
   })
 
-  it('strips stack before frame', () => {
-    const stripStackByFrameAfter = (stack: string) =>
-      stripStackByFrame(stack, 'special-stack-frame', false)
-
+  it('strips nothing if there is no react stack', () => {
     const stack = `Error: test
     at page (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
-    at special-stack-frame (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
     at foo (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
     `
 
-    const strippedStack = stripStackByFrameAfter(stack)
+    const strippedStack = stripReactStackTrace(stack)
     expect(strippedStack).toMatchInlineSnapshot(`
-      "    at foo (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
+      "Error: test
+          at page (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
+          at foo (http://localhost:3000/_next/static/chunks/webpack.js:1:1)
           "
     `)
   })

packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.ts

@@ -1,20 +1,20 @@
-export function stripStackByFrame(
-  stack: string,
-  framePivot: string,
-  stripAfter: boolean
-): string {
-  const framePivotRegex = new RegExp(`(at ${framePivot} )|(${framePivot}\\@)`)
+const REACT_ERROR_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame'
+
+// Create a regex that matches the pivot frame in the stack trace
+// chrome: at react-stack-bottom-frame
+// safari: react-stack-bottom-frame@...
+const createLocationRegex = (pivot: string) =>
+  new RegExp(`(at ${pivot} )|(${pivot}\\@)`)
+
+export function stripReactStackTrace(stack: string): string {
+  const framePivotRegex = createLocationRegex(REACT_ERROR_STACK_BOTTOM_FRAME)
   const stackLines = stack.split('\n')
   const indexOfSplit = stackLines.findIndex((line) =>
     framePivotRegex.test(line)
   )
   const isOriginalReactError = indexOfSplit >= 0 // has the frame pivot
   const strippedStack = isOriginalReactError
-    ? stripAfter
-      ? // Keep the frames before pivot, from 1st line of stack (error.message) to the pivot
-        stackLines.slice(0, indexOfSplit).join('\n')
-      : // Keep the frames after pivot
-        stackLines.slice(indexOfSplit + 1).join('\n')
+    ? stackLines.slice(indexOfSplit + 1).join('\n')
     : stack
 
   return strippedStack

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-error-handler.ts

@@ -16,18 +16,13 @@ const rejectionHandlers: Array<ErrorHandler> = []
 
 export function handleClientError(
   originError: unknown,
-  consoleErrorArgs: any[],
-  originStack?: string
+  consoleErrorArgs: any[]
 ) {
   let error: Error
   if (!originError || !isError(originError)) {
     // If it's not an error, format the args into an error
     const formattedErrorMessage = formatConsoleArgs(consoleErrorArgs)
     error = createUnhandledError(formattedErrorMessage)
-    // When the originStack is provided, strip the stack after the react-bottom-stack-frame
-    if (originStack) {
-      error.stack = originStack
-    }
   } else {
     error = originError
   }