[dev-overlay] Render Dev Overlay in a leaf in /app

Ensures Dev Overlay re-render will never trigger user code re-render.

Author: eps1lon

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

@@ -1,17 +1,34 @@
 import {
+  ACTION_BEFORE_REFRESH,
+  ACTION_BUILD_ERROR,
+  ACTION_BUILD_OK,
+  ACTION_DEBUG_INFO,
+  ACTION_DEV_INDICATOR,
+  ACTION_REFRESH,
+  ACTION_ERROR_OVERLAY_CLOSE,
   ACTION_ERROR_OVERLAY_OPEN,
-  type OverlayDispatch,
-  type OverlayState,
+  ACTION_ERROR_OVERLAY_TOGGLE,
+  ACTION_STATIC_INDICATOR,
+  ACTION_UNHANDLED_ERROR,
+  ACTION_UNHANDLED_REJECTION,
+  ACTION_VERSION_INFO,
+  useErrorOverlayReducer,
 } from '../shared'
 import type { GlobalErrorComponent } from '../../global-error'
 
-import { useCallback, useEffect } from 'react'
-import { AppDevOverlayErrorBoundary } from './app-dev-overlay-error-boundary'
+import { useEffect, useInsertionEffect } from 'react'
+import { AppDevOverlayErrorBoundary as AppDevOverlayErrorBoundaryImpl } from './app-dev-overlay-error-boundary'
 import { FontStyles } from '../font/font-styles'
+import type { DebugInfo } from '../types'
 import { DevOverlay } from '../ui/dev-overlay'
+import { parseStack } from '../utils/parse-stack'
+import { parseComponentStack } from '../utils/parse-component-stack'
+import { getComponentStack, getOwnerStack } from '../../errors/stitched-error'
 import { handleClientError } from '../../errors/use-error-handler'
 import { isNextRouterError } from '../../is-next-router-error'
 import { MISSING_ROOT_TAGS_ERROR } from '../../../../shared/lib/errors/constants'
+import type { DevIndicatorServerState } from '../../../../server/dev/dev-indicator-server-state'
+import type { VersionInfo } from '../../../../server/dev/parse-version-info'
 
 function readSsrError(): (Error & { digest?: string }) | null {
   if (typeof document === 'undefined') {
@@ -72,35 +89,157 @@ function ReplaySsrOnlyErrors({
   return null
 }
 
-export function AppDevOverlay({
-  state,
-  dispatch,
+export function AppDevOverlayErrorBoundary({
   globalError,
   children,
 }: {
-  state: OverlayState
-  dispatch: OverlayDispatch
   globalError: [GlobalErrorComponent, React.ReactNode]
   children: React.ReactNode
 }) {
-  const openOverlay = useCallback(() => {
+  function openOverlay() {
+    dispatcher.openErrorOverlay()
+  }
+
+  return (
+    <AppDevOverlayErrorBoundaryImpl
+      globalError={globalError}
+      onError={openOverlay}
+    >
+      <ReplaySsrOnlyErrors onBlockingError={openOverlay} />
+      {children}
+    </AppDevOverlayErrorBoundaryImpl>
+  )
+}
+
+export interface Dispatcher {
+  onBuildOk(): void
+  onBuildError(message: string): void
+  onVersionInfo(versionInfo: VersionInfo): void
+  onDebugInfo(debugInfo: DebugInfo): void
+  onBeforeRefresh(): void
+  onRefresh(): void
+  onStaticIndicator(status: boolean): void
+  onDevIndicator(devIndicator: DevIndicatorServerState): void
+  onUnhandledError(reason: Error): void
+  onUnhandledRejection(reason: Error): void
+  openErrorOverlay(): void
+  closeErrorOverlay(): void
+  toggleErrorOverlay(): void
+}
+
+type Dispatch = ReturnType<typeof useErrorOverlayReducer>[1]
+let maybeDispatch: Dispatch | null = null
+const queue: Array<(dispatch: Dispatch) => void> = []
+
+// Events might be dispatched before we get a `dispatch` from React (e.g. console.error during module eval).
+// We need to queue them until we have a `dispatch` function available.
+function createQueuable<Args extends any[]>(
+  queueableFunction: (dispatch: Dispatch, ...args: Args) => void
+) {
+  return (...args: Args) => {
+    if (maybeDispatch) {
+      queueableFunction(maybeDispatch, ...args)
+    } else {
+      queue.push((dispatch: Dispatch) => {
+        queueableFunction(dispatch, ...args)
+      })
+    }
+  }
+}
+
+// TODO: Extract into separate functions that are imported
+export const dispatcher: Dispatcher = {
+  onBuildOk: createQueuable((dispatch: Dispatch) => {
+    dispatch({ type: ACTION_BUILD_OK })
+  }),
+  onBuildError: createQueuable((dispatch: Dispatch, message: string) => {
+    dispatch({ type: ACTION_BUILD_ERROR, message })
+  }),
+  onBeforeRefresh: createQueuable((dispatch: Dispatch) => {
+    dispatch({ type: ACTION_BEFORE_REFRESH })
+  }),
+  onRefresh: createQueuable((dispatch: Dispatch) => {
+    dispatch({ type: ACTION_REFRESH })
+  }),
+  onVersionInfo: createQueuable(
+    (dispatch: Dispatch, versionInfo: VersionInfo) => {
+      dispatch({ type: ACTION_VERSION_INFO, versionInfo })
+    }
+  ),
+  onStaticIndicator: createQueuable((dispatch: Dispatch, status: boolean) => {
+    dispatch({ type: ACTION_STATIC_INDICATOR, staticIndicator: status })
+  }),
+  onDebugInfo: createQueuable((dispatch: Dispatch, debugInfo: DebugInfo) => {
+    dispatch({ type: ACTION_DEBUG_INFO, debugInfo })
+  }),
+  onDevIndicator: createQueuable(
+    (dispatch: Dispatch, devIndicator: DevIndicatorServerState) => {
+      dispatch({ type: ACTION_DEV_INDICATOR, devIndicator })
+    }
+  ),
+  onUnhandledError: createQueuable((dispatch: Dispatch, error: Error) => {
+    // Component stack is added to the error in use-error-handler in case there was a hydration error
+    const componentStack = getComponentStack(error)
+    const ownerStack = getOwnerStack(error)
+
+    dispatch({
+      type: ACTION_UNHANDLED_ERROR,
+      reason: error,
+      frames: parseStack((error.stack || '') + (ownerStack || '')),
+      componentStackFrames:
+        typeof componentStack === 'string'
+          ? parseComponentStack(componentStack)
+          : undefined,
+    })
+  }),
+  onUnhandledRejection: createQueuable((dispatch: Dispatch, error: Error) => {
+    const ownerStack = getOwnerStack(error)
+    dispatch({
+      type: ACTION_UNHANDLED_REJECTION,
+      reason: error,
+      frames: parseStack((error.stack || '') + (ownerStack || '')),
+    })
+  }),
+  openErrorOverlay: createQueuable((dispatch: Dispatch) => {
     dispatch({ type: ACTION_ERROR_OVERLAY_OPEN })
-  }, [dispatch])
+  }),
+  closeErrorOverlay: createQueuable((dispatch: Dispatch) => {
+    dispatch({ type: ACTION_ERROR_OVERLAY_CLOSE })
+  }),
+  toggleErrorOverlay: createQueuable((dispatch: Dispatch) => {
+    dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
+  }),
+}
+
+function replayQueuedEvents(dispatch: NonNullable<typeof maybeDispatch>) {
+  try {
+    for (const queuedFunction of queue) {
+      queuedFunction(dispatch)
+    }
+  } finally {
+    // TODO: What to do with failed events?
+    queue.length = 0
+  }
+}
+
+export function AppDevOverlay() {
+  const [state, dispatch] = useErrorOverlayReducer('app')
+
+  useInsertionEffect(() => {
+    maybeDispatch = dispatch
+
+    replayQueuedEvents(dispatch)
+
+    return () => {
+      maybeDispatch = null
+    }
+  })
 
   return (
     <>
-      <AppDevOverlayErrorBoundary
-        globalError={globalError}
-        onError={openOverlay}
-      >
-        <ReplaySsrOnlyErrors onBlockingError={openOverlay} />
-        {children}
-      </AppDevOverlayErrorBoundary>
-      <>
-        {/* Fonts can only be loaded outside the Shadow DOM. */}
-        <FontStyles />
-        <DevOverlay state={state} dispatch={dispatch} />
-      </>
+      {/* Fonts can only be loaded outside the Shadow DOM. */}
+      <FontStyles />
+      <DevOverlay state={state} dispatch={dispatch} />
     </>
   )
 }