refactor(error-overlay): unify Pages/App router error overlay source (v…

…ercel#62939)

packages/next/src/build/output/index.ts

@@ -2,7 +2,7 @@ import { bold, red, yellow } from '../../lib/picocolors'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import textTable from 'next/dist/compiled/text-table'
 import createStore from 'next/dist/compiled/unistore'
-import formatWebpackMessages from '../../client/dev/error-overlay/format-webpack-messages'
+import formatWebpackMessages from '../../client/components/react-dev-overlay/internal/helpers/format-webpack-messages'
 import { store as consoleStore } from './store'
 import type { OutputState } from './store'
 import type { webpack } from 'next/dist/compiled/webpack/webpack'

packages/next/src/build/webpack-build/impl.ts

@@ -1,6 +1,6 @@
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
 import { red } from '../../lib/picocolors'
-import formatWebpackMessages from '../../client/dev/error-overlay/format-webpack-messages'
+import formatWebpackMessages from '../../client/components/react-dev-overlay/internal/helpers/format-webpack-messages'
 import { nonNullable } from '../../lib/non-nullable'
 import type { COMPILER_INDEXES } from '../../shared/lib/constants'
 import {

packages/next/src/client/app-index.tsx

@@ -165,7 +165,7 @@ export function hydrate() {
     </StrictModeIfEnabled>
   )
 
-  const rootLayoutMissingTags = window.__next_root_layout_missing_tags || null
+  const rootLayoutMissingTags = window.__next_root_layout_missing_tags
   const hasMissingTags = !!rootLayoutMissingTags?.length
 
   const options = { onRecoverableError } satisfies ReactDOMClient.RootOptions
@@ -190,8 +190,8 @@ export function hydrate() {
         require('./components/react-dev-overlay/app/ReactDevOverlay')
           .default as typeof import('./components/react-dev-overlay/app/ReactDevOverlay').default
 
-      const INITIAL_OVERLAY_STATE: typeof import('./components/react-dev-overlay/app/error-overlay-reducer').INITIAL_OVERLAY_STATE =
-        require('./components/react-dev-overlay/app/error-overlay-reducer').INITIAL_OVERLAY_STATE
+      const INITIAL_OVERLAY_STATE: typeof import('./components/react-dev-overlay/shared').INITIAL_OVERLAY_STATE =
+        require('./components/react-dev-overlay/shared').INITIAL_OVERLAY_STATE
 
       const getSocketUrl: typeof import('./components/react-dev-overlay/internal/helpers/get-socket-url').getSocketUrl =
         require('./components/react-dev-overlay/internal/helpers/get-socket-url')
@@ -207,10 +207,7 @@ export function hydrate() {
       const errorTree = (
         <FallbackLayout>
           <ReactDevOverlay
-            state={{
-              ...INITIAL_OVERLAY_STATE,
-              rootLayoutMissingTags,
-            }}
+            state={{ ...INITIAL_OVERLAY_STATE, rootLayoutMissingTags }}
             onReactError={() => {}}
           >
             {reactEl}

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

@@ -1,9 +1,5 @@
 import * as React from 'react'
-import { ACTION_UNHANDLED_ERROR } from './error-overlay-reducer'
-import type {
-  OverlayState,
-  UnhandledErrorAction,
-} from './error-overlay-reducer'
+import { ACTION_UNHANDLED_ERROR, type OverlayState } from '../shared'
 
 import { ShadowPortal } from '../internal/components/ShadowPortal'
 import { BuildError } from '../internal/container/BuildError'
@@ -18,7 +14,7 @@ import { RootLayoutMissingTagsError } from '../internal/container/root-layout-mi
 interface ReactDevOverlayState {
   reactError: SupportedErrorEvent | null
 }
-class ReactDevOverlay extends React.PureComponent<
+export default class ReactDevOverlay extends React.PureComponent<
   {
     state: OverlayState
     children: React.ReactNode
@@ -29,17 +25,17 @@ class ReactDevOverlay extends React.PureComponent<
   state = { reactError: null }
 
   static getDerivedStateFromError(error: Error): ReactDevOverlayState {
-    const e = error
-    const event: UnhandledErrorAction = {
-      type: ACTION_UNHANDLED_ERROR,
-      reason: error,
-      frames: parseStack(e.stack!),
+    if (!error.stack) return { reactError: null }
+    return {
+      reactError: {
+        id: 0,
+        event: {
+          type: ACTION_UNHANDLED_ERROR,
+          reason: error,
+          frames: parseStack(error.stack),
+        },
+      },
     }
-    const errorEvent: SupportedErrorEvent = {
-      id: 0,
-      event,
-    }
-    return { reactError: errorEvent }
   }
 
   componentDidCatch(componentErr: Error) {
@@ -52,7 +48,7 @@ class ReactDevOverlay extends React.PureComponent<
 
     const hasBuildError = state.buildError != null
     const hasRuntimeErrors = Boolean(state.errors.length)
-    const hasMissingTags = Boolean(state.rootLayoutMissingTags)
+    const hasMissingTags = Boolean(state.rootLayoutMissingTags?.length)
     const isMounted =
       hasBuildError || hasRuntimeErrors || reactError || hasMissingTags
 
@@ -71,7 +67,7 @@ class ReactDevOverlay extends React.PureComponent<
             <CssReset />
             <Base />
             <ComponentStyles />
-            {state.rootLayoutMissingTags ? (
+            {state.rootLayoutMissingTags?.length ? (
               <RootLayoutMissingTagsError
                 missingTags={state.rootLayoutMissingTags}
               />
@@ -101,5 +97,3 @@ class ReactDevOverlay extends React.PureComponent<
     )
   }
 }
-
-export default ReactDevOverlay