Function DevOverlayRoot

packages/next/src/next-devtools/dev-overlay.browser.tsx:249–321

({
  enableCacheIndicator,
  getOwnerStack,
  getSquashedHydrationErrorDetails,
  isRecoverableError,
  routerType,
  shadowRoot,
}: {
  enableCacheIndicator: boolean
  getOwnerStack: (error: Error) => string | null | undefined
  getSquashedHydrationErrorDetails: (error: Error) => HydrationErrorState | null
  isRecoverableError: (error: Error) => boolean
  routerType: 'app' | 'pages'
  shadowRoot: ShadowRoot
})

}

function DevOverlayRoot({
  enableCacheIndicator,
  getOwnerStack,
  getSquashedHydrationErrorDetails,
  isRecoverableError,
  routerType,
  shadowRoot,
}: {
  enableCacheIndicator: boolean
  getOwnerStack: (error: Error) => string | null | undefined
  getSquashedHydrationErrorDetails: (error: Error) => HydrationErrorState | null
  isRecoverableError: (error: Error) => boolean
  routerType: 'app' | 'pages'
  shadowRoot: ShadowRoot
}) {
  const [state, dispatch] = useErrorOverlayReducer(
    routerType,
    getOwnerStack,
    isRecoverableError,
    enableCacheIndicator
  )

  useEffect(() => {
    currentOverlayState = { ...state, routerType }
  }, [state, routerType])

  useLayoutEffect(() => {
    const portalNode = shadowRoot.host
    if (state.theme === 'dark') {
      portalNode.classList.add('dark')
      portalNode.classList.remove('light')
    } else if (state.theme === 'light') {
      portalNode.classList.add('light')
      portalNode.classList.remove('dark')
    } else {
      portalNode.classList.remove('dark')
      portalNode.classList.remove('light')
    }
  }, [shadowRoot, state.theme])

  useInsertionEffect(() => {
    maybeDispatch = dispatch

    // Can't schedule updates from useInsertionEffect, so we need to defer.
    // Could move this into a passive Effect but we don't want replaying when
    // we reconnect.
    const replayTimeout = setTimeout(() => {
      replayQueuedEvents(dispatch)
    })

    return () => {
      maybeDispatch = null
      clearTimeout(replayTimeout)
    }
  }, [])

  return (
    <>