Collapse sequences of call stack frames from React and Next.js in the error overlay

[hanneslund]

Sequences of call stack frames from React or Next.js are collapsed, most of the time these just adds noise to the error overlay. The collapsed stack frames can be expanded though by clicking them.

Adds the package of the stack frame to the '/__nextjs_original-stack-frame' response, so we can figure out if the stack frame is from React/Next.js in the error overlay.

This was inspired by replay.io which has a similar collapsing.

View before/after

Before

After

Another error, React expanded

Bug

• Related issues linked using fixes #number
• Integration tests added
• Errors have a helpful link attached, see contributing.md

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• e2e tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have a helpful link attached, see contributing.md

Documentation / Examples

• Make sure the linting passes by running pnpm build && pnpm lint
• The "examples guidelines" are followed from our contributing doc

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	hanneslund/next.js group-callstack-by-framework	Change
buildDuration	47s	44.5s	-2.5s
buildDurationCached	11.7s	12s	⚠️ +253ms
nodeModulesSize	95.1 MB	95.1 MB	✓
nextStartRea..uration (ms)	371ms	328ms	-43ms

Client Bundles (main, webpack)

	vercel/next.js canary	hanneslund/next.js group-callstack-by-framework	Change
152-HASH.js gzip	64.5 kB	64.5 kB	✓
53.HASH.js gzip	182 B	182 B	✓
main-app-HASH.js gzip	205 B	205 B	✓
main-HASH.js gzip	79.2 kB	79.2 kB	✓
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	146 kB	146 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	hanneslund/next.js group-callstack-by-framework	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	hanneslund/next.js group-callstack-by-framework	Change
_app-HASH.js gzip	192 B	192 B	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	484 B	484 B	✓
css-HASH.js gzip	804 B	804 B	✓
dynamic-HASH.js gzip	2.27 kB	2.27 kB	✓
edge-ssr-HASH.js gzip	255 B	255 B	✓
head-HASH.js gzip	827 B	827 B	✓
hooks-HASH.js gzip	848 B	848 B	✓
image-HASH.js gzip	4.3 kB	4.3 kB	✓
index-HASH.js gzip	252 B	252 B	✓
link-HASH.js gzip	2.69 kB	2.69 kB	✓
routerDirect..HASH.js gzip	782 B	782 B	✓
script-HASH.js gzip	857 B	857 B	✓
withRouter-HASH.js gzip	781 B	781 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.6 kB	15.6 kB	✓

Client Build Manifests

	vercel/next.js canary	hanneslund/next.js group-callstack-by-framework	Change
_buildManifest.js gzip	482 B	482 B	✓
Overall change	482 B	482 B	✓

Rendered Page Sizes

	vercel/next.js canary	hanneslund/next.js group-callstack-by-framework	Change
index.html gzip	489 B	489 B	✓
link.html gzip	504 B	504 B	✓
withRouter.html gzip	485 B	485 B	✓
Overall change	1.48 kB	1.48 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	hanneslund/next.js group-callstack-by-framework	Change
edge-ssr.js gzip	110 kB	110 kB	✓
page.js gzip	98.4 kB	98.4 kB	✓
Overall change	209 kB	209 kB	✓

Middleware size

	vercel/next.js canary	hanneslund/next.js group-callstack-by-framework	Change
middleware-b..fest.js gzip	582 B	582 B	✓
middleware-r..fest.js gzip	145 B	145 B	✓
middleware.js gzip	27 kB	27 kB	✓
edge-runtime..pack.js gzip	1.83 kB	1.83 kB	✓
Overall change	29.6 kB	29.6 kB	✓

Commit: 99f83c9

[timneutkens]

Great work 💯