A failing Action reaches the error boundary
The rejected promise is thrown from SaveButton, so Boundary shows its fallback. React logs the caught error once with console.error (that's the first lines), then the page text is logged.
In React 19 startTransition accepts an async function: React calls it an Action, keeps isPending true until it finishes, sends errors it throws to the nearest error boundary, and lets the rest of the UI stay responsive while it waits.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a DeleteButton that calls fakeDelete() (300 ms) as an Action, shows Deleting... and is disabled while pending.
Change the ordering example so only the latest search can set the result.
Explain it without notes
What is an Action in React 19 and how does it differ from React 18 transitions?
Why must state updates after await be wrapped in startTransition again?
What happens when an Action throws?
Two searches run as Actions and the older one shows. Why, and how do you fix it?
Preview
Console
Nothing logged yet.Expected console output
Error: Server said no
The above error occurred in the <SaveButton> component.
React will try to recreate this component tree from scratch using the error boundary you provided, Boundary.
Caught: Server said no