[dev-overlay] Move Redbox open/close into dispatcher

eps1lon · eps1lon · commit edd34fa465b1 · 2025-05-27T17:54:35.000+02:00
diff --git a/packages/next/src/client/components/react-dev-overlay/app/app-dev-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/app/app-dev-overlay.tsx
@@ -1,7 +1,11 @@
-import type { OverlayState } from '../shared'
+import {
+  ACTION_ERROR_OVERLAY_OPEN,
+  type OverlayDispatch,
+  type OverlayState,
+} from '../shared'
 import type { GlobalErrorComponent } from '../../global-error'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { AppDevOverlayErrorBoundary } from './app-dev-overlay-error-boundary'
 import { FontStyles } from '../font/font-styles'
 import { DevOverlay } from '../ui/dev-overlay'
@@ -70,17 +74,18 @@ function ReplaySsrOnlyErrors({
 
 export function AppDevOverlay({
   state,
+  dispatch,
   globalError,
   children,
 }: {
   state: OverlayState
+  dispatch: OverlayDispatch
   globalError: [GlobalErrorComponent, React.ReactNode]
   children: React.ReactNode
 }) {
-  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(false)
   const openOverlay = useCallback(() => {
-    setIsErrorOverlayOpen(true)
-  }, [])
+    dispatch({ type: ACTION_ERROR_OVERLAY_OPEN })
+  }, [dispatch])
 
   return (
     <>
@@ -94,11 +99,7 @@ export function AppDevOverlay({
       <>
         {/* Fonts can only be loaded outside the Shadow DOM. */}
         <FontStyles />
-        <DevOverlay
-          state={state}
-          isErrorOverlayOpen={isErrorOverlayOpen}
-          setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-        />
+        <DevOverlay state={state} dispatch={dispatch} />
       </>
     </>
   )
diff --git a/packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx b/packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx
@@ -624,7 +624,7 @@ export default function HotReload({
   ])
 
   return (
-    <AppDevOverlay state={state} globalError={globalError}>
+    <AppDevOverlay state={state} dispatch={dispatch} globalError={globalError}>
       {children}
     </AppDevOverlay>
   )
diff --git a/packages/next/src/client/components/react-dev-overlay/pages/hooks.ts b/packages/next/src/client/components/react-dev-overlay/pages/hooks.ts
@@ -30,5 +30,6 @@ export const usePagesDevOverlay = () => {
   return {
     state,
     onComponentError,
+    dispatch,
   }
 }
diff --git a/packages/next/src/client/components/react-dev-overlay/pages/pages-dev-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/pages/pages-dev-overlay.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { PagesDevOverlayErrorBoundary } from './pages-dev-overlay-error-boundary'
 import { usePagesDevOverlay } from './hooks'
 import { FontStyles } from '../font/font-styles'
@@ -13,9 +12,7 @@ interface PagesDevOverlayProps {
 }
 
 export function PagesDevOverlay({ children }: PagesDevOverlayProps) {
-  const { state, onComponentError } = usePagesDevOverlay()
-
-  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(true)
+  const { state, dispatch, onComponentError } = usePagesDevOverlay()
 
   return (
     <>
@@ -25,11 +22,7 @@ export function PagesDevOverlay({ children }: PagesDevOverlayProps) {
 
       {/* Fonts can only be loaded outside the Shadow DOM. */}
       <FontStyles />
-      <DevOverlay
-        state={state}
-        isErrorOverlayOpen={isErrorOverlayOpen}
-        setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-      />
+      <DevOverlay state={state} dispatch={dispatch} />
     </>
   )
 }
diff --git a/packages/next/src/client/components/react-dev-overlay/shared.ts b/packages/next/src/client/components/react-dev-overlay/shared.ts
@@ -27,7 +27,9 @@ export interface OverlayState {
   disableDevIndicator: boolean
   debugInfo: DebugInfo
   routerType: 'pages' | 'app'
+  isErrorOverlayOpen: boolean
 }
+export type OverlayDispatch = React.Dispatch<BusEvent>
 
 export const ACTION_STATIC_INDICATOR = 'static-indicator'
 export const ACTION_BUILD_OK = 'build-ok'
@@ -39,6 +41,9 @@ export const ACTION_UNHANDLED_ERROR = 'unhandled-error'
 export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
 export const ACTION_DEBUG_INFO = 'debug-info'
 export const ACTION_DEV_INDICATOR = 'dev-indicator'
+export const ACTION_ERROR_OVERLAY_OPEN = 'error-overlay-open'
+export const ACTION_ERROR_OVERLAY_CLOSE = 'error-overlay-close'
+export const ACTION_ERROR_OVERLAY_TOGGLE = 'error-overlay-toggle'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
@@ -90,6 +95,16 @@ interface DevIndicatorAction {
   devIndicator: DevIndicatorServerState
 }
 
+export interface ErrorOverlayOpenAction {
+  type: typeof ACTION_ERROR_OVERLAY_OPEN
+}
+export interface ErrorOverlayCloseAction {
+  type: typeof ACTION_ERROR_OVERLAY_CLOSE
+}
+export interface ErrorOverlayToggleAction {
+  type: typeof ACTION_ERROR_OVERLAY_TOGGLE
+}
+
 export type BusEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -101,6 +116,9 @@ export type BusEvent =
   | StaticIndicatorAction
   | DebugInfoAction
   | DevIndicatorAction
+  | ErrorOverlayOpenAction
+  | ErrorOverlayCloseAction
+  | ErrorOverlayToggleAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -140,6 +158,7 @@ export const INITIAL_OVERLAY_STATE: Omit<OverlayState, 'routerType'> = {
   nextId: 1,
   buildError: null,
   errors: [],
+  isErrorOverlayOpen: false,
   notFound: false,
   staticIndicator: false,
   /* 
@@ -239,6 +258,15 @@ export function useErrorOverlayReducer(routerType: 'pages' | 'app') {
             shouldDisableDevIndicator || !!action.devIndicator.disabledUntil,
         }
       }
+      case ACTION_ERROR_OVERLAY_OPEN: {
+        return { ...state, isErrorOverlayOpen: true }
+      }
+      case ACTION_ERROR_OVERLAY_CLOSE: {
+        return { ...state, isErrorOverlayOpen: false }
+      }
+      case ACTION_ERROR_OVERLAY_TOGGLE: {
+        return { ...state, isErrorOverlayOpen: !state.isErrorOverlayOpen }
+      }
       default: {
         return state
       }
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx
@@ -56,13 +56,14 @@ const state: OverlayState = {
   notFound: false,
   staticIndicator: true,
   debugInfo: { devtoolsFrontendUrl: undefined },
+  isErrorOverlayOpen: false,
 }
 
 export const StaticRoute: Story = {
   args: {
     errorCount: 0,
     state,
-    setIsErrorOverlayOpen: () => {},
+    dispatch: () => {},
   },
 }
 
@@ -73,22 +74,22 @@ export const DynamicRoute: Story = {
       ...state,
       staticIndicator: false,
     },
-    setIsErrorOverlayOpen: () => {},
+    dispatch: () => {},
   },
 }
 
 export const SingleError: Story = {
   args: {
     errorCount: 1,
     state,
-    setIsErrorOverlayOpen: () => {},
+    dispatch: () => {},
   },
 }
 
 export const MultipleErrors: Story = {
   args: {
     errorCount: 3,
     state,
-    setIsErrorOverlayOpen: () => {},
+    dispatch: () => {},
   },
 }
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
@@ -1,5 +1,11 @@
 import type { CSSProperties, Dispatch, SetStateAction } from 'react'
-import { STORAGE_KEY_POSITION, type OverlayState } from '../../../../shared'
+import {
+  ACTION_ERROR_OVERLAY_OPEN,
+  ACTION_ERROR_OVERLAY_TOGGLE,
+  STORAGE_KEY_POSITION,
+  type OverlayDispatch,
+  type OverlayState,
+} from '../../../../shared'
 
 import { useState, useEffect, useRef, createContext, useContext } from 'react'
 import { Toast } from '../../toast'
@@ -30,15 +36,13 @@ export function DevToolsIndicator({
   state,
   errorCount,
   isBuildError,
-  setIsErrorOverlayOpen,
   ...props
 }: {
   state: OverlayState
+  dispatch: OverlayDispatch
   errorCount: number
   isBuildError: boolean
-  setIsErrorOverlayOpen: (
-    isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)
-  ) => void
+
   scale: DevToolsScale
   setScale: (value: DevToolsScale) => void
 }) {
@@ -57,7 +61,6 @@ export function DevToolsIndicator({
           method: 'POST',
         })
       }}
-      setIsErrorOverlayOpen={setIsErrorOverlayOpen}
       isTurbopack={!!process.env.TURBOPACK}
       disabled={state.disableDevIndicator || !isDevToolsIndicatorVisible}
       isBuildError={isBuildError}
@@ -96,7 +99,7 @@ function DevToolsPopover({
   isTurbopack,
   isBuildError,
   hide,
-  setIsErrorOverlayOpen,
+  dispatch,
   scale,
   setScale,
 }: {
@@ -108,9 +111,7 @@ function DevToolsPopover({
   isTurbopack: boolean
   isBuildError: boolean
   hide: () => void
-  setIsErrorOverlayOpen: (
-    isOverlayOpen: boolean | ((prev: boolean) => boolean)
-  ) => void
+  dispatch: OverlayDispatch
   scale: DevToolsScale
   setScale: (value: DevToolsScale) => void
 }) {
@@ -210,12 +211,12 @@ function DevToolsPopover({
   function openErrorOverlay() {
     setOpen(null)
     if (issueCount > 0) {
-      setIsErrorOverlayOpen(true)
+      dispatch({ type: ACTION_ERROR_OVERLAY_OPEN })
     }
   }
 
   function toggleErrorOverlay() {
-    setIsErrorOverlayOpen((prev) => !prev)
+    dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
   }
 
   function openRootMenu() {
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay/error-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay/error-overlay.tsx
@@ -1,4 +1,8 @@
-import type { OverlayState } from '../../../../shared'
+import {
+  ACTION_ERROR_OVERLAY_CLOSE,
+  type OverlayDispatch,
+  type OverlayState,
+} from '../../../../shared'
 
 import { Suspense } from 'react'
 import { BuildError } from '../../../container/build-error'
@@ -18,21 +22,19 @@ export interface ErrorBaseProps {
 
 export function ErrorOverlay({
   state,
+  dispatch,
   runtimeErrors,
-  isErrorOverlayOpen,
-  setIsErrorOverlayOpen,
   errorCount,
 }: {
   state: OverlayState
+  dispatch: OverlayDispatch
   runtimeErrors: ReadyRuntimeError[]
-  isErrorOverlayOpen: boolean
-  setIsErrorOverlayOpen: (value: boolean) => void
   errorCount: number
 }) {
   const isTurbopack = !!process.env.TURBOPACK
 
   // This hook lets us do an exit animation before unmounting the component
-  const { mounted, rendered } = useDelayedRender(isErrorOverlayOpen, {
+  const { mounted, rendered } = useDelayedRender(state.isErrorOverlayOpen, {
     exitDelay: transitionDurationMs,
   })
 
@@ -74,7 +76,7 @@ export function ErrorOverlay({
       debugInfo={state.debugInfo}
       runtimeErrors={runtimeErrors}
       onClose={() => {
-        setIsErrorOverlayOpen(false)
+        dispatch({ type: ACTION_ERROR_OVERLAY_CLOSE })
       }}
     />
   )
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx b/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.tsx

Original file line number	Diff line number	Diff line change
`@@ -624,7 +624,7 @@ export default function HotReload({`
`624`	`624`	`])`
`625`	`625`
`626`	`626`	`return (`
`627`		`- <AppDevOverlay state={state} globalError={globalError}>`
	`627`	`+ <AppDevOverlay state={state} dispatch={dispatch} globalError={globalError}>`
`628`	`628`	`{children}`
`629`	`629`	`</AppDevOverlay>`
`630`	`630`	`)`
Original file line number	Diff line number	Diff line change
`@@ -30,5 +30,6 @@ export const usePagesDevOverlay = () => {`
`30`	`30`	`return {`
`31`	`31`	`state,`
`32`	`32`	`onComponentError,`
	`33`	`+ dispatch,`
`33`	`34`	`}`
`34`	`35`	`}`