Which state is this box in?
The preview has no network except this site's data, so a request to another address fails the way a dropped connection does. A server error has a status; a dead network has only a TypeError.
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
first load -> loading (skeleton)
first load failed -> error (message and Try again)
loaded -> ok
refreshing -> refreshing (rows stay, small hint)
no rows -> empty (a reason and a way out)
refresh failed -> stale (old rows and a badge: 3 minutes ago)
feed went quiet -> stale (old rows and a badge: 2 hours ago)
---
0 s -> just now
3 s -> just now
42 s -> 42 seconds ago
60 s -> 1 minute ago
185 s -> 3 minutes ago
7300 s -> 2 hours ago
90000 s -> 1 day ago
NaN s -> at an unknown time
-5 s -> at an unknown time
network failure: TypeError: Failed to fetch