[DevOverlay] Add Runtime Error CodeFrame

[devjiwonchoi]

This PR added style for Runtime Error Code Frame. The file icon will follow up and will be replaced with correct icons (e.g. js, ts, etc.)

Note

Does not fully align with Figma due to restrictions on how @babel/code-frame handles colors and spacing.

Light

Dark

Closes NDX-650

[devjiwonchoi]

• [DevOverlay] Add Runtime Error CodeFrame #74682 👈 (View in Graphite)
• [DevOverlay] Add Call Stack #74658
• [DevOverlay] Apply Turbopack Styling #74636
• [DevOverlay] Decouple Dialog component from Error Overlay #74638
• [DevOverlay] Fix style details and correctly pass version info #74606
• [DevOverlay] Add Next.js version staleness indicator #74601
• [DevOverlay] Add Pagination #74583
• [DevOverlay] Floating Header and Bottom Stacks #74581
• [DevOverlay] Add Docs Link Button #74560
• [DevOverlay] Add Toolbar #74555
• [DevOverlay] Add error type label #74543
• [DevOverlay] Add error message #74541
• canary

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

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_codeframe	Change
buildDuration	43.3s	40.3s	N/A
buildDurationCached	38.5s	32.5s	N/A
nodeModulesSize	417 MB	417 MB	⚠️ +175 kB
nextStartRea..uration (ms)	1s	1.1s	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_codeframe	Change
5306-HASH.js gzip	53.3 kB	53.3 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.44 kB	5.44 kB	N/A
bccd1874-HASH.js gzip	53 kB	53 kB	✓
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	241 B	243 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	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_codeframe	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 01-09-_devoverlay_add_codeframe	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.57 kB	4.57 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 01-09-_devoverlay_add_codeframe	Change
_buildManifest.js gzip	749 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_codeframe	Change
index.html gzip	522 B	521 B	N/A
link.html gzip	538 B	535 B	N/A
withRouter.html gzip	518 B	518 B	✓
Overall change	518 B	518 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_codeframe	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	207 kB	207 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_codeframe	Change
middleware-b..fest.js gzip	671 B	667 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.2 kB	31.2 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_codeframe	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	368 kB	369 kB	⚠️ +1.09 kB
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	138 kB	138 kB	✓
app-page.run...dev.js gzip	356 kB	357 kB	⚠️ +1.11 kB
app-page.run..prod.js gzip	126 kB	126 kB	✓
app-route-ex...dev.js gzip	37.6 kB	37.6 kB	✓
app-route-ex..prod.js gzip	25.6 kB	25.6 kB	✓
app-route-tu..prod.js gzip	25.6 kB	25.6 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	2.46 MB	2.46 MB	⚠️ +2.2 kB

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_codeframe	Change
0.pack gzip	2.09 MB	2.09 MB	⚠️ +651 B
index.pack gzip	76.1 kB	74.4 kB	N/A
Overall change	2.09 MB	2.09 MB	⚠️ +651 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: d6185d8

[ijjk]

Failing test suites

Commit: d6185d8

pnpm test test/integration/clean-distdir/test/index.test.js

• Cleaning distDir > production mode > should clean up .next before build start

Expand output

● Cleaning distDir › production mode › should clean up .next before build start

thrown: "Exceeded timeout of 60000 ms for a test.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  25 |
  26 | const runTests = () => {
> 27 |   it('should clean up .next before build start', async () => {
     |   ^
  28 |     await checkFileWrite(false)
  29 |   })
  30 | }

  at it (integration/clean-distdir/test/index.test.js:27:3)
  at runTests (integration/clean-distdir/test/index.test.js:40:7)
  at integration/clean-distdir/test/index.test.js:33:56
  at Object.describe (integration/clean-distdir/test/index.test.js:32:1)

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

[eps1lon]

does the yellow on white (e.g. on new Error() fulfill AAA contrast ratio (see https://webaim.org/resources/contrastchecker/#:~:text=WCAG%20Level%20AAA%20requires%20a,4.5%3A1%20for%20large%20text.)?

Feels like it's not.

[graphite-app]

Merge activity

• Jan 10, 12:14 PM EST: Graphite rebased this pull request after merging its parent, because this pull request is set to merge when ready.

[devjiwonchoi]

does the yellow on white (e.g. on new Error() fulfill AAA contrast ratio

Great point, yeah it doesn't pass. Will follow up.