← Lessons

quiz vs the machine

Platinum1740

Frontend

The Error and Empty States

Design the unhappy paths so users always know what to do next.

5 min read · advanced · beat Platinum to climb

The states beyond success

Every data view has more than a loaded state. A complete design covers loading, empty, error, and partial so the user is never stranded. The empty and error states are where polish shows.

  • Empty means the query succeeded but there is nothing yet
  • Error means the request failed and may be retryable
  • Partial means some data loaded but a piece failed

Designing the empty state

A blank table is a missed chance. A good empty state explains what would appear here and offers a first action, like create your first item, turning a dead end into onboarding.

State routing

Designing the error state

Distinguish a recoverable error you can retry from a fatal one. Speak plainly, avoid raw stack traces, keep a retry close, and preserve the user input so a failure does not erase their work.

Key idea

Treat empty error and partial as first class states, guide a first action when empty, separate retryable from fatal errors, and never lose user input on failure.

Check yourself

Answer to earn rating on the learn ladder.

1. What distinguishes an empty state from an error state?

2. What makes a strong empty state?

3. How should a recoverable error be handled?