[devtools] Remove unused componentStackFrames field (#82395)

Author: eps1lon

packages/next/src/client/app-next-dev.ts

@@ -4,10 +4,7 @@ import './app-webpack'
 
 import { renderAppDevOverlay } from 'next/dist/compiled/next-devtools'
 import { appBootstrap } from './app-bootstrap'
-import {
-  getComponentStack,
-  getOwnerStack,
-} from '../next-devtools/userspace/app/errors/stitched-error'
+import { getOwnerStack } from '../next-devtools/userspace/app/errors/stitched-error'
 import { isRecoverableError } from './react-client-callbacks/on-recoverable-error'
 
 // eslint-disable-next-line @next/internal/typechecked-require
@@ -18,6 +15,6 @@ appBootstrap(() => {
   try {
     hydrate(instrumentationHooks)
   } finally {
-    renderAppDevOverlay(getComponentStack, getOwnerStack, isRecoverableError)
+    renderAppDevOverlay(getOwnerStack, isRecoverableError)
   }
 })

packages/next/src/client/app-next-turbopack.ts

@@ -13,11 +13,11 @@ appBootstrap(() => {
     hydrate(instrumentationHooks)
   } finally {
     if (process.env.NODE_ENV !== 'production') {
-      const { getComponentStack, getOwnerStack } =
+      const { getOwnerStack } =
         require('../next-devtools/userspace/app/errors/stitched-error') as typeof import('../next-devtools/userspace/app/errors/stitched-error')
       const { renderAppDevOverlay } =
         require('next/dist/compiled/next-devtools') as typeof import('next/dist/compiled/next-devtools')
-      renderAppDevOverlay(getComponentStack, getOwnerStack, isRecoverableError)
+      renderAppDevOverlay(getOwnerStack, isRecoverableError)
     }
   }
 })

packages/next/src/client/react-client-callbacks/error-boundary-callbacks.ts

@@ -54,7 +54,7 @@ export function onCaughtError(
     // We don't consider errors caught unless they're caught by an explicit error
     // boundary. The built-in ones are considered implicit.
     // This mimics how the same app would behave without Next.js.
-    return onUncaughtError(thrownValue, errorInfo)
+    return onUncaughtError(thrownValue)
   }
 
   // Skip certain custom errors which are not expected to be reported on client
@@ -84,7 +84,7 @@ export function onCaughtError(
       : `The above error occurred in one of your components.`
 
     const errorLocation = `${componentErrorMessage} ${errorBoundaryMessage}`
-    const error = devToolErrorMod.decorateDevError(thrownValue, errorInfo)
+    const error = devToolErrorMod.decorateDevError(thrownValue)
 
     // Log and report the error with location but without modifying the error stack
     devToolErrorMod.originConsoleError('%o\n\n%s', thrownValue, errorLocation)
@@ -95,15 +95,12 @@ export function onCaughtError(
   }
 }
 
-export function onUncaughtError(
-  thrownValue: unknown,
-  errorInfo: React.ErrorInfo
-) {
+export function onUncaughtError(thrownValue: unknown) {
   // Skip certain custom errors which are not expected to be reported on client
   if (isBailoutToCSRError(thrownValue) || isNextRouterError(thrownValue)) return
 
   if (process.env.NODE_ENV !== 'production') {
-    const error = devToolErrorMod.decorateDevError(thrownValue, errorInfo)
+    const error = devToolErrorMod.decorateDevError(thrownValue)
 
     // TODO: Add an adendum to the overlay telling people about custom error boundaries.
     reportGlobalError(error)

packages/next/src/client/react-client-callbacks/on-recoverable-error.ts

@@ -12,8 +12,7 @@ export function isRecoverableError(error: Error): boolean {
 }
 
 export const onRecoverableError: HydrationOptions['onRecoverableError'] = (
-  error,
-  errorInfo
+  error
 ) => {
   // x-ref: https://github.com/facebook/react/pull/28736
   let cause = isError(error) && 'cause' in error ? error.cause : error
@@ -23,7 +22,7 @@ export const onRecoverableError: HydrationOptions['onRecoverableError'] = (
   if (process.env.NODE_ENV !== 'production') {
     const { decorateDevError } =
       require('../../next-devtools/userspace/app/errors/stitched-error') as typeof import('../../next-devtools/userspace/app/errors/stitched-error')
-    const causeError = decorateDevError(cause, errorInfo)
+    const causeError = decorateDevError(cause)
     recoverableErrors.add(causeError)
     cause = causeError
   }

packages/next/src/next-devtools/dev-overlay.browser.tsx

@@ -185,21 +185,18 @@ function replayQueuedEvents(dispatch: NonNullable<typeof maybeDispatch>) {
 }
 
 function DevOverlayRoot({
-  getComponentStack,
   getOwnerStack,
   getSquashedHydrationErrorDetails,
   isRecoverableError,
   routerType,
 }: {
-  getComponentStack: (error: Error) => string | undefined
   getOwnerStack: (error: Error) => string | null | undefined
   getSquashedHydrationErrorDetails: (error: Error) => HydrationErrorState | null
   isRecoverableError: (error: Error) => boolean
   routerType: 'app' | 'pages'
 }) {
   const [state, dispatch] = useErrorOverlayReducer(
     routerType,
-    getComponentStack,
     getOwnerStack,
     isRecoverableError
   )
@@ -254,7 +251,6 @@ function getSquashedHydrationErrorDetailsApp() {
 }
 
 export function renderAppDevOverlay(
-  getComponentStack: (error: Error) => string | undefined,
   getOwnerStack: (error: Error) => string | null | undefined,
   isRecoverableError: (error: Error) => boolean
 ): void {
@@ -293,7 +289,6 @@ export function renderAppDevOverlay(
       // At least it won't unmount any user code if it errors.
       root.render(
         <DevOverlayRoot
-          getComponentStack={getComponentStack}
           getOwnerStack={getOwnerStack}
           getSquashedHydrationErrorDetails={getSquashedHydrationErrorDetailsApp}
           isRecoverableError={isRecoverableError}
@@ -307,7 +302,6 @@ export function renderAppDevOverlay(
 }
 
 export function renderPagesDevOverlay(
-  getComponentStack: (error: Error) => string | undefined,
   getOwnerStack: (error: Error) => string | null | undefined,
   getSquashedHydrationErrorDetails: (
     error: Error
@@ -357,7 +351,6 @@ export function renderPagesDevOverlay(
       // At least it won't unmount any user code if it errors.
       root.render(
         <DevOverlayRoot
-          getComponentStack={getComponentStack}
           getOwnerStack={getOwnerStack}
           getSquashedHydrationErrorDetails={getSquashedHydrationErrorDetails}
           isRecoverableError={isRecoverableError}

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.stories.tsx

@@ -21,23 +21,20 @@ export const Default: Story = {
         runtime: true,
         error: new Error('First error message'),
         frames: () => Promise.resolve([]),
-        componentStackFrames: undefined,
         type: 'runtime',
       },
       {
         id: 1,
         runtime: true,
         error: new Error('Second error message'),
         frames: () => Promise.resolve([]),
-        componentStackFrames: undefined,
         type: 'runtime',
       },
       {
         id: 2,
         runtime: true,
         error: new Error('Third error message'),
         frames: () => Promise.resolve([]),
-        componentStackFrames: undefined,
         type: 'runtime',
       },
     ],

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-pagination/error-overlay-pagination.stories.tsx

@@ -22,23 +22,20 @@ const mockErrors: ReadyRuntimeError[] = [
     runtime: true as const,
     error: new Error('First error'),
     frames: () => Promise.resolve([]),
-    componentStackFrames: undefined,
     type: 'runtime',
   },
   {
     id: 2,
     runtime: true as const,
     error: new Error('Second error'),
     frames: () => Promise.resolve([]),
-    componentStackFrames: undefined,
     type: 'runtime',
   },
   {
     id: 3,
     runtime: true as const,
     error: new Error('Third error'),
     frames: () => Promise.resolve([]),
-    componentStackFrames: undefined,
     type: 'runtime',
   },
 ]

packages/next/src/next-devtools/dev-overlay/container/errors.stories.tsx

@@ -89,22 +89,6 @@ export const WithHydrationWarning: Story = {
               },
             },
           ]),
-        componentStackFrames: [
-          {
-            component: 'MyComponent',
-            file: 'app/page.tsx',
-            line1: 10,
-            column1: 5,
-            canOpenInEditor: true,
-          },
-          {
-            component: 'ParentComponent',
-            file: 'app/layout.tsx',
-            line1: 20,
-            column1: 3,
-            canOpenInEditor: true,
-          },
-        ],
         type: 'runtime',
       },
     ],

packages/next/src/next-devtools/dev-overlay/container/runtime-error/render-error.tsx

@@ -6,14 +6,12 @@ import {
   getErrorByType,
   type ReadyRuntimeError,
 } from '../../utils/get-error-by-type'
-import type { ComponentStackFrame } from '../../utils/parse-component-stack'
 import { usePersistentCacheErrorDetection } from '../../components/errors/error-overlay-toolbar/restart-server-button'
 
 export type SupportedErrorEvent = {
   id: number
   error: Error
   frames: readonly StackFrame[]
-  componentStackFrames?: readonly ComponentStackFrame[]
   type: 'runtime' | 'recoverable' | 'console'
 }
 

packages/next/src/next-devtools/dev-overlay/shared.ts

@@ -2,7 +2,6 @@ import { useReducer } from 'react'
 
 import type { VersionInfo } from '../../server/dev/parse-version-info'
 import type { SupportedErrorEvent } from './container/runtime-error/render-error'
-import { parseComponentStack } from './utils/parse-component-stack'
 import type { DebugInfo } from '../shared/types'
 import type { DevIndicatorServerState } from '../../server/dev/dev-indicator-server-state'
 import { parseStack } from '../../server/lib/parse-stack'
@@ -319,7 +318,6 @@ function getInitialState(
 
 export function useErrorOverlayReducer(
   routerType: 'pages' | 'app',
-  getComponentStack: (error: Error) => string | undefined,
   getOwnerStack: (error: Error) => string | null | undefined,
   isRecoverableError: (error: Error) => boolean
 ) {
@@ -328,18 +326,12 @@ export function useErrorOverlayReducer(
     id: number,
     error: Error
   ): readonly SupportedErrorEvent[] {
-    const componentStack = getComponentStack(error)
-    const componentStackFrames =
-      componentStack === undefined
-        ? undefined
-        : parseComponentStack(componentStack)
     const ownerStack = getOwnerStack(error)
     const frames = parseStack((error.stack || '') + (ownerStack || ''))
     const pendingEvent: SupportedErrorEvent = {
       id,
       error,
       frames,
-      componentStackFrames,
       type: isRecoverableError(error)
         ? 'recoverable'
         : isConsoleError(error)