Display only one hydration error when there's few in error overlay

[huozhi]

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

Before

Mutiple hydration errors are displayed

Closes NEXT-2315

[ijjk]

Failing test suites

Commit: 3a8239f

pnpm test-start test/e2e/app-dir/navigation/navigation.test.ts

• app dir - navigation > navigation between pages and app > should not continously initiate a mpa navigation to the same URL when router state changes

Expand output

● app dir - navigation › navigation between pages and app › should not continously initiate a mpa navigation to the same URL when router state changes

page.waitForSelector: Timeout 60000ms exceeded.
Call log:
  - waiting for locator('#link-to-slow-page')
  -   locator resolved to visible <a href="/slow-page" id="link-to-slow-page">To /slow-page</a>

  421 |     return this.chain(() => {
  422 |       return page
> 423 |         .waitForSelector(selector, { timeout, state: 'attached' })
      |          ^
  424 |         .then(async (el) => {
  425 |           // it seems selenium waits longer and tests rely on this behavior
  426 |           // so we wait for the load event fire before returning

  at waitForSelector (lib/browsers/playwright.ts:423:10)

Read more about building and testing Next.js in contributing.md.

[ijjk]

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
buildDuration	13.9s	13.8s	N/A
buildDurationCached	7.8s	6.3s	N/A
nodeModulesSize	197 MB	197 MB	⚠️ +6.34 kB
nextStartRea..uration (ms)	411ms	407ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
1068-HASH.js gzip	30.3 kB	30.3 kB	N/A
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	N/A
4944-HASH.js gzip	5.04 kB	5.03 kB	N/A
8423.HASH.js gzip	181 B	181 B	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	242 B	N/A
main-HASH.js gzip	32.2 kB	32.1 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	47.1 kB	47.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
_app-HASH.js gzip	196 B	196 B	✓
_error-HASH.js gzip	184 B	183 B	N/A
amp-HASH.js gzip	503 B	504 B	N/A
css-HASH.js gzip	323 B	324 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.51 kB	N/A
edge-ssr-HASH.js gzip	258 B	259 B	N/A
head-HASH.js gzip	353 B	351 B	N/A
hooks-HASH.js gzip	370 B	370 B	✓
image-HASH.js gzip	4.21 kB	4.2 kB	N/A
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.68 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	313 B	314 B	N/A
script-HASH.js gzip	386 B	385 B	N/A
withRouter-HASH.js gzip	309 B	311 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	931 B	931 B	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
_buildManifest.js gzip	485 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
index.html gzip	528 B	527 B	N/A
link.html gzip	540 B	540 B	✓
withRouter.html gzip	523 B	522 B	N/A
Overall change	540 B	540 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
edge-ssr.js gzip	94.9 kB	94.9 kB	N/A
page.js gzip	3.06 kB	3.05 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
middleware-b..fest.js gzip	627 B	629 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	25.4 kB	25.4 kB	✓
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	26.4 kB	26.4 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
app-page-exp...dev.js gzip	170 kB	170 kB	✓
app-page-exp..prod.js gzip	96.5 kB	96.5 kB	✓
app-page-tur..prod.js gzip	98.3 kB	98.3 kB	✓
app-page-tur..prod.js gzip	92.8 kB	92.8 kB	✓
app-page.run...dev.js gzip	151 kB	151 kB	✓
app-page.run..prod.js gzip	91.3 kB	91.3 kB	✓
app-route-ex...dev.js gzip	22 kB	22 kB	✓
app-route-ex..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	14.7 kB	14.7 kB	✓
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	✓
app-route.ru..prod.js gzip	14.7 kB	14.7 kB	✓
pages-api-tu..prod.js gzip	9.5 kB	9.5 kB	✓
pages-api.ru...dev.js gzip	9.78 kB	9.78 kB	✓
pages-api.ru..prod.js gzip	9.5 kB	9.5 kB	✓
pages-turbo...prod.js gzip	22.3 kB	22.3 kB	✓
pages.runtim...dev.js gzip	23 kB	23 kB	✓
pages.runtim..prod.js gzip	22.3 kB	22.3 kB	✓
server.runti..prod.js gzip	50.5 kB	50.5 kB	✓
Overall change	950 kB	950 kB	✓

build cache

	vercel/next.js canary	vercel/next.js dx/merge-hydration-errors	Change
0.pack gzip	1.56 MB	1.55 MB	N/A
index.pack gzip	105 kB	104 kB	N/A
Overall change	0 B	0 B	✓

Commit: 3a8239f