[dev-overlay] Inject isRecoverableError implementation

Same as with `get*Stack` implementations.
`isRecoverableError` relies on module scope so it
needs to live in the same layer as the setter.

Author: eps1lon

packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -45,6 +45,7 @@ import reportHmrLatency from '../utils/report-hmr-latency'
 import { TurbopackHmr } from '../utils/turbopack-hot-reloader-common'
 import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../app-router-headers'
 import { getComponentStack, getOwnerStack } from '../../errors/stitched-error'
+import { isRecoverableError } from '../../../react-client-callbacks/on-recoverable-error'
 
 export interface Dispatcher {
   onBuildOk(): void
@@ -483,7 +484,8 @@ export default function HotReload({
   const [state, dispatch] = useErrorOverlayReducer(
     'app',
     getComponentStack,
-    getOwnerStack
+    getOwnerStack,
+    isRecoverableError
   )
 
   const dispatcher = useMemo<Dispatcher>(() => {

packages/next/src/client/components/react-dev-overlay/pages/hooks.ts

@@ -3,12 +3,14 @@ import * as Bus from './bus'
 import { useErrorOverlayReducer } from '../shared'
 import { Router } from '../../../router'
 import { getComponentStack, getOwnerStack } from '../../errors/stitched-error'
+import { isRecoverableError } from '../../../react-client-callbacks/on-recoverable-error'
 
 export const usePagesDevOverlay = () => {
   const [state, dispatch] = useErrorOverlayReducer(
     'pages',
     getComponentStack,
-    getOwnerStack
+    getOwnerStack,
+    isRecoverableError
   )
 
   React.useEffect(() => {

packages/next/src/client/components/react-dev-overlay/shared.ts

@@ -7,6 +7,7 @@ import type { DebugInfo } from './types'
 import type { DevIndicatorServerState } from '../../../server/dev/dev-indicator-server-state'
 import type { HMR_ACTION_TYPES } from '../../../server/dev/hot-reloader-types'
 import { parseStack } from './utils/parse-stack'
+import { isConsoleError } from '../errors/console-error'
 
 type FastRefreshState =
   /** No refresh in progress. */
@@ -169,7 +170,8 @@ function getInitialState(
 export function useErrorOverlayReducer(
   routerType: 'pages' | 'app',
   getComponentStack: (error: Error) => string | undefined,
-  getOwnerStack: (error: Error) => string | null | undefined
+  getOwnerStack: (error: Error) => string | null | undefined,
+  isRecoverableError: (error: Error) => boolean
 ) {
   function pushErrorFilterDuplicates(
     events: SupportedErrorEvent[],
@@ -188,6 +190,11 @@ export function useErrorOverlayReducer(
       error,
       frames,
       componentStackFrames,
+      type: isRecoverableError(error)
+        ? 'recoverable'
+        : isConsoleError(error)
+          ? 'console'
+          : 'runtime',
     }
     const pendingEvents = events.filter((event) => {
       // Filter out duplicate errors

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-nav/error-overlay-nav.stories.tsx

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

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-pagination/error-overlay-pagination.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { ErrorOverlayPagination } from './error-overlay-pagination'
 import { withShadowPortal } from '../../../storybook/with-shadow-portal'
 import { useState } from 'react'
+import type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'
 
 const meta: Meta<typeof ErrorOverlayPagination> = {
   component: ErrorOverlayPagination,
@@ -15,24 +16,27 @@ export default meta
 type Story = StoryObj<typeof ErrorOverlayPagination>
 
 // Mock errors for stories
-const mockErrors = [
+const mockErrors: ReadyRuntimeError[] = [
   {
     id: 1,
     runtime: true as const,
     error: new Error('First error'),
     frames: () => Promise.resolve([]),
+    type: 'runtime',
   },
   {
     id: 2,
     runtime: true as const,
     error: new Error('Second error'),
     frames: () => Promise.resolve([]),
+    type: 'runtime',
   },
   {
     id: 3,
     runtime: true as const,
     error: new Error('Third error'),
     frames: () => Promise.resolve([]),
+    type: 'runtime',
   },
 ]
 

packages/next/src/client/components/react-dev-overlay/ui/container/errors.stories.tsx

@@ -96,6 +96,7 @@ const runtimeErrors: ReadyRuntimeError[] = [
         },
         ...Array(20).fill(ignoredFrame),
       ]),
+    type: 'runtime',
   },
   {
     id: 2,
@@ -113,6 +114,7 @@ const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Second error message'),
         },
       ]),
+    type: 'runtime',
   },
   {
     id: 3,
@@ -130,6 +132,7 @@ const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('Third error message'),
         },
       ]),
+    type: 'runtime',
   },
   {
     id: 4,
@@ -147,6 +150,7 @@ const runtimeErrors: ReadyRuntimeError[] = [
           originalCodeFrame: originalCodeFrame('typeof window !== undefined'),
         },
       ]),
+    type: 'runtime',
   },
 ]
 
@@ -232,6 +236,7 @@ export const WithHydrationWarning: Story = {
               },
             },
           ]),
+        type: 'runtime',
       },
     ],
     debugInfo: { devtoolsFrontendUrl: undefined },

packages/next/src/client/components/react-dev-overlay/ui/container/errors.tsx

@@ -5,7 +5,6 @@ import { RuntimeError } from './runtime-error'
 import { getErrorSource } from '../../../../../shared/lib/error-source'
 import { HotlinkedText } from '../components/hot-linked-text'
 import { PseudoHtmlDiff } from './runtime-error/component-stack-pseudo-html'
-import { isConsoleError } from '../../../errors/console-error'
 import { extractNextErrorCode } from '../../../../../lib/error-telemetry-utils'
 import {
   ErrorOverlayLayout,
@@ -19,7 +18,6 @@ import {
 import type { ReadyRuntimeError } from '../../utils/get-error-by-type'
 import type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay'
 import { getSquashedHydrationErrorDetails } from '../../pages/hydration-error-state'
-import { isRecoverableError } from '../../../../react-client-callbacks/on-recoverable-error'
 
 export interface ErrorsProps extends ErrorBaseProps {
   runtimeErrors: ReadyRuntimeError[]
@@ -56,11 +54,14 @@ function GenericErrorDescription({ error }: { error: Error }) {
   )
 }
 
-function getErrorType(error: Error): ErrorOverlayLayoutProps['errorType'] {
-  if (isRecoverableError(error)) {
+function getErrorTypeLabel(
+  error: Error,
+  type: ReadyRuntimeError['type']
+): ErrorOverlayLayoutProps['errorType'] {
+  if (type === 'recoverable') {
     return `Recoverable ${error.name}`
   }
-  if (isConsoleError(error)) {
+  if (type === 'console') {
     return `Console ${error.name}`
   }
   return `Runtime ${error.name}`
@@ -141,7 +142,7 @@ export function Errors({
   const isServerError = ['server', 'edge-server'].includes(
     getErrorSource(error) || ''
   )
-  const errorType = getErrorType(error)
+  const errorType = getErrorTypeLabel(error, activeError.type)
   // TOOD: May be better to always treat everything past the first blank line as notes
   // We're currently only special casing hydration error messages.
   const notes = errorDetails.notes

packages/next/src/client/components/react-dev-overlay/ui/container/runtime-error/render-error.tsx

@@ -13,6 +13,7 @@ export type SupportedErrorEvent = {
   error: Error
   frames: StackFrame[]
   componentStackFrames?: ComponentStackFrame[]
+  type: 'runtime' | 'recoverable' | 'console'
 }
 
 type Props = {

packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx

@@ -52,20 +52,23 @@ const initialState: OverlayState = {
           column: 5,
         },
       ],
+      type: 'runtime',
     },
     {
       id: 2,
       error: Object.assign(new Error('Second error message'), {
         __NEXT_ERROR_CODE: 'E002',
       }),
       frames: [],
+      type: 'runtime',
     },
     {
       id: 3,
       error: Object.assign(new Error('Third error message'), {
         __NEXT_ERROR_CODE: 'E003',
       }),
       frames: [],
+      type: 'runtime',
     },
   ],
   refreshState: { type: 'idle' },

packages/next/src/client/components/react-dev-overlay/utils/get-error-by-type.ts

@@ -11,6 +11,7 @@ export type ReadyRuntimeError = {
   error: Error & { environmentName?: string }
   frames: OriginalStackFrame[] | (() => Promise<OriginalStackFrame[]>)
   componentStackFrames?: ComponentStackFrame[]
+  type: 'runtime' | 'console' | 'recoverable'
 }
 
 export const useFrames = (error: ReadyRuntimeError): OriginalStackFrame[] => {
@@ -43,6 +44,7 @@ export async function getErrorByType(
     id: event.id,
     runtime: true,
     error: event.error,
+    type: event.type,
   } as const
 
   if ('use' in React) {