Display only one hydration error when there's few in error overlay (#62448)

## What & Why

When there's a bad nesting HTML tags occurred, we want to show the
hydration mismatch with the warning of bad nesting.

Multiple hydration errors emitted from `onRecoverableError` as react is
trying re-render on client, and few more errors could throw from
different places. But for alert the issue, we only need to know one
hydration mismatch error instead of


### After
Show the toast with error number first and only show one hydration error
when you open
<img width="200"
src="https://github.com/vercel/next.js/assets/4800338/b57e73b9-60a6-4f09-9b71-e052121666f2"><img
width="500"
src="https://github.com/vercel/next.js/assets/4800338/9d409422-d513-4da0-ad6c-002c1ba7c497">

### Before

Mutiple hydration errors are displayed
<img width="200"
src="https://github.com/vercel/next.js/assets/4800338/8d6696a8-30de-496f-a9c4-bafb7d1f1d4c"><img
width="500"
src="https://github.com/vercel/next.js/assets/4800338/bc72bea9-85be-4bb2-b007-b88e655ade4e">


Closes NEXT-2315

Author: huozhi

packages/next/src/client/components/is-hydration-error.ts

@@ -0,0 +1,8 @@
+import isError from '../../lib/is-error'
+
+const hydrationErrorRegex =
+  /hydration failed|while hydrating|content does not match|did not match/i
+
+export function isHydrationError(error: unknown): boolean {
+  return isError(error) && hydrationErrorRegex.test(error.message)
+}

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx

@@ -235,7 +235,10 @@ export function Errors({
             >
               <small>
                 <span>{activeIdx + 1}</span> of{' '}
-                <span>{readyErrors.length}</span> unhandled error
+                <span data-nextjs-dialog-header-total-count>
+                  {readyErrors.length}
+                </span>{' '}
+                unhandled error
                 {readyErrors.length < 2 ? '' : 's'}
               </small>
               {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-error-handler.ts

@@ -4,23 +4,18 @@ import {
   hydrationErrorComponentStack,
 } from './hydration-error-info'
 import { isNextRouterError } from '../../../is-next-router-error'
+import { isHydrationError } from '../../../is-hydration-error'
 
 export type ErrorHandler = (error: Error) => void
 
-function isHydrationError(error: Error): boolean {
-  return (
-    error.message.match(/(hydration|content does not match|did not match)/i) !=
-    null
-  )
-}
-
 if (typeof window !== 'undefined') {
   try {
     // Increase the number of stack frames on the client
     Error.stackTraceLimit = 50
   } catch {}
 }
 
+let hasHydrationError = false
 const errorQueue: Array<Error> = []
 const rejectionQueue: Array<Error> = []
 const errorHandlers: Array<ErrorHandler> = []
@@ -46,6 +41,7 @@ if (typeof window !== 'undefined') {
       return
     }
 
+    const isCausedByHydrationFailure = isHydrationError(error)
     if (
       isHydrationError(error) &&
       !error.message.includes(
@@ -66,7 +62,13 @@ if (typeof window !== 'undefined') {
     }
 
     const e = error
-    errorQueue.push(e)
+    // Only queue one hydration every time
+    if (isCausedByHydrationFailure) {
+      if (!hasHydrationError) {
+        errorQueue.push(e)
+      }
+      hasHydrationError = true
+    }
     for (const handler of errorHandlers) {
       handler(e)
     }

test/development/acceptance-app/hydration-error.test.ts

@@ -276,4 +276,45 @@ describe('Error overlay for hydration errors', () => {
 
     await cleanup()
   })
+
+  it('should only show one hydration error when bad nesting happened', async () => {
+    const { cleanup, session, browser } = await sandbox(
+      next,
+      new Map([
+        [
+          'app/page.js',
+          outdent`
+            'use client'
+
+            export default function Page() {
+              return (
+                <p>
+                  <p>Nested p tags</p>
+                </p>
+              )
+            }
+          `,
+        ],
+      ])
+    )
+    // const browser = await next.browser('/hydration-mismatch/bad-nesting')
+    // await waitForAndOpenRuntimeError(browser)
+    await session.waitForAndOpenRuntimeError()
+    expect(await session.hasRedbox()).toBe(true)
+
+    const totalErrorCount = await browser
+      .elementByCss('[data-nextjs-dialog-header-total-count]')
+      .text()
+    expect(totalErrorCount).toBe('1')
+
+    const description = await session.getRedboxDescription()
+    expect(description).toContain(
+      'Error: Hydration failed because the initial UI does not match what was rendered on the server.'
+    )
+    expect(description).toContain(
+      'Warning: Expected server HTML to contain a matching <p> in <p>.'
+    )
+
+    await cleanup()
+  })
 })

test/development/acceptance-app/rsc-runtime-errors.test.ts

@@ -8,23 +8,12 @@ import {
   getVersionCheckerText,
   hasRedbox,
   retry,
-  shouldRunTurboDevTest,
 } from 'next-test-utils'
 
 createNextDescribe(
   'Error overlay - RSC runtime errors',
   {
     files: new FileRef(path.join(__dirname, 'fixtures', 'rsc-runtime-errors')),
-    packageJson: {
-      scripts: {
-        build: 'next build',
-        dev: `next ${shouldRunTurboDevTest() ? 'dev --turbo' : 'dev'}`,
-        start: 'next start',
-      },
-    },
-    installCommand: 'pnpm i',
-    startCommand: (global as any).isNextDev ? 'pnpm dev' : 'pnpm start',
-    buildCommand: 'pnpm build',
   },
   ({ next }) => {
     it('should show runtime errors if invalid client API from node_modules is executed', async () => {

test/lib/development-sandbox.ts

@@ -1,11 +1,13 @@
 import {
+  hasErrorToast,
   getRedboxComponentStack,
   getRedboxDescription,
   getRedboxHeader,
   getRedboxSource,
   getVersionCheckerText,
   hasRedbox,
   waitFor,
+  waitForAndOpenRuntimeError,
 } from './next-test-utils'
 import webdriver from './next-webdriver'
 import { NextInstance } from './next-modes/base'
@@ -111,14 +113,11 @@ export async function sandbox(
       async hasRedbox() {
         return hasRedbox(browser)
       },
+      async waitForAndOpenRuntimeError() {
+        return waitForAndOpenRuntimeError(browser)
+      },
       async hasErrorToast() {
-        return browser.eval(() => {
-          return Boolean(
-            Array.from(document.querySelectorAll('nextjs-portal')).find((p) =>
-              p.shadowRoot.querySelector('[data-nextjs-toast]')
-            )
-          )
-        })
+        return Boolean(await hasErrorToast(browser))
       },
       async getRedboxDescription() {
         return getRedboxDescription(browser)
@@ -135,9 +134,6 @@ export async function sandbox(
       async getRedboxComponentStack() {
         return getRedboxComponentStack(browser)
       },
-      async waitForAndOpenRuntimeError() {
-        return browser.waitForElementByCss('[data-nextjs-toast]').click()
-      },
       async getVersionCheckerText() {
         return getVersionCheckerText(browser)
       },

test/lib/next-test-utils.ts

@@ -755,6 +755,22 @@ export async function hasRedbox(browser: BrowserInterface): Promise<boolean> {
   return result
 }
 
+export async function hasErrorToast(
+  browser: BrowserInterface
+): Promise<boolean> {
+  return browser.eval(() => {
+    return Boolean(
+      Array.from(document.querySelectorAll('nextjs-portal')).find((p) =>
+        p.shadowRoot.querySelector('[data-nextjs-toast]')
+      )
+    )
+  })
+}
+
+export async function waitForAndOpenRuntimeError(browser: BrowserInterface) {
+  return browser.waitForElementByCss('[data-nextjs-toast]').click()
+}
+
 export async function getRedboxHeader(browser: BrowserInterface) {
   return retry(
     () => {