Add Errors/Insights tab split to the instant error overlay#94073
Merged
Conversation
Contributor
Tests PassedCommit: 241f1cc |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a tabbed "Errors" vs "Insights" split to the dev overlay, distinguishing navigation-phase unstable_instant validation errors from regular prerender/runtime errors. Navigation-phase blocking-route errors keep the amber Instant badge; all other prerender/metadata/viewport/sync-IO errors are relabeled Blocking Route. The indicator pill now reflects the same split ("Issues" / "Insights" / "Issues · Insights").
Changes:
- New
ErrorTabBar+isInstantNavigationErrorhelper incontainer/errors.tsx, splittingruntimeErrorsintonormalErrors/instantErrorsand scoping pagination to the active tab via a newtabBarprop onErrorOverlayLayout. RenderErrorContextandRenderRuntimeErrorexpose a newinstantErrorCount;next-logo.tsxuses it to drive the new pill label,data-insights-onlystate, and amber styling.- Test snapshots across cache-components/instant-validation suites updated from
InstanttoBlocking Routefor prerender-phase errors; navigation-phase cases retainInstant.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/next/src/next-devtools/dev-overlay/container/errors.tsx | Adds isInstantNavigationError, ErrorTabBar, tab state, label remapping, and tab-bar CSS. |
| packages/next/src/next-devtools/dev-overlay/container/errors.test.ts | Tests for the new isInstantNavigationError helper. |
| packages/next/src/next-devtools/dev-overlay/container/runtime-error/render-error.tsx | Exposes instantErrorCount derived from ready runtime errors. |
| packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx | Wires instantErrorCount through RenderErrorContext. |
| packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay/error-overlay.tsx | Adds composition-based key to reset tab state when bucket presence changes. |
| packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.tsx | Adds optional tabBar slot between nav and dialog. |
| packages/next/src/next-devtools/dev-overlay/components/errors/error-type-label/error-type-label.tsx | Drops the blocking-page class for Blocking Route and removes redundant font rules from instant. |
| packages/next/src/next-devtools/dev-overlay/components/errors/error-message/error-message.tsx | Extends no-truncate/instant styling to Blocking Route messages. |
| packages/next/src/next-devtools/dev-overlay/components/dialog/dialog.tsx | Excludes new tab bar from click-outside dismissal. |
| packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx | New PillLabel/Plural helpers, insights-only amber styling, mixed-count label. |
| packages/next/.storybook/decorators/with-dev-overlay-contexts.tsx | Provides default instantErrorCount: 0 for stories. |
| test/development/app-dir/cache-components-dev-errors/…, test/development/app-dir/cache-components-dev-fallback-validation/…, test/e2e/app-dir/cache-components-errors/…, test/e2e/app-dir/instant-validation/…, test/e2e/app-dir/instant-validation-level-manual-warning/…, test/e2e/app-dir/instant-validation-static-shells/… | Update redbox label expectations from Instant to Blocking Route for prerender-phase cases. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
Stats cancelledCommit: 241f1cc |
### What? Refines the new Errors/Insights tab treatment in the dev overlay and adds a Storybook scenario for exercising both tabs. ### Why? The follow-up makes the pagination feel more coherent when switching between issues and insights, and gives us a reliable Storybook case for iterating on the tabbed UI. ### How? - move the tab bar into the pagination area - keep per-tab counts visible and let arrows page across tab boundaries - thread the custom previous/next behavior through the overlay nav/pagination components - add a mixed issues/insights Storybook fixture and story ### Verification - `pnpm --filter=next types` - Not run: `pnpm storybook` (`not run in this session`) <!-- NEXT_JS_LLM_PR --> --------- Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
### What? Tweaks the mobile behavior of the error overlay nav so the controls can scroll horizontally without breaking the version badge into multiple lines. https://github.com/user-attachments/assets/c3e91d6c-a303-4a04-9655-0ec005e2e9e7 ### Why? On narrow screens the nav content can overflow, and the Next.js version badge was wrapping internally instead of staying intact while the nav scrolled. ### How? - allow the error overlay nav row to scroll horizontally on mobile - add a small gap between the left and right nav groups - keep the version status badge on a single line with `white-space: nowrap` ### Verification - `pnpm prettier --check packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.tsx packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx` - Not run: `pnpm --filter=next types` (`not needed for these CSS-only tweaks`) <!-- NEXT_JS_LLM_PR -->
Wrap setActiveTab in startTransition so tab switches keep the previous content visible until the new tab resolves, instead of flashing the Suspense fallback and bouncing the panel height. Remove the now-unused resetKey/skipTransition plumbing from Resizer and ErrorOverlayLayout.
samselikoff
approved these changes
May 29, 2026
aurorascharff
added a commit
that referenced
this pull request
May 29, 2026
### What? A focused dev-overlay redesign and CLI/build message refresh for the "expected segment was not rendered" instant validation warning (PR #93770). Now integrated with the Errors/Insights tab split from #94073. ### Why? The wrapper carries no useful source location to point at — the code-frame chrome and Call Stack the overlay rendered before were misleading. Users mostly need to know which segment didn't render and where to set `instant = false` to silence the warning. ### Demo - [Demo 1](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/81-instant-wrapper-unrendered-segment) - [Demo 2](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/82-nested-layouts-unrendered-segment) - [Demo 3](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/83-conditional-render-unrendered-segment) - [Demo 4](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/84-parallel-slot-unrendered-segment) ### How - Restructured framework message in `dynamic-rendering.ts`: leads with `Route "<path>":` prefix like every other validation factory, drops the verbose paragraphs in favour of a one-sentence explanation + `Ways to fix this:` list, and uses `instant` not `unstable_instant` in the fix bullet. - New `unrendered-segment` `GuidanceKind` and a dedicated case in `errors.tsx` that drops the code-frame and Call Stack. - New `UnrenderedSegmentInfo` component renders the route + each unrendered file with the same chrome as `CodeFrame`, plus open-in-editor. - Two fix cards: `Render the missing segment` (render, gray) and `Allow no validation` (silence, red). - **Errors/Insights tab integration**: `isInstantNavigationError` now returns `true` for unrendered-segment errors, so they appear under the **Insights** tab with the amber pill (not the red Issues tab). They clear on navigation like other instant errors. Added `renderTabBar` to the unrendered-segment overlay layout. --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Yavor Punchev <yavor.punchev@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Adds a tab bar to the dev overlay that separates normal errors ("Errors") from instant navigation errors ("Insights"). The indicator pill also reflects the split.
Why?
When
unstable_instantvalidation produces navigation-phase errors alongside regular prerender errors, they were mixed into a single list. Developers had no way to tell which errors were structural instant-validation issues versus regular runtime/prerender errors.Demo
Blocking Routebadge (red), Errors tab.Instantbadge (amber), Insights tab.How?
ErrorssplitsruntimeErrorsintonormalErrors/instantErrors(using the existinginNavigationflag fromgetBlockingRouteErrorDetails) and defaults to whichever bucket has errors.ErrorTabBarrenders between the nav and dialog insideErrorOverlayLayout(newtabBarprop). Empty tabs are disabled.ErrorOverlaypasses akeyderived from the error composition so tab state resets when the shape changes (e.g. normal errors resolve).RenderErrorContextgainsinstantErrorCount; the indicator pill shows "N Issues", "N Insights", or "N Issues · N Insights" accordingly.Blocking Routebadge (red), navigation errors showInstantbadge (amber).