[devtools] Allow switching codeframe by eps1lon · Pull Request #88867 · vercel/next.js

eps1lon · 2026-01-21T23:37:41Z

Cursor task needed too much hand-holding. Used Cursor for scaffolding and then fixed manually.

Next.js will ignore-list 3rd party modules by default and show the codeframe of the top stackframe. While this is sufficient for most cases, it's not always suitable. Ignore-listing is just a binary flag while modules are really spread across different "levels of interest" (e.g. product code vs repo library code vs framework code).

Sometimes you do want to look at frames below or above or maybe even in ignore-lists. Interactive terminals like the one browser devtools provide already have affordances to freely navigate between stackframes.

This PR also adds these affordances to the Redbox. Codeframes can be switched either by clicking a different stackframe or via keyboard navigation. Only stackframes that have a codeframe are selectable.

Complexity mostly comes from having to reconcile selection when the ignore-listing is toggled and considering what is selectable during navigation.

Test plan

Storybook
added tests

cursor · 2026-01-21T23:37:42Z

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

packages/next/src/next-devtools/dev-overlay/container/runtime-error/index.tsx

packages/next/src/next-devtools/dev-overlay/components/call-stack/call-stack.tsx

nextjs-bot · 2026-01-21T23:51:22Z

Allow CI Workflow Run

approve CI run for commit: 111cee0

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

packages/next/src/next-devtools/dev-overlay/components/call-stack-frame/call-stack-frame.tsx

nextjs-bot · 2026-01-22T00:30:50Z

Stats from current PR

🔴 1 regression

Metric	Canary	PR	Change	Trend
node_modules Size	474 MB	474 MB	🔴 +68.2 kB (+0%)	█████

📊 All Metrics

📖 Metrics Glossary

Dev Server Metrics:

Listen = TCP port starts accepting connections
First Request = HTTP server returns successful response
Cold = Fresh build (no cache)
Warm = With cached build artifacts

Build Metrics:

Fresh = Clean build (no .next directory)
Cached = With existing .next directory

Change Thresholds:

Time: Changes < 50ms AND < 10%, OR < 2% are insignificant
Size: Changes < 1KB AND < 1% are insignificant
All other changes are flagged to catch regressions

⚡ Dev Server

Metric	Canary	PR	Change	Trend
Cold (Listen)	456ms	455ms	✓	▁▁▁▁▁
Cold (Ready in log)	438ms	436ms	✓	▂▁▂▂▂
Cold (First Request)	1.252s	1.195s	✓	▄▄▃▃▃
Warm (Listen)	457ms	457ms	✓	▁▁▁▁▁
Warm (Ready in log)	440ms	439ms	✓	▁▁▁▁▁
Warm (First Request)	344ms	337ms	✓	▁▁▂▁▁

📦 Dev Server (Webpack) (Legacy)

📦 Dev Server (Webpack)

Metric	Canary	PR	Change	Trend
Cold (Listen)	454ms	455ms	✓	▁▁▁▁▁
Cold (Ready in log)	439ms	439ms	✓	▃▁▁▁▁
Cold (First Request)	1.949s	1.969s	✓	▂▁▁▁▁
Warm (Listen)	456ms	455ms	✓	▁▁▁▁▁
Warm (Ready in log)	438ms	438ms	✓	▁▁▂▁▁
Warm (First Request)	1.957s	1.956s	✓	▁▁▂▁▁

⚡ Production Builds

Metric	Canary	PR	Change	Trend
Fresh Build	4.033s	3.958s	✓	▁▁▁▁▁
Cached Build	4.036s	4.008s	✓	▁▁▁▁▁

📦 Production Builds (Webpack) (Legacy)

📦 Production Builds (Webpack)

Metric	Canary	PR	Change	Trend
Fresh Build	14.035s	14.087s	✓	▁▇█▁▁
Cached Build	14.163s	14.168s	✓	▁▇█▁▁
node_modules Size	474 MB	474 MB	🔴 +68.2 kB (+0%)	█████

📦 Bundle Sizes

Bundle Sizes

⚡ Turbopack

Client

Main Bundles: **399 kB** → **399 kB** ✅ -3 B

80 files with content-based hashes (individual files not comparable between builds)

Server

Middleware

	Canary	PR	Change
middleware-b..fest.js gzip	762 B	763 B	✓
Total	762 B	763 B	⚠️ +1 B

Build Details

Build Manifests

	Canary	PR	Change
_buildManifest.js gzip	452 B	450 B	✓
Total	452 B	450 B	✅ -2 B

📦 Webpack

Client

Main Bundles

	Canary	PR	Change
5528-HASH.js gzip	5.54 kB	N/A	-
6280-HASH.js gzip	57.5 kB	N/A	-
6335.HASH.js gzip	169 B	N/A	-
912-HASH.js gzip	4.59 kB	N/A	-
e8aec2e4-HASH.js gzip	62.6 kB	N/A	-
framework-HASH.js gzip	59.7 kB	59.7 kB	✓
main-app-HASH.js gzip	256 B	254 B	✓
main-HASH.js gzip	39.1 kB	39.1 kB	✓
webpack-HASH.js gzip	1.68 kB	1.68 kB	✓
262-HASH.js gzip	N/A	4.59 kB	-
2889.HASH.js gzip	N/A	169 B	-
5602-HASH.js gzip	N/A	5.55 kB	-
6948ada0-HASH.js gzip	N/A	62.6 kB	-
9544-HASH.js gzip	N/A	58.3 kB	-
Total	231 kB	232 kB	⚠️ +753 B

Polyfills

	Canary	PR	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Total	39.4 kB	39.4 kB	✓

Pages

	Canary	PR	Change
_app-HASH.js gzip	194 B	194 B	✓
_error-HASH.js gzip	183 B	180 B	🟢 3 B (-2%)
css-HASH.js gzip	331 B	330 B	✓
dynamic-HASH.js gzip	1.81 kB	1.81 kB	✓
edge-ssr-HASH.js gzip	256 B	256 B	✓
head-HASH.js gzip	351 B	352 B	✓
hooks-HASH.js gzip	384 B	383 B	✓
image-HASH.js gzip	580 B	581 B	✓
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	2.5 kB	2.5 kB	✓
routerDirect..HASH.js gzip	320 B	319 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	315 B	315 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Total	7.97 kB	7.97 kB	✅ -2 B

Server

Edge SSR

	Canary	PR	Change
edge-ssr.js gzip	125 kB	125 kB	✓
page.js gzip	252 kB	253 kB	✓
Total	377 kB	378 kB	⚠️ +502 B

Middleware

	Canary	PR	Change
middleware-b..fest.js gzip	616 B	616 B	✓
middleware-r..fest.js gzip	156 B	155 B	✓
middleware.js gzip	43.8 kB	43.9 kB	✓
edge-runtime..pack.js gzip	842 B	842 B	✓
Total	45.4 kB	45.5 kB	⚠️ +71 B

Build Details

Build Manifests

	Canary	PR	Change
_buildManifest.js gzip	715 B	718 B	✓
Total	715 B	718 B	⚠️ +3 B

Build Cache

	Canary	PR	Change
0.pack gzip	3.98 MB	3.99 MB	🔴 +9.23 kB (+0%)
index.pack gzip	102 kB	102 kB	✓
index.pack.old gzip	103 kB	103 kB	✓
Total	4.19 MB	4.2 MB	⚠️ +9.2 kB

🔄 Shared (bundler-independent)

Runtimes

	Canary	PR	Change
app-page-exp...dev.js gzip	318 kB	318 kB	✓
app-page-exp..prod.js gzip	169 kB	169 kB	✓
app-page-tur...dev.js gzip	318 kB	318 kB	✓
app-page-tur..prod.js gzip	168 kB	168 kB	✓
app-page-tur...dev.js gzip	314 kB	314 kB	✓
app-page-tur..prod.js gzip	166 kB	166 kB	✓
app-page.run...dev.js gzip	315 kB	315 kB	✓
app-page.run..prod.js gzip	167 kB	167 kB	✓
app-route-ex...dev.js gzip	70.7 kB	70.7 kB	✓
app-route-ex..prod.js gzip	49.1 kB	49.1 kB	✓
app-route-tu...dev.js gzip	70.7 kB	70.7 kB	✓
app-route-tu..prod.js gzip	49.2 kB	49.2 kB	✓
app-route-tu...dev.js gzip	70.3 kB	70.3 kB	✓
app-route-tu..prod.js gzip	48.9 kB	48.9 kB	✓
app-route.ru...dev.js gzip	70.2 kB	70.2 kB	✓
app-route.ru..prod.js gzip	48.9 kB	48.9 kB	✓
dist_client_...dev.js gzip	324 B	324 B	✓
dist_client_...dev.js gzip	326 B	326 B	✓
dist_client_...dev.js gzip	318 B	318 B	✓
dist_client_...dev.js gzip	317 B	317 B	✓
pages-api-tu...dev.js gzip	43.2 kB	43.2 kB	✓
pages-api-tu..prod.js gzip	32.9 kB	32.9 kB	✓
pages-api.ru...dev.js gzip	43.2 kB	43.2 kB	✓
pages-api.ru..prod.js gzip	32.8 kB	32.8 kB	✓
pages-turbo....dev.js gzip	52.5 kB	52.5 kB	✓
pages-turbo...prod.js gzip	38.5 kB	38.5 kB	✓
pages.runtim...dev.js gzip	52.5 kB	52.5 kB	✓
pages.runtim..prod.js gzip	38.4 kB	38.4 kB	✓
server.runti..prod.js gzip	62 kB	62 kB	✓
Total	2.81 MB	2.81 MB	⚠️ +2 B

📎 Tarball URL

next@https://vercel-packages.vercel.app/next/prs/88867/next

packages/next/src/next-devtools/dev-overlay/container/runtime-error/index.tsx

test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts

packages/next/src/next-devtools/dev-overlay/components/call-stack-frame/call-stack-frame.tsx

- Add click/keyboard support to select stack frames in the call stack - Show codeframe for any selectable stack frame (not just the first one) - Codeframe visibility based on ignore list state: only show codeframe for visible frames (hidden when ignore list is collapsed) - Improve ignore list detection for monorepo workspace paths - Ignore frames with no useful source location (likely internal framework code) - Use accessible faux nested interactive controls pattern - Add tests for frame selection behavior

nextjs-bot added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 21, 2026

vercel bot reviewed Jan 21, 2026

View reviewed changes

eps1lon added the CI approved Approve running CI for fork label Jan 21, 2026

nextjs-bot added the tests label Jan 22, 2026

eps1lon commented Jan 22, 2026

View reviewed changes

packages/next/src/next-devtools/dev-overlay/components/call-stack-frame/call-stack-frame.tsx Outdated Show resolved Hide resolved

vercel bot reviewed Jan 22, 2026

View reviewed changes

packages/next/src/next-devtools/dev-overlay/container/runtime-error/index.tsx Outdated Show resolved Hide resolved

eps1lon commented Jan 22, 2026

View reviewed changes

test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts Outdated Show resolved Hide resolved

vercel bot reviewed Jan 22, 2026

View reviewed changes

packages/next/src/next-devtools/dev-overlay/components/call-stack-frame/call-stack-frame.tsx Show resolved Hide resolved

cursor bot force-pushed the cursor/redbox-stack-frame-navigation-9628 branch from 5b640ce to 666978f Compare February 10, 2026 19:52

eps1lon force-pushed the cursor/redbox-stack-frame-navigation-9628 branch 2 times, most recently from da8e0dd to 81c79a2 Compare February 25, 2026 07:12

eps1lon changed the title ~~Redbox stack frame navigation~~ [devtools] Allow switching codeframe Feb 25, 2026

eps1lon force-pushed the cursor/redbox-stack-frame-navigation-9628 branch from 81c79a2 to 6e9f45c Compare February 25, 2026 07:56

eps1lon force-pushed the cursor/redbox-stack-frame-navigation-9628 branch from 6e9f45c to c85772c Compare February 25, 2026 09:13

vercel deleted a comment from nextjs-bot Feb 26, 2026

eps1lon mentioned this pull request Feb 26, 2026

[devtools] Stop sending codeframes for ignored frames #90577

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[devtools] Allow switching codeframe#88867

[devtools] Allow switching codeframe#88867
eps1lon wants to merge 1 commit intocanaryfrom
cursor/redbox-stack-frame-navigation-9628

eps1lon commented Jan 21, 2026 •

edited

Loading

Uh oh!

cursor bot commented Jan 21, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nextjs-bot commented Jan 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

nextjs-bot commented Jan 22, 2026 •

edited

Loading

⚡ Dev Server

📦 Dev Server (Webpack)

⚡ Production Builds

📦 Production Builds (Webpack)

Bundle Sizes

⚡ Turbopack

📦 Webpack

🔄 Shared (bundler-independent)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

eps1lon commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test plan

Uh oh!

cursor bot commented Jan 21, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nextjs-bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

nextjs-bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stats from current PR

🔴 1 regression

⚡ Dev Server

📦 Dev Server (Webpack)

⚡ Production Builds

📦 Production Builds (Webpack)

Bundle Sizes

⚡ Turbopack

📦 Webpack

🔄 Shared (bundler-independent)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

eps1lon commented Jan 21, 2026 •

edited

Loading

nextjs-bot commented Jan 21, 2026 •

edited

Loading

nextjs-bot commented Jan 22, 2026 •

edited

Loading