5 hands-on exercises and 5 find-the-bug challenges for the Error Boundaries lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Wrap the risky component so a fallback shows instead of a blank page.
Store the error and render its message.
Content outside the boundary should still render.
The boundary should pass children through when all is well.
A boundary cannot catch a click, so use try and catch.
Without a boundary the throw unmounts the whole tree.
getDerivedStateFromError must return the new state.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceThe boundary stores the error but renders a placeholder.
The boundary shows the fallback even when nothing threw.
A boundary cannot catch an event handler, so catch it there.