React · Exercise 5 of 5 Previous
Advanced
Mini build: recover from a failed chunk
After a deploy, the first attempt to load the Reports chunk fails (loadReports simulates it). Build the recovery:
- #open shows Reports inside <Suspense> with a fallback <p id="loading">Loading reports…</p>;
- when loading fails, an error boundary shows role="alert" with a button #retry;
- clicking #retry tries again and, this time, <h2 id="reports"> appears and the alert is gone.
Hint about lazy: once its loader has failed, that lazy component remembers the failure. A retry needs a new lazy component.
What Check tests
- Opening shows the loading fallback
- The failed load shows an alert with a
#retrybutton - Retrying loads the reports
- The alert is gone after the retry
- Reports is still loaded with
lazy
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.