Add Errors/Insights tab split to the instant error overlay#94073
Open
aurorascharff wants to merge 10 commits into
Open
Add Errors/Insights tab split to the instant error overlay#94073aurorascharff wants to merge 10 commits into
aurorascharff wants to merge 10 commits into
Conversation
Contributor
Failing test suitesCommit: 57a9772 | About building and testing Next.js
Expand output● filesystem-caching with cache enabled › should allow to change files while stopped (RSC change, RCC change, Pages change, rename app page, next config change, env var change) |
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 from current PR✅ No significant changes detected📊 All Metrics📖 Metrics GlossaryDev Server Metrics:
Build Metrics:
Change Thresholds:
⚡ Dev Server
📦 Dev Server (Webpack) (Legacy)📦 Dev Server (Webpack)
⚡ Production Builds
📦 Production Builds (Webpack) (Legacy)📦 Production Builds (Webpack)
📦 Bundle SizesBundle Sizes⚡ TurbopackClient Main Bundles
Server Middleware
Build DetailsBuild Manifests
📦 WebpackClient Main Bundles
Polyfills
Pages
Server Edge SSR
Middleware
Build DetailsBuild Manifests
Build Cache
🔄 Shared (bundler-independent)Runtimes
📝 Changed Files (2 files)Files with changes:
View diffspages-api-tu..ntime.dev.jsDiff too large to display pages-turbo...ntime.dev.jsDiff too large to display 📎 Tarball URLCommit: 57a9772 |
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).