DX: Reduce devtools clutter by batching stack frame requests #75557

gaojude · 2025-02-01T13:51:40Z

What?

Minimizes unnecessary network requests in the development overlay by batching stack frame resolutions.

Why?

Instead of sending individual HTTP requests for each stack frame, this change consolidates them into a single POST request. This helps declutter the network tab in browser devtools, especially in cases where multiple failed requests occur due to server-side errors.

How?

Introduces a new endpoint /__nextjs_original-stack-frames to handle batched stack frame requests
Updates Webpack and Turbopack middlewares to support batched resolutions
Refactors stack frame processing to work with batched responses

Closes NDX-500

gaojude · 2025-02-01T13:52:04Z

DX: Reduce devtools clutter by batching stack frame requests #75557 👈 (View in Graphite)
Clean-up: remove unused errorMessage param in stack frames #75554 : 1 other dependent PR (#75555 )
refactor: decouple getOriginalStackFrame from endpoint #75553
Unfork stack frame utils #75532
canary

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

ijjk · 2025-02-03T07:07:07Z

Tests Passed

ijjk · 2025-02-03T18:54:10Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js batch-stack-frame-api	Change
buildDuration	17.6s	14.4s	N/A
buildDurationCached	13.5s	11.2s	N/A
nodeModulesSize	391 MB	391 MB	⚠️ +15.7 kB
nextStartRea..uration (ms)	409ms	412ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js batch-stack-frame-api	Change
5306-HASH.js gzip	54 kB	54 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	52.9 kB	52.9 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	241 B	242 B	N/A
main-HASH.js gzip	34.5 kB	34.4 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 batch-stack-frame-api	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 batch-stack-frame-api	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 batch-stack-frame-api	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 batch-stack-frame-api	Change
index.html gzip	524 B	524 B	✓
link.html gzip	539 B	538 B	N/A
withRouter.html gzip	520 B	520 B	✓
Overall change	1.04 kB	1.04 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js batch-stack-frame-api	Change
edge-ssr.js gzip	129 kB	129 kB	N/A
page.js gzip	210 kB	210 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js batch-stack-frame-api	Change
middleware-b..fest.js gzip	669 B	666 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 batch-stack-frame-api	Change
app-page-exp...dev.js gzip	385 kB	385 kB	N/A
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	372 kB	372 kB	N/A
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.8 kB	40.8 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.2 kB	60.2 kB	✓
Overall change	895 kB	895 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js batch-stack-frame-api	Change
0.pack gzip	2.1 MB	2.1 MB	N/A
index.pack gzip	75.4 kB	76.1 kB	⚠️ +751 B
Overall change	75.4 kB	76.1 kB	⚠️ +751 B

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: 4377bfd

eps1lon

I'd assume that network overhead is negligible for a local dev server. It was really about not cluttering the network tab in browser devtools. Especially when we have bugs on the server that result in 10+ failed requests.

Tests are failing though and this shouldn't affect tests.

vercel · 2025-02-03T23:20:26Z

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @huozhi:

packages/next/src/server/config.ts

eps1lon

This is better. I'm still seeing two identical requests though e.g. p next dev test/e2e/app-dir/server-source-maps/fixtures/default and http://localhost:3000/ssr-throw

gaojude · 2025-02-04T14:07:03Z

This is better. I'm still seeing two identical requests though e.g. p next dev test/e2e/app-dir/server-source-maps/fixtures/default and http://localhost:3000/ssr-throw

Will follow up

gaojude · 2025-02-04T15:40:41Z

This is better. I'm still seeing two identical requests though e.g. p next dev test/e2e/app-dir/server-source-maps/fixtures/default and http://localhost:3000/ssr-throw

Turns out this issue is not reproducible with new dev overlay. The cause of the double firing is due to the useEffect reacting to an unstable errors https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx#L167, which does not exist in the new version.

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

gaojude changed the title ~~works for webpack~~ feat: batch original stack frame requests Feb 1, 2025

This was referenced Feb 1, 2025

Unfork stack frame utils #75532

Merged

refactor: decouple getOriginalStackFrame from endpoint #75553

Merged

Clean-up: remove unused errorMessage param in stack frames #75554

Merged

gaojude marked this pull request as ready for review February 1, 2025 13:52

gaojude mentioned this pull request Feb 1, 2025

works for webpack #75555

Closed

gaojude mentioned this pull request Feb 1, 2025

feat: batch original stack frame requests in turbopack overlay #75556

Closed

gaojude force-pushed the 02-01-error_msg_is_unused branch from 6c81215 to 4d61b5a Compare February 1, 2025 14:02

gaojude force-pushed the batch-stack-frame-api branch from d0c5c6f to b54a9c1 Compare February 1, 2025 14:02

gaojude force-pushed the 02-01-error_msg_is_unused branch from 4d61b5a to 0a94da9 Compare February 3, 2025 16:42

gaojude force-pushed the batch-stack-frame-api branch from b54a9c1 to 0deeeb3 Compare February 3, 2025 16:42

gaojude force-pushed the 02-01-error_msg_is_unused branch from 0a94da9 to 8749ab9 Compare February 3, 2025 16:55

gaojude force-pushed the batch-stack-frame-api branch from 0deeeb3 to b799b50 Compare February 3, 2025 16:55

gaojude changed the title ~~feat: batch original stack frame requests~~ Perf: batch original stack frame requests Feb 3, 2025

eps1lon reviewed Feb 3, 2025

View reviewed changes

gaojude force-pushed the batch-stack-frame-api branch from b799b50 to 056186b Compare February 3, 2025 23:20

ijjk added create-next-app Related to our CLI tool for quickly starting a new Next.js application. tests Turbopack Related to Turbopack with Next.js. labels Feb 3, 2025

gaojude changed the base branch from 02-01-error_msg_is_unused to canary February 3, 2025 23:20

gaojude force-pushed the batch-stack-frame-api branch from 056186b to df72395 Compare February 3, 2025 23:43

gaojude changed the base branch from canary to 02-01-error_msg_is_unused February 3, 2025 23:43

gaojude force-pushed the batch-stack-frame-api branch from df72395 to 9f296c3 Compare February 4, 2025 00:09

gaojude changed the title ~~Perf: batch original stack frame requests~~ Perf: Reduce devtools clutter by batching stack frame requests Feb 4, 2025

gaojude changed the title ~~Perf: Reduce devtools clutter by batching stack frame requests~~ DX: Reduce devtools clutter by batching stack frame requests Feb 4, 2025

gaojude requested a review from eps1lon February 4, 2025 00:12

Base automatically changed from 02-01-error_msg_is_unused to canary February 4, 2025 03:19

eps1lon approved these changes Feb 4, 2025

View reviewed changes

single api

4377bfd

gaojude force-pushed the batch-stack-frame-api branch from 9f296c3 to 4377bfd Compare February 4, 2025 14:40

gaojude merged commit 65a68b6 into canary Feb 4, 2025
131 checks passed

gaojude deleted the batch-stack-frame-api branch February 4, 2025 15:40

chargome mentioned this pull request Feb 5, 2025

[next] Update stackframe resolving in dev mode getsentry/sentry-javascript#15308

Closed

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DX: Reduce devtools clutter by batching stack frame requests #75557

DX: Reduce devtools clutter by batching stack frame requests #75557

gaojude commented Feb 1, 2025 •

edited

Loading

gaojude commented Feb 1, 2025 •

edited

Loading

ijjk commented Feb 3, 2025 •

edited

Loading

ijjk commented Feb 3, 2025 •

edited

Loading

eps1lon left a comment

vercel bot commented Feb 3, 2025

eps1lon left a comment

gaojude commented Feb 4, 2025

gaojude commented Feb 4, 2025 •

edited

Loading

DX: Reduce devtools clutter by batching stack frame requests #75557

DX: Reduce devtools clutter by batching stack frame requests #75557

Conversation

gaojude commented Feb 1, 2025 • edited Loading

What?

Why?

How?

gaojude commented Feb 1, 2025 • edited Loading

ijjk commented Feb 3, 2025 • edited Loading

Tests Passed

ijjk commented Feb 3, 2025 • edited Loading

Stats from current PR

eps1lon left a comment

Choose a reason for hiding this comment

vercel bot commented Feb 3, 2025

eps1lon left a comment

Choose a reason for hiding this comment

gaojude commented Feb 4, 2025

gaojude commented Feb 4, 2025 • edited Loading

gaojude commented Feb 1, 2025 •

edited

Loading

gaojude commented Feb 1, 2025 •

edited

Loading

ijjk commented Feb 3, 2025 •

edited

Loading

ijjk commented Feb 3, 2025 •

edited

Loading

gaojude commented Feb 4, 2025 •

edited

Loading