[DevOverlay]: render indicator in pages router

Author: ztanner

packages/next/src/client/components/react-dev-overlay/_experimental/pages/error-boundary.tsx

@@ -3,7 +3,6 @@ import * as React from 'react'
 type DevOverlayErrorBoundaryProps = {
   children?: React.ReactNode
   onError: (error: Error, componentStack: string | null) => void
-  isMounted?: boolean
 }
 type DevOverlayErrorBoundaryState = { error: Error | null }
 

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

@@ -20,13 +20,8 @@ interface ReactDevOverlayProps {
 }
 
 export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
-  const {
-    isMounted,
-    state,
-    onComponentError,
-    hasRuntimeErrors,
-    hasBuildError,
-  } = usePagesReactDevOverlay()
+  const { state, onComponentError, hasRuntimeErrors, hasBuildError } =
+    usePagesReactDevOverlay()
 
   const { readyErrors, totalErrorCount } = useErrorHook({
     state,
@@ -37,33 +32,31 @@ export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
 
   return (
     <>
-      <DevOverlayErrorBoundary isMounted={isMounted} onError={onComponentError}>
+      <DevOverlayErrorBoundary onError={onComponentError}>
         {children ?? null}
       </DevOverlayErrorBoundary>
 
-      {isMounted && (
-        <ShadowPortal>
-          <CssReset />
-          <Base />
-          <Colors />
-          <ComponentStyles />
+      <ShadowPortal>
+        <CssReset />
+        <Base />
+        <Colors />
+        <ComponentStyles />
+
+        <DevToolsIndicator
+          state={state}
+          errorCount={totalErrorCount}
+          setIsErrorOverlayOpen={setIsErrorOverlayOpen}
+        />
 
-          <DevToolsIndicator
+        {(hasRuntimeErrors || hasBuildError) && (
+          <ErrorOverlay
             state={state}
-            errorCount={totalErrorCount}
+            readyErrors={readyErrors}
+            isErrorOverlayOpen={isErrorOverlayOpen}
             setIsErrorOverlayOpen={setIsErrorOverlayOpen}
           />
-
-          {(hasRuntimeErrors || hasBuildError) && (
-            <ErrorOverlay
-              state={state}
-              readyErrors={readyErrors}
-              isErrorOverlayOpen={isErrorOverlayOpen}
-              setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-            />
-          )}
-        </ShadowPortal>
-      )}
+        )}
+      </ShadowPortal>
     </>
   )
 }

packages/next/src/client/components/react-dev-overlay/pages/error-boundary.tsx

@@ -3,7 +3,6 @@ import * as React from 'react'
 type ErrorBoundaryProps = {
   children?: React.ReactNode
   onError: (error: Error, componentStack: string | null) => void
-  isMounted?: boolean
 }
 type ErrorBoundaryState = { error: Error | null }
 

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

@@ -21,15 +21,8 @@ export const usePagesReactDevOverlay = () => {
 
   const hasBuildError = state.buildError != null
   const hasRuntimeErrors = Boolean(state.errors.length)
-  const errorType = hasBuildError
-    ? 'build'
-    : hasRuntimeErrors
-      ? 'runtime'
-      : null
-  const isMounted = errorType !== null
 
   return {
-    isMounted,
     hasBuildError,
     hasRuntimeErrors,
     state,

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

@@ -16,17 +16,13 @@ export default function ReactDevOverlay({
 }: {
   children?: React.ReactNode
 }) {
-  const {
-    isMounted,
-    hasBuildError,
-    hasRuntimeErrors,
-    state,
-    onComponentError,
-  } = usePagesReactDevOverlay()
+  const { hasBuildError, hasRuntimeErrors, state, onComponentError } =
+    usePagesReactDevOverlay()
+  const isMounted = hasBuildError || hasRuntimeErrors
 
   return (
     <>
-      <ErrorBoundary isMounted={isMounted} onError={onComponentError}>
+      <ErrorBoundary onError={onComponentError}>
         {children ?? null}
       </ErrorBoundary>
       {isMounted ? (