[dev-overlay] Unify error interception between app/ and pages/

Author: eps1lon

packages/next/src/client/components/errors/use-error-handler.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { attachHydrationErrorState } from './attach-hydration-error-state'
 import { isNextRouterError } from '../is-next-router-error'
 import { storeHydrationErrorStateFromConsoleArgs } from './hydration-error-info'
@@ -7,6 +7,13 @@ import isError from '../../../lib/is-error'
 import { createConsoleError } from './console-error'
 import { enqueueConsecutiveDedupedError } from './enqueue-client-error'
 import { getReactStitchedError } from '../errors/stitched-error'
+import {
+  ACTION_UNHANDLED_ERROR,
+  ACTION_UNHANDLED_REJECTION,
+  type useErrorOverlayReducer,
+} from '../react-dev-overlay/shared'
+import { parseStack } from '../react-dev-overlay/utils/parse-stack'
+import { parseComponentStack } from '../react-dev-overlay/utils/parse-component-stack'
 
 const queueMicroTask =
   globalThis.queueMicrotask || ((cb: () => void) => Promise.resolve().then(cb))
@@ -70,7 +77,42 @@ export function handleClientError(originError: unknown) {
   }
 }
 
-export function useErrorHandler(
+export function useErrorHandlers(
+  dispatch: ReturnType<typeof useErrorOverlayReducer>[1]
+): void {
+  const handleOnUnhandledError = useCallback(
+    (error: Error): void => {
+      // Component stack is added to the error in use-error-handler in case there was a hydration error
+      const componentStackTrace = (error as any)._componentStack
+
+      dispatch({
+        type: ACTION_UNHANDLED_ERROR,
+        reason: error,
+        frames: parseStack(error.stack || ''),
+        componentStackFrames:
+          typeof componentStackTrace === 'string'
+            ? parseComponentStack(componentStackTrace)
+            : undefined,
+      })
+    },
+    [dispatch]
+  )
+
+  const handleOnUnhandledRejection = useCallback(
+    (reason: Error): void => {
+      const stitchedError = getReactStitchedError(reason)
+      dispatch({
+        type: ACTION_UNHANDLED_REJECTION,
+        reason: stitchedError,
+        frames: parseStack(stitchedError.stack || ''),
+      })
+    },
+    [dispatch]
+  )
+  useErrorHandler(handleOnUnhandledError, handleOnUnhandledRejection)
+}
+
+function useErrorHandler(
   handleOnUnhandledError: ErrorHandler,
   handleOnUnhandledRejection: ErrorHandler
 ) {

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

@@ -1,7 +1,7 @@
 /// <reference types="webpack/module.d.ts" />
 
 import type { ReactNode } from 'react'
-import { useCallback, useEffect, startTransition, useMemo, useRef } from 'react'
+import { useEffect, startTransition, useMemo, useRef } from 'react'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import formatWebpackMessages from '../utils/format-webpack-messages'
 import { useRouter } from '../../navigation'
@@ -13,24 +13,20 @@ import {
   ACTION_DEV_INDICATOR,
   ACTION_REFRESH,
   ACTION_STATIC_INDICATOR,
-  ACTION_UNHANDLED_ERROR,
-  ACTION_UNHANDLED_REJECTION,
   ACTION_VERSION_INFO,
   REACT_REFRESH_FULL_RELOAD,
   reportInvalidHmrMessage,
   useErrorOverlayReducer,
 } from '../shared'
-import { parseStack } from '../utils/parse-stack'
 import { AppDevOverlay } from './app-dev-overlay'
-import { useErrorHandler } from '../../errors/use-error-handler'
+import { useErrorHandlers } from '../../errors/use-error-handler'
 import { RuntimeErrorHandler } from '../../errors/runtime-error-handler'
 import {
   useSendMessage,
   useTurbopack,
   useWebsocket,
   useWebsocketPing,
 } from '../utils/use-websocket'
-import { parseComponentStack } from '../utils/parse-component-stack'
 import type { VersionInfo } from '../../../../server/dev/parse-version-info'
 import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types'
 import type {
@@ -40,7 +36,6 @@ import type {
 import { REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from '../shared'
 import type { DebugInfo } from '../types'
 import { useUntrackedPathname } from '../../navigation-untracked'
-import { getReactStitchedError } from '../../errors/stitched-error'
 import { handleDevBuildIndicatorHmrEvents } from '../../../dev/dev-build-indicator/internal/handle-dev-build-indicator-hmr-events'
 import type { GlobalErrorComponent } from '../../error-boundary'
 import type { DevIndicatorServerState } from '../../../../server/dev/dev-indicator-server-state'
@@ -480,6 +475,7 @@ export default function HotReload({
   globalError: [GlobalErrorComponent, React.ReactNode]
 }) {
   const [state, dispatch] = useErrorOverlayReducer('app')
+  useErrorHandlers(dispatch)
 
   const dispatcher = useMemo<Dispatcher>(() => {
     return {
@@ -513,37 +509,6 @@ export default function HotReload({
     }
   }, [dispatch])
 
-  const handleOnUnhandledError = useCallback(
-    (error: Error): void => {
-      // Component stack is added to the error in use-error-handler in case there was a hydration error
-      const componentStackTrace = (error as any)._componentStack
-
-      dispatch({
-        type: ACTION_UNHANDLED_ERROR,
-        reason: error,
-        frames: parseStack(error.stack || ''),
-        componentStackFrames:
-          typeof componentStackTrace === 'string'
-            ? parseComponentStack(componentStackTrace)
-            : undefined,
-      })
-    },
-    [dispatch]
-  )
-
-  const handleOnUnhandledRejection = useCallback(
-    (reason: Error): void => {
-      const stitchedError = getReactStitchedError(reason)
-      dispatch({
-        type: ACTION_UNHANDLED_REJECTION,
-        reason: stitchedError,
-        frames: parseStack(stitchedError.stack || ''),
-      })
-    },
-    [dispatch]
-  )
-  useErrorHandler(handleOnUnhandledError, handleOnUnhandledRejection)
-
   const webSocketRef = useWebsocket(assetPrefix)
   useWebsocketPing(webSocketRef)
   const sendMessage = useSendMessage(webSocketRef)

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

@@ -1,86 +1,20 @@
 import * as Bus from './bus'
-import { parseStack } from '../utils/parse-stack'
-import { parseComponentStack } from '../utils/parse-component-stack'
-import { storeHydrationErrorStateFromConsoleArgs } from '../../errors/hydration-error-info'
 import {
   ACTION_BEFORE_REFRESH,
   ACTION_BUILD_ERROR,
   ACTION_BUILD_OK,
   ACTION_DEV_INDICATOR,
   ACTION_REFRESH,
   ACTION_STATIC_INDICATOR,
-  ACTION_UNHANDLED_ERROR,
-  ACTION_UNHANDLED_REJECTION,
   ACTION_VERSION_INFO,
 } from '../shared'
 import type { VersionInfo } from '../../../../server/dev/parse-version-info'
-import { attachHydrationErrorState } from '../../errors/attach-hydration-error-state'
 import type { DevIndicatorServerState } from '../../../../server/dev/dev-indicator-server-state'
+import { handleGlobalErrors } from '../../errors/use-error-handler'
+import { patchConsoleError } from '../../globals/intercept-console-error'
 
 let isRegistered = false
 
-function handleError(error: unknown) {
-  if (!error || !(error instanceof Error) || typeof error.stack !== 'string') {
-    // A non-error was thrown, we don't have anything to show. :-(
-    return
-  }
-
-  attachHydrationErrorState(error)
-
-  const componentStackTrace = (error as any)._componentStack
-  const componentStackFrames =
-    typeof componentStackTrace === 'string'
-      ? parseComponentStack(componentStackTrace)
-      : undefined
-
-  // Skip ModuleBuildError and ModuleNotFoundError, as it will be sent through onBuildError callback.
-  // This is to avoid same error as different type showing up on client to cause flashing.
-  if (
-    error.name !== 'ModuleBuildError' &&
-    error.name !== 'ModuleNotFoundError'
-  ) {
-    Bus.emit({
-      type: ACTION_UNHANDLED_ERROR,
-      reason: error,
-      frames: parseStack(error.stack),
-      componentStackFrames,
-    })
-  }
-}
-
-let origConsoleError = console.error
-function nextJsHandleConsoleError(...args: any[]) {
-  // See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78
-  const error = process.env.NODE_ENV !== 'production' ? args[1] : args[0]
-  storeHydrationErrorStateFromConsoleArgs(...args)
-  handleError(error)
-  origConsoleError.apply(window.console, args)
-}
-
-function onUnhandledError(event: ErrorEvent) {
-  const error = event?.error
-  handleError(error)
-}
-
-function onUnhandledRejection(ev: PromiseRejectionEvent) {
-  const reason = ev?.reason
-  if (
-    !reason ||
-    !(reason instanceof Error) ||
-    typeof reason.stack !== 'string'
-  ) {
-    // A non-error was thrown, we don't have anything to show. :-(
-    return
-  }
-
-  const e = reason
-  Bus.emit({
-    type: ACTION_UNHANDLED_REJECTION,
-    reason: reason,
-    frames: parseStack(e.stack!),
-  })
-}
-
 export function register() {
   if (isRegistered) {
     return
@@ -91,9 +25,8 @@ export function register() {
     Error.stackTraceLimit = 50
   } catch {}
 
-  window.addEventListener('error', onUnhandledError)
-  window.addEventListener('unhandledrejection', onUnhandledRejection)
-  window.console.error = nextJsHandleConsoleError
+  handleGlobalErrors()
+  patchConsoleError()
 }
 
 export function onBuildOk() {

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

@@ -1,10 +1,12 @@
 import React from 'react'
 import * as Bus from './bus'
 import { useErrorOverlayReducer } from '../shared'
+import { useErrorHandlers } from '../../errors/use-error-handler'
 import { Router } from '../../../router'
 
 export const usePagesDevOverlay = () => {
   const [state, dispatch] = useErrorOverlayReducer('pages')
+  useErrorHandlers(dispatch)
 
   React.useEffect(() => {
     Bus.on(dispatch)

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

@@ -116,7 +116,7 @@ function pushErrorFilterDuplicates(
 const shouldDisableDevIndicator =
   process.env.__NEXT_DEV_INDICATOR?.toString() === 'false'
 
-export const INITIAL_OVERLAY_STATE: Omit<OverlayState, 'routerType'> = {
+const INITIAL_OVERLAY_STATE: Omit<OverlayState, 'routerType'> = {
   nextId: 1,
   buildError: null,
   errors: [],