Handling errors the user can read

Errors are part of the UI, not a logging concern. A real user cannot open the console. If your app says something cryptic or nothing at all, they leave. Design the error UI with the same care as the happy path.

A good error message answers three questions. What went wrong, in plain English. Is it the user's fault or yours. What can the user do next. A bad error says Error 500. A good error says We could not load the catalog. It is our side. Try again in a minute or reload the page.

script.js

javascript

const retryButton = document.getElementById('retry');

retryButton.addEventListener('click', () => {
  errorMsg.classList.add('hidden');
  fetchBooks();
});

async function fetchBooks() {
  setState('loading');
  try {
    const res = await fetch('./books.json');
    if (!res.ok) throw new Error('HTTP ' + res.status);
    setState('success', await res.json());
  } catch (err) {
    setState('error', 'Could not load the catalog. Tap retry.');
  }
}

A retry button wired into the error UI.

Quiz: Quiz

Loading practice…