[error overlay] move missing tags error inside error overlay

[huozhi]

What

• Move missing html tags error into error overlay, from outside we don't have to manually determine when to render a dummy component with runtime missing tag error or error overlay.
• Add brackets <> to the html tags in the error

Why

In #62815, we're having throwing an missing required error, this will trigger another runtime error. Then when error overlay caught it through error event listener, it will render it as an unhandled runtime error:

You will see the below message in the overlay.

Unhandled Runtime Error
Error: The following tas are missing...

[Error stack]

This error message will bring a message that the error is happened on client during runtime, but actually we already know that is a user side mistake which doesn't have a error trace. This couldn't hmr as you fix the error as well.

This PR moves the rendering into error overlay that we're aware of the errors and can render the correct html on client, with the html tag attached with error id and body wrapping the error overlay. We tell overlay that there're missing tags through props, let it handle everything inside.

It can also hmr once you fix the error. One drawback is that when you re-introduce the error, it might trigger react DOM updates exception (Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.) instead of the "missing tags" message again. Besides that the HMR works properly.

Closes NEXT-2741

[ijjk]

Tests Passed

[ijjk]

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
buildDuration	13.7s	13.7s	N/A
buildDurationCached	7.3s	6s	N/A
nodeModulesSize	198 MB	198 MB	⚠️ +19.9 kB
nextStartRea..uration (ms)	428ms	430ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
2453-HASH.js gzip	30.5 kB	30.5 kB	N/A
3304.HASH.js gzip	181 B	181 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	N/A
8299-HASH.js gzip	5.04 kB	5.04 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	242 B	242 B	✓
main-HASH.js gzip	32.2 kB	32.2 kB	N/A
webpack-HASH.js gzip	1.68 kB	1.68 kB	N/A
Overall change	45.6 kB	45.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
_app-HASH.js gzip	196 B	197 B	N/A
_error-HASH.js gzip	184 B	184 B	✓
amp-HASH.js gzip	505 B	505 B	✓
css-HASH.js gzip	324 B	325 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	258 B	258 B	✓
head-HASH.js gzip	352 B	352 B	✓
hooks-HASH.js gzip	370 B	371 B	N/A
image-HASH.js gzip	4.21 kB	4.21 kB	✓
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.67 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	314 B	312 B	N/A
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	6.57 kB	6.57 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
_buildManifest.js gzip	481 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
index.html gzip	529 B	528 B	N/A
link.html gzip	541 B	540 B	N/A
withRouter.html gzip	524 B	523 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
edge-ssr.js gzip	95.1 kB	95.1 kB	N/A
page.js gzip	3.06 kB	3.07 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
middleware-b..fest.js gzip	626 B	624 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	25.5 kB	25.5 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	990 B	990 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	96.5 kB	96.5 kB	✓
app-page-tur..prod.js gzip	98.2 kB	98.2 kB	✓
app-page-tur..prod.js gzip	92.7 kB	92.7 kB	✓
app-page.run...dev.js gzip	149 kB	149 kB	✓
app-page.run..prod.js gzip	91.2 kB	91.2 kB	✓
app-route-ex...dev.js gzip	21.3 kB	21.3 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.8 kB	14.8 kB	✓
app-route.ru...dev.js gzip	20.9 kB	20.9 kB	✓
app-route.ru..prod.js gzip	14.8 kB	14.8 kB	✓
pages-api-tu..prod.js gzip	9.52 kB	9.52 kB	✓
pages-api.ru...dev.js gzip	9.8 kB	9.8 kB	✓
pages-api.ru..prod.js gzip	9.52 kB	9.52 kB	✓
pages-turbo...prod.js gzip	22.3 kB	22.3 kB	✓
pages.runtim...dev.js gzip	22.9 kB	22.9 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	947 kB	947 kB	✓

build cache

	vercel/next.js canary	vercel/next.js move-error-render-insode-overlay	Change
0.pack gzip	1.56 MB	1.56 MB	N/A
index.pack gzip	106 kB	105 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for middleware.js

Diff too large to display

Diff for 2453-HASH.js

Diff too large to display

Commit: c5f1cb8