dev error overlay: async boundary for original stack frame call #75718

gaojude · 2025-02-05T23:22:26Z

What?

When a page with an error loads, it initially displays a no-error state before switching to the error state a few seconds later, resulting in a bad user experience.

Particularly, if you have multiple errors, you will see intermediate stages while the source mapping is being resolved.
https://github.com/user-attachments/assets/90e66d7f-9cf2-4449-ad31-eec28f65d729

Why?

Stack frame request blocks the modal.

How?

Leverage use and Suspense boundary to only defer the rendering of the code frame that requires async data while keeping the sync rendering of other part of the UI.

Note that there is currently no loading UI design but I think this is good enough considering the loading state is usually pretty fast.

Comparison (with 3s throttle)

Before:

CleanShot 2025-02-05 at 19.41.14.mp4 (uploaded via Graphite)

After:

CleanShot 2025-02-05 at 19.39.13.mp4 (uploaded via Graphite)

Closes NDX-740

gaojude · 2025-02-05T23:22:45Z

dev error overlay: async boundary for original stack frame call #75718 👈 (View in Graphite)
canary

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

ijjk · 2025-02-05T23:27:19Z

Tests Passed

ztanner

I'm seeing a few weird things when paginating:

the feedback menu is occasionally covering the frame
we shouldn't have to show an empty state on subsequent pages, since they would already been loaded

CleanShot.2025-02-05.at.18.50.45.mp4

...client/components/react-dev-overlay/_experimental/internal/container/runtime-error/index.tsx

packages/next/src/client/components/react-dev-overlay/internal/helpers/get-error-by-type.ts

...t/src/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.ts

gaojude · 2025-02-06T03:45:48Z

I'm seeing a few weird things when paginating:

the feedback menu is occasionally covering the frame

we shouldn't have to show an empty state on subsequent pages, since they would already been loaded

CleanShot.2025-02-05.at.18.50.45.mp4

Fixed

eps1lon · 2025-02-06T10:53:54Z

So we are blocking the full codeframe and callstack? As a follow-up, we should render a codeframe skeleton first and the generated frames before we switch to the sourcemapped frames. That should be achievable with useDeferredValue(sourcemappedFrames, generatedFrames)

eps1lon

How does this look on Pages router with React 18? use doesn't exist in React 18 so I suspect this just throws? Or do we use the old overlay in 18?

packages/next/src/client/components/react-dev-overlay/internal/helpers/get-error-by-type.ts

test/development/acceptance-app/ReactRefreshLogBox.test.ts

eps1lon · 2025-02-06T10:56:33Z

...xperimental/internal/components/errors/error-overlay-pagination/error-overlay-pagination.tsx

+      startTransition(() => {
+        if (activeIdx > 0) {
+          onActiveIndexChange(Math.max(0, activeIdx - 1))
+        }
+      }),


Do we have any visual indicator right now that the transition is pending?

Do we have any visual indicator right now that the transition is pending?

Let's follow up on this if needed. My two cents is that this should be ready by the time the user clicks the tabs.

Lifts the style fix from #75718 into a separate PR. Fixes the feedback bar clipping the content: ![410278234-8a7d9d9e-b483-4019-bc8a-524e755b3dd7](https://github.com/user-attachments/assets/3dd90148-6835-4954-9341-ae10c3c14679) Co-authored-by: Jude Gao <jude.gao@vercel.com>

ijjk · 2025-02-06T18:24:25Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 02-05-dev_error_overlay_add_loading_state	Change
buildDuration	23.3s	20.7s	N/A
buildDurationCached	18.8s	16.4s	N/A
nodeModulesSize	393 MB	393 MB	⚠️ +46.8 kB
nextStartRea..uration (ms)	537ms	492ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 02-05-dev_error_overlay_add_loading_state	Change
5306-HASH.js gzip	54.2 kB	54.2 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.46 kB	5.46 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	240 B	242 B	N/A
main-HASH.js gzip	34.5 kB	34.5 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 02-05-dev_error_overlay_add_loading_state	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 02-05-dev_error_overlay_add_loading_state	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.59 kB	4.58 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.35 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 02-05-dev_error_overlay_add_loading_state	Change
_buildManifest.js gzip	748 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 02-05-dev_error_overlay_add_loading_state	Change
index.html gzip	523 B	524 B	N/A
link.html gzip	538 B	539 B	N/A
withRouter.html gzip	519 B	520 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 02-05-dev_error_overlay_add_loading_state	Change
edge-ssr.js gzip	130 kB	130 kB	N/A
page.js gzip	211 kB	211 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 02-05-dev_error_overlay_add_loading_state	Change
middleware-b..fest.js gzip	673 B	672 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 Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 02-05-dev_error_overlay_add_loading_state	Change
app-page-exp...dev.js gzip	394 kB	394 kB	⚠️ +290 B
app-page-exp..prod.js gzip	132 kB	132 kB	✓
app-page-tur..prod.js gzip	145 kB	145 kB	✓
app-page-tur..prod.js gzip	141 kB	141 kB	✓
app-page.run...dev.js gzip	381 kB	382 kB	⚠️ +278 B
app-page.run..prod.js gzip	128 kB	128 kB	✓
app-route-ex...dev.js gzip	39.3 kB	39.3 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	40.9 kB	40.9 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
dist_client_...dev.js gzip	356 B	356 B	✓
dist_client_...dev.js gzip	349 B	349 B	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.8 kB	11.8 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.9 kB	21.9 kB	✓
pages.runtim...dev.js gzip	31.5 kB	31.5 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	60.5 kB	60.5 kB	✓
Overall change	1.67 MB	1.67 MB	⚠️ +568 B

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 02-05-dev_error_overlay_add_loading_state	Change
0.pack gzip	2.11 MB	2.1 MB	N/A
index.pack gzip	74 kB	75.5 kB	⚠️ +1.5 kB
Overall change	74 kB	75.5 kB	⚠️ +1.5 kB

Diff details

Diff for main-HASH.js

Diff too large to display

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

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Commit: 07ab9f0

fix tests

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Feb 5, 2025

gaojude force-pushed the 02-05-dev_error_overlay_add_loading_state branch from db7dd40 to ff1a05b Compare February 6, 2025 00:35

gaojude requested review from devjiwonchoi, huozhi and ztanner February 6, 2025 00:41

gaojude changed the title ~~dev error overlay: add loading state~~ dev error overlay: add loading state for stack frame Feb 6, 2025

gaojude marked this pull request as ready for review February 6, 2025 00:42

ijjk added the tests label Feb 6, 2025

gaojude force-pushed the 02-05-dev_error_overlay_add_loading_state branch 5 times, most recently from 12fd134 to 504d06b Compare February 6, 2025 02:51

ztanner reviewed Feb 6, 2025

View reviewed changes

...client/components/react-dev-overlay/_experimental/internal/container/runtime-error/index.tsx Outdated Show resolved Hide resolved

ztanner reviewed Feb 6, 2025

View reviewed changes

packages/next/src/client/components/react-dev-overlay/internal/helpers/get-error-by-type.ts Outdated Show resolved Hide resolved

gaojude force-pushed the 02-05-dev_error_overlay_add_loading_state branch from 504d06b to b7b2851 Compare February 6, 2025 03:40

gaojude changed the title ~~dev error overlay: add loading state for stack frame~~ dev error overlay: adding async boundary for original stack frame call Feb 6, 2025

gaojude changed the title ~~dev error overlay: adding async boundary for original stack frame call~~ dev error overlay: async boundary for original stack frame call Feb 6, 2025

gaojude commented Feb 6, 2025

View reviewed changes

...t/src/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.ts Outdated Show resolved Hide resolved

gaojude force-pushed the 02-05-dev_error_overlay_add_loading_state branch from b7b2851 to 3629e1b Compare February 6, 2025 03:45

gaojude force-pushed the 02-05-dev_error_overlay_add_loading_state branch 4 times, most recently from 872fe64 to c7f4564 Compare February 6, 2025 06:01

eps1lon reviewed Feb 6, 2025

View reviewed changes

gaojude force-pushed the 02-05-dev_error_overlay_add_loading_state branch from c7f4564 to 6d31274 Compare February 6, 2025 13:11

ztanner mentioned this pull request Feb 6, 2025

[DevOverlay] fix style regression #75756

Merged

gaojude force-pushed the 02-05-dev_error_overlay_add_loading_state branch from 6d31274 to be4408d Compare February 6, 2025 18:17

gaojude mentioned this pull request Feb 6, 2025

[dev-overlay] Introduce motion to surface new errors #75734

Merged

devjiwonchoi approved these changes Feb 6, 2025

View reviewed changes

gaojude requested review from eps1lon and ztanner and removed request for eps1lon February 6, 2025 19:40

gaojude force-pushed the 02-05-dev_error_overlay_add_loading_state branch from be4408d to ec2df4b Compare February 10, 2025 18:14

gaojude added 9 commits February 11, 2025 03:20

improve loading of async stack frames

f0d8dc7

fix infinite loop

00f17c6

eager

727e49a

fix source stacks

46e5974

fix flicker

f448c7e

fix test again

6a2e439

fix tests

encapsulate util

e161969

dont catch

bc52c28

backward compat

07ab9f0

devjiwonchoi force-pushed the 02-05-dev_error_overlay_add_loading_state branch from ec2df4b to 07ab9f0 Compare February 10, 2025 18:21

gaojude merged commit 2aa2eaa into canary Feb 10, 2025
131 checks passed

gaojude deleted the 02-05-dev_error_overlay_add_loading_state branch February 10, 2025 19:47

eps1lon mentioned this pull request Feb 19, 2025

Consolidate next/link error tests #76214

Merged

github-actions bot added the locked label Feb 25, 2025

github-actions bot locked as resolved and limited conversation to collaborators Feb 25, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dev error overlay: async boundary for original stack frame call #75718

dev error overlay: async boundary for original stack frame call #75718

gaojude commented Feb 5, 2025 •

edited

Loading

gaojude commented Feb 5, 2025

ijjk commented Feb 5, 2025 •

edited

Loading

ztanner left a comment

gaojude commented Feb 6, 2025

eps1lon commented Feb 6, 2025

eps1lon left a comment •

edited

Loading

eps1lon Feb 6, 2025

gaojude Feb 6, 2025

ijjk commented Feb 6, 2025 •

edited

Loading

dev error overlay: async boundary for original stack frame call #75718

dev error overlay: async boundary for original stack frame call #75718

Conversation

gaojude commented Feb 5, 2025 • edited Loading

What?

Why?

How?

Comparison (with 3s throttle)

gaojude commented Feb 5, 2025

ijjk commented Feb 5, 2025 • edited Loading

Tests Passed

ztanner left a comment

Choose a reason for hiding this comment

gaojude commented Feb 6, 2025

eps1lon commented Feb 6, 2025

eps1lon left a comment • edited Loading

Choose a reason for hiding this comment

eps1lon Feb 6, 2025

Choose a reason for hiding this comment

gaojude Feb 6, 2025

Choose a reason for hiding this comment

ijjk commented Feb 6, 2025 • edited Loading

Stats from current PR

gaojude commented Feb 5, 2025 •

edited

Loading

ijjk commented Feb 5, 2025 •

edited

Loading

eps1lon left a comment •

edited

Loading

ijjk commented Feb 6, 2025 •

edited

Loading