Use ErrorOverlayLayout in Errors component

[devjiwonchoi]

This PR modified the Errors (Runtime Error component) to use the shared ErrorOverlayLayout.

[devjiwonchoi]

• Add temporary Geist theme #74153
• Use ErrorOverlayLayout in Errors component #74107 👈 (View in Graphite)
• Port ToolButtonsGroup #74099
• Port LeftIcon RightIcon from ErrorPagination #74098
• Port ErrorPagination #74097
• Move ErrorIndicator to separate file #74090
• Rename root-layout-missing-tags-error.tsx to pascal case #74089
• Create ErrorOverlay component #74073
• canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

[huozhi]

The UI for pagination and tool buttons group will look different as this is temporarily relocating the components, and it is understandable as those are the ones that need to be placed outside of the overlay.

this feels not like the right direction we should go, it shouldn't effect the UI layout or styling while refactoring

[ijjk]

Tests Passed

[ijjk]

Stats from current PR

Default Build

General

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
buildDuration	25.1s	22s	N/A
buildDurationCached	21.1s	18.7s	N/A
nodeModulesSize	416 MB	416 MB	N/A
nextStartRea..uration (ms)	582ms	584ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
1187-HASH.js gzip	52.4 kB	52.4 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.36 kB	5.36 kB	N/A
bccd1874-HASH.js gzip	52.8 kB	52.8 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	232 B	235 B	N/A
main-HASH.js gzip	34.1 kB	34.1 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.49 kB	4.49 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
_buildManifest.js gzip	749 B	746 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
index.html gzip	522 B	524 B	N/A
link.html gzip	537 B	537 B	✓
withRouter.html gzip	518 B	520 B	N/A
Overall change	537 B	537 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
edge-ssr.js gzip	129 kB	129 kB	N/A
page.js gzip	206 kB	206 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
middleware-b..fest.js gzip	670 B	665 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.3 kB	31.3 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	359 kB	359 kB	N/A
app-page-exp..prod.js gzip	129 kB	129 kB	✓
app-page-tur..prod.js gzip	142 kB	142 kB	✓
app-page-tur..prod.js gzip	137 kB	137 kB	✓
app-page.run...dev.js gzip	348 kB	347 kB	N/A
app-page.run..prod.js gzip	125 kB	125 kB	✓
app-route-ex...dev.js gzip	37.5 kB	37.5 kB	✓
app-route-ex..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	39.2 kB	39.2 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.7 kB	21.7 kB	✓
pages.runtim...dev.js gzip	27.5 kB	27.5 kB	✓
pages.runtim..prod.js gzip	21.7 kB	21.7 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	1.73 MB	1.73 MB	✓

build cache

	vercel/next.js canary	vercel/next.js 12-19-use_erroroverlaylayout_in_errors_component	Change
0.pack gzip	2.08 MB	2.08 MB	N/A
index.pack gzip	73.3 kB	73.4 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page.runtime.dev.js

failed to diff

Commit: b4419bb

[devjiwonchoi]

Merge activity

• Dec 19, 3:48 PM EST: A user started a stack merge that includes this pull request via Graphite.
• Dec 19, 4:16 PM EST: Graphite couldn't merge this pull request because a downstack PR Port ErrorPagination #74097 failed to merge.
• Dec 20, 9:12 AM EST: A user started a stack merge that includes this pull request via Graphite.
• Dec 20, 10:13 AM EST: Graphite rebased this pull request as part of a merge.
• Dec 20, 10:46 AM EST: Graphite couldn't merge this PR because it was not satisfying all requirements (Failed CI: 'thank you, next', 'Run devlow benchmarks (--turbopack=true, --scenario=heavy-npm-deps-build --page=homepage) / build', 'test integration (8/13) / build').
• Dec 20, 11:28 AM EST: A user merged this pull request with Graphite.