[DevOverlay] Display Correct Number of Errors on Indicator

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

@@ -22,7 +22,10 @@ export default function ReactDevOverlay({
   children: React.ReactNode
 }) {
   const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(false)
-  const { readyErrors } = useErrorHook({ errors: state.errors, isAppDir: true })
+  const { readyErrors, totalErrorCount } = useErrorHook({
+    state,
+    isAppDir: true,
+  })
 
   const devOverlay = (
     <ShadowPortal>
@@ -33,7 +36,7 @@ export default function ReactDevOverlay({
 
       <DevToolsIndicator
         state={state}
-        readyErrorsLength={readyErrors.length}
+        errorCount={totalErrorCount}
         setIsErrorOverlayOpen={setIsErrorOverlayOpen}
       />
 

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx

@@ -57,31 +57,31 @@ const state: OverlayState = {
 
 export const NoErrors: Story = {
   args: {
-    readyErrorsLength: 0,
+    errorCount: 0,
     state,
     setIsErrorOverlayOpen: () => {},
   },
 }
 
 export const SingleError: Story = {
   args: {
-    readyErrorsLength: 1,
+    errorCount: 1,
     state,
     setIsErrorOverlayOpen: () => {},
   },
 }
 
 export const MultipleErrors: Story = {
   args: {
-    readyErrorsLength: 3,
+    errorCount: 3,
     state,
     setIsErrorOverlayOpen: () => {},
   },
 }
 
 export const WithStaticIndicator: Story = {
   args: {
-    readyErrorsLength: 3,
+    errorCount: 3,
     state: {
       ...state,
       staticIndicator: true,

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -14,11 +14,11 @@ import { MODIFIERS } from '../../../hooks/use-keyboard-shortcut'
 
 export function DevToolsIndicator({
   state,
-  readyErrorsLength,
+  errorCount,
   setIsErrorOverlayOpen,
 }: {
   state: OverlayState
-  readyErrorsLength: number
+  errorCount: number
   setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>
 }) {
   const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)
@@ -36,7 +36,7 @@ export function DevToolsIndicator({
     isDevToolsIndicatorOpen && (
       <DevToolsPopover
         semver={state.versionInfo.installed}
-        issueCount={readyErrorsLength}
+        issueCount={errorCount}
         isStaticRoute={state.staticIndicator}
         hide={() => {
           setIsDevToolsIndicatorOpen(false)

packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts

@@ -1,5 +1,6 @@
 import type { ReadyRuntimeError } from '../../helpers/get-error-by-type'
 import type {
+  OverlayState,
   UnhandledErrorAction,
   UnhandledRejectionAction,
 } from '../../../../shared'
@@ -33,12 +34,14 @@ function getErrorSignature(ev: SupportedErrorEvent): string {
 }
 
 export function useErrorHook({
-  errors,
+  state,
   isAppDir,
 }: {
-  errors: SupportedErrorEvent[]
+  state: OverlayState
   isAppDir: boolean
 }) {
+  const { errors, rootLayoutMissingTags, buildError } = state
+
   const [lookups, setLookups] = useState<{
     [eventId: string]: ReadyRuntimeError
   }>({})
@@ -99,5 +102,14 @@ export function useErrorHook({
 
   return {
     readyErrors,
+    // Total number of errors are based on the priority that
+    // will be displayed. Since build error and root layout
+    // missing tags won't be dismissed until resolved, the
+    // total number of errors may be fixed to their length.
+    totalErrorCount: rootLayoutMissingTags?.length
+      ? rootLayoutMissingTags.length
+      : !!buildError
+        ? 1
+        : errors.length,
   }
 }

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

@@ -28,8 +28,8 @@ export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
     hasBuildError,
   } = usePagesReactDevOverlay()
 
-  const { readyErrors } = useErrorHook({
-    errors: state.errors,
+  const { readyErrors, totalErrorCount } = useErrorHook({
+    state,
     isAppDir: false,
   })
 
@@ -50,7 +50,7 @@ export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
 
           <DevToolsIndicator
             state={state}
-            readyErrorsLength={readyErrors.length}
+            errorCount={totalErrorCount}
             setIsErrorOverlayOpen={setIsErrorOverlayOpen}
           />