An error boundary and error reporting keep the app alive
The script clicks Load a bad task. The card throws while rendering, the boundary shows its fallback, onCaughtError reports it, and the heading and footer stay. Try again would render the bad task and fail again: in a real app, refetch or drop the bad record first.
Milestone 6: protect the app with an error boundary and error reporting, split the archive into its own lazily loaded chunk, build it with Vite, deploy it with an SPA fallback, write a README, and plan what to add next.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the error boundary's Try again button reset the board to the saved tasks.
Write the nginx location blocks for the task board: hashed assets cached for a year, everything else falling back to index.html.
Explain it without notes
What would you check before shipping a React app?
Why does a client-side routed app need an SPA fallback, and how do you configure one?
How do error boundaries and the root error callbacks work together?
Which parts of the task board would you code-split, and why?
Preview
Console
Nothing logged yet.Expected console output
report to monitoring: Cannot read properties of undefined (reading 'toUpperCase')
on screen: The board hit a problem. Your tasks are saved.