Error UI

Map loading, success, HTTP errors, and network errors to clear messages.

Users need different messages for “still loading,” “got data,” “server said no (HTTP),” and “could not reach the server.” Use try / catch / finally (Phase 13) plus response.ok checks.

Idle

Results appear here.

Pick a scenario and load.

Important JavaScript

setLoading(true);
try {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  showSuccess(await response.json());
} catch (error) {
  if (error.message.indexOf("HTTP ") === 0) {
    showHttpError(error.message);
  } else {
    showNetworkError(error.message);
  }
} finally {
  setLoading(false);
}