Как обрабатывать ошибки fetch

Короткий ответ

Ошибки бывают двух видов: сбой сети, и тогда fetch() выбрасывает исключение, или сервер отвечает статусом ошибки. Обработайте оба:

try {
  const response = await fetch('/api/profile');
  if (!response.ok) {
    throw new Error(`Server error: ${response.status}`);
  }
  const profile = await response.json();
  showProfile(profile);
} catch (error) {
  showMessage('Could not load the profile: ' + error.message);
}

Вспомогательная функция

Соберите проверки в одной функции и используйте её везде:

async function getJson(url, options) {
  const response = await fetch(url, options);
  if (!response.ok) {
    const text = await response.text();
    throw new Error(`${response.status} ${response.statusText}: ${text.slice(0, 100)}`);
  }
  return response.json();
}
 
const orders = await getJson('/api/orders');

Разные статусы

Иногда реакция зависит от статуса: 401 — нужно войти, 404 — ничего не найдено:

const response = await fetch('/api/orders/15');
 
if (response.status === 401) {
  location.href = '/login';
} else if (response.status === 404) {
  showMessage('Order not found');
} else if (response.ok) {
  showOrder(await response.json());
}

Частая ошибка

Без await внутри try ошибка случится позже, вне блока, и catch её не поймает:

try {
  fetch('/api/profile').then((response) => response.json());
} catch (error) {
  // never runs for request errors
}

Функции из этого ответа

fetch — Отправляет HTTP-запрос и возвращает промис ответа.
try...catch — Перехватывает ошибки, чтобы программа не остановилась.