Five boxes, five outcomes, one page that survives
One wrong path and one dead network blank two boxes only. The 404 is tried once, the flaky call is tried three times (it works on the third), and the dead network is tried three times and then given up.
A box can be loading, empty, broken or showing old numbers, and a blank rectangle says none of that. Give every box every state, let each box fail alone, retry with backoff, and mark old data as old.
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 ageText-style wording for a box whose data is null (never loaded) and one whose data is []. Which two states are they?
Make load call onGiveUp(problem) after the last failed try, so a page-level banner can say how many boxes failed. Where do you call it?
Explain it without notes
What is the difference between an empty state and an error state?
Why should one box's failure never blank the other boxes?
Why do retries use backoff, and which errors should not be retried?
When a refresh fails and you have old data, what should the box show?
Preview
Console
Nothing logged yet.Expected console output
rides: loaded 365 rows
stations: Could not load stations-2026.csv (the server answered 404).
weather: attempt 1 failed, waiting 500 ms
weather: attempt 2 failed, waiting 1000 ms
weather: loaded 1 rows
late returns: empty
partner feed: attempt 1 failed, waiting 500 ms
partner feed: attempt 2 failed, waiting 1000 ms
partner feed: Failed to fetch
boxes on the page: 5 | error boxes: 2
stations: Could not load stations-2026.csv (the server answered 404).
error boxes after Try again: 2