### Why?
Should come up with better solution that does not block PRs with git
conflict
x-ref:
https://vercel.slack.com/archives/C02CDC2ALJH/p1785263902728189?thread_ts=1785263687.502649&cid=C02CDC2ALJH
### How?
- Delete `errors.json`, the error-code SWC plugin, generated WASM, merge
driver, and validation/build tooling.
- Stop attaching error codes to server-rendering digests, redboxes, and
telemetry; native `Error.code` and `Error.name` remain available where
applicable.
- Remove the development-overlay error feedback UI, middleware, and
telemetry event that depended on stable codes.
- Update fixtures, snapshots, and guidance for code-free errors and
numeric-only digests.
<!-- NEXT_JS_LLM -->
### What?
Flips the default `experimental.instantInsights.validationLevel` from
`'manual-warning'` to `'warning'` so Cache Components apps get
instant-navigation validation across all pages by default.
### Why?
`'manual-warning'` only validates pages that explicitly export
`unstable_instant`, so apps see nothing unless they opt in. `'warning'`
is what users have been turning on manually to actually see the feature
(`v0`, `vercel-site`).
### Test coverage
- Unit: `instant-config-normalization.test.ts` pins the framework
default at `'warning'`.
- Integration: new `instant-validation-level-default/` fixture (no
`instantInsights` in config) asserts implicit dev validation fires, and
that build is unaffected.
### Collateral test fixtures
Tests whose intent is unrelated to instant validation
(router-autoscroll, owner-stack, hmr-iframe, next-image,
server-source-maps, etc.) now hit new redboxes/console warnings because
their fixtures incidentally use dynamic data. Each opts out with
`experimental: { instantInsights: { validationLevel: 'manual-warning' }
}` in `next.config`.
### Open question
With no `'off'` / `'info'` tier today, silencing Insights after this
change requires setting `validationLevel: 'manual-warning'`. Is that
acceptable? Should we inform of this anywhere?
<!-- NEXT_JS_LLM_PR -->
### What
When there's a same error throwing constantly, we should avoid unnecessary re-renders on the exact same error. In dev overlay we already have strategies that can dedupe the error. And we noticed the error is shown correctly but just the dialog got re-rendered with animations.
After digging deeper, noticed we are still adding the same runtime error into the error collection, just because each time it got the new "ID", as the "ID" itself is incremental based on actions. Each action will get a new error ID. Hence we're adding a condition in deduping. If we found that the new error already existed in the previous events, we'll return with the same previous events instance to tell dev overlay that errors are not changed.
Fixes NEXT-4493
#### After
https://github.com/user-attachments/assets/c1f004b5-2de6-445a-aad0-efdfd0ecb8c9
#### Before
https://github.com/user-attachments/assets/1249ed54-ba63-4eb6-a08a-64560ab4014a
Adds a field `navigatedAt` to the CacheNode type. It represents the
timestamp of the navigation that last updated the CacheNode's data.
This will be used to implement the `staleTimes.dynamic` configuration
option, which allows dynamic data to be stale in the UI up to the given
threshold. This first PR adds the field without changing any behavior.
Originally I was going to call this `requestedAt`, but I have
intentionally chosen not to distinguish between whether the data was
fetched from the network or from the prefetch cache. This means that
even fully static data will respect the `staleTimes.dynamic`
configuration option. In practice, this only matters if the dynamic
stale time is longer than the static one, although usually static stale
times will be larger anyway.
Best to review commit by commit.
The App Router's state lives outside of React, so we don't need to pass
the dispatch method around via props/context. We can import it directly
into each module that needs it.
We have to be a bit clever and assign the dispatch method to a global
variable on initialization. This is more complicated than it should be
because of a known issue that requires us to decode Flight streams
during the render phase.
Ideally, we would store the action queue and dispatch method entirely
outside of React and pass the state into React as a prop using
`root.render`; conceptually, this is how we're modeling it despite the
weird implementation details.
(We were already using this approach in several places, so it's not new
to this PR; I'm just explaining it here for context.)
The first commit moves dispatch to a global. The rest of the PR cleans
up indirections that can be removed by importing and calling the
dispatch method directly.
This PR removed the old overlay including the deprecated `buildActivity`
and `appIsrStatus` options.
Closes NDX-785
Closes NDX-855
Closes NDX-865
Closes NDX-866
Closes NDX-867
Closes NDX-868
- `newDevOverlay: true` by default (enables experimental React builds on
canary until owner stacks progress further)
- `run-tests` now sets the env var for tests that were relying on it for
forking behavior
- PPR runners now run with the flag disabled to help catch regressions
in the old overlay until we remove it
- Fixed a number of tests that had outdated snapshots or missed forking
behavior because they weren't running in CI
- Disabled a test that was failing in Turbopack + Experimental React
that is unrelated to the overlay (see:
https://github.com/vercel/next.js/pull/75989)
---------
Co-authored-by: devjiwonchoi <devjiwonchoi@gmail.com>
This PR adds a lot of polish to the experimental Error Overlay:
https://github.com/user-attachments/assets/2540b966-c61d-43eb-b816-5ef25f3ecb11
### Motion
- Stacked layers transition smoothly when switching between errors
- Height transition for the dialog panel to complement the stacked
layers transition
- Dialog contents and the backdrop fade in as per Geist Motion
Guidelines (`scale`, `opacity`)
### Design
- New language icon based on file extension à la (`app.tsx`)
- Shadows are clipped with translucent borders to visually be more crisp
- Use `backdrop-filter: blur()` for backdrop to blend with application
content
- Use `font-variant-numeric: tabular-nums` for ←→ switcher to avoid
layout shift
- Misc alignment improvements
### Interactions
- Focus is now trapped in the dialog, <kbd>Escape</kbd> will un-trap and
re-focus the last `root.activeElement`
- Focus states for all interactive elements
- Fluid reveal & collapse of ignored Call Stack items ↓
https://github.com/user-attachments/assets/59a81cea-24ec-4fe4-be00-b911ab484757
Closes NDX-711
Closes NDX-744
---------
Co-authored-by: devjiwonchoi <devjiwonchoi@gmail.com>
Co-authored-by: Zack Tanner <1939140+ztanner@users.noreply.github.com>
### What
When there's a async client component used in the component tree, it's not available to display the component stack whether you enable react owner stack or not. It's likely a bug in `React.captureOwnerStack`.
We update the existing test here to ensure the error is surfaced when the mistake is comitted. We also assert on the snapshots of component stack but leave it as a TODO now since the component stack of errored component (the async client component) is not displayed.
Related to NDX-475
Jiwon Choi