React · Exercise 5 of 5 Previous
Advanced
A dashboard that survives a broken widget
The Weather widget throws while rendering, and with no error boundary the whole dashboard disappears.
Write an ErrorBoundary class component and wrap each widget in its own boundary. When Weather fails, its fallback must have role="alert", contain the text Weather is unavailable, and include a button with id="retry".
Clicking #retry must call fixWeather() (already written: it repairs the fake service) and reset the boundary, so the weather appears. The <h1> and the news widget #news must keep working the whole time (#like increments #likes).
What Check tests
- The heading is still on the page
- The weather widget shows an accessible fallback
- The news widget keeps working
- Try again fixes the service and shows the weather
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.