Обработка ошибок: коды состояния HTTP
Свяжите коды состояния HTTP с сообщениями для пользователей, различайте сетевые ошибки и ошибки сервера и реализуйте логику повторных попыток
«Обработка ошибок: коды состояния HTTP» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Категории кодов состояния HTTP
Коды состояния группируются по первой цифре: 2xx — успешное выполнение, 3xx — перенаправление, 4xx — ошибка клиента (ошибка на вашей стороне), 5xx — ошибка сервера (ошибка на их стороне).
Распространённые коды 2xx
200 OK: успешный ответ с телом. 201 Создано: ресурс создан (часто возвращается новый ресурс). 204 Нет содержимого: успешный ответ без тела (DELETE, иногда PUT).
Распространённые коды 4xx
400 Некорректный запрос: неверно сформированные входные данные. 401 Не авторизован: отсутствуют или недействительны данные авторизации. 403 Доступ запрещён: пользователь прошёл аутентификацию, но не имеет доступа. 404 Не найдено: ресурс не существует. 409 Конфликт: конфликт состояния (например, дублирующийся адрес электронной почты). 422 Объект не может быть обработан: проверка данных не пройдена.
Распространённые коды 5xx
500 Внутренняя ошибка сервера: общая ошибка сервера. 502 Service недоступен через шлюз: произошла ошибка вышестоящего сервиса. 503 Service недоступен: сервер перегружен или не работает. 504 Тайм-аут шлюза: вышестоящий сервис не ответил вовремя.
Преобразование кодов в сообщения для пользователя
Преобразуйте коды состояния в понятные сообщения интерфейса — никогда не показывайте пользователю сообщение «Ошибка 500».
function userMessage(status) {
if (status === 401) return 'Please sign in to continue.';
if (status === 403) return "You don't have permission for that.";
if (status === 404) return 'Not found.';
if (status === 409) return 'Already exists.';
if (status === 422) return 'Please check the form for errors.';
if (status >= 500) return 'Something went wrong. Try again in a moment.';
return 'Something unexpected happened.';
}Сетевые ошибки и ошибки сервера
Неудачный запрос через Fetch (отсутствие сети, ошибка DNS, CORS) отличается от ответа сервера с ошибкой. Сетевые ошибки вызывают исключение, а ошибки сервера возвращают объект ответа со статусом >= 400.
try {
const res = await fetch('/api/users');
if (!res.ok) {
// Server replied but with error status
throw new Error(`Server error ${res.status}`);
}
return res.json();
} catch (err) {
if (err instanceof TypeError) {
// Network failure — fetch couldn't reach server
throw new Error('Network error. Check your connection.');
}
throw err;
}Повторные попытки при ошибках 5xx и сетевых ошибках
Ошибки сервера и сбои сети часто бывают временными. Повторяйте запросы с экспоненциальной задержкой.
async function fetchWithRetry(url, options, maxRetries = 3) {
for (let attempt = 0; attempt < maxRetries; attempt++) {
try {
const res = await fetch(url, options);
if (res.ok || (res.status >= 400 && res.status < 500)) return res;
// 5xx — retryable
} catch (err) {
if (attempt === maxRetries - 1) throw err;
}
await new Promise(r => setTimeout(r, 2 ** attempt * 1000)); // 1s, 2s, 4s
}
}Не повторяйте запросы при ошибках 4xx
Ошибки 4xx возникают по вашей вине — повторная попытка не поможет. Повторяйте запросы только при ошибках 5xx и сбоях сети. Исключение — 429 (слишком много запросов): этот ответ часто содержит заголовок Retry-After.
Чтение заголовка Retry-After
Серверы могут добавлять Retry-After в ответы 429 и 503 — подождите указанное количество секунд перед повторной попыткой.
const res = await fetch('/api/limited');
if (res.status === 429) {
const after = parseInt(res.headers.get('Retry-After') || '5', 10);
await new Promise(r => setTimeout(r, after * 1000));
return fetch('/api/limited');
}Отображение ошибок проверки данных
Ответы 422 обычно содержат тело в формате JSON со списком ошибок полей. Отображайте их рядом с соответствующим полем формы.
// Server response for 422:
// { errors: { email: 'Already taken', password: 'Too short' } }
if (res.status === 422) {
const { errors } = await res.json();
Object.entries(errors).forEach(([field, msg]) => {
setFieldError(field, msg);
});
}Телеметрия: отправка ошибок в Service
Отправляйте ошибки в Sentry, Datadog или LogRocket, чтобы видеть их в рабочей среде. Включайте URL запроса, метод, статус и очищенное тело без секретов.
Предлагайте понятный способ восстановить работу
Каждый экран с ошибкой должен предлагать пользователю способ продолжить работу: кнопку повторной попытки, ссылку на службу поддержки или возможность вернуться на рабочую страницу. Экраны с ошибкой, не дающие дальнейших вариантов, раздражают пользователей.
Быстрая проверка
API возвращает ошибку 422 «Объект не может быть обработан». Что это обычно означает?
Итоги: обработка ошибок HTTP
2xx — успешное выполнение, 3xx — перенаправление, 4xx — ошибка клиента, 5xx — ошибка сервера. Преобразуйте коды в понятные сообщения для пользователя. Различайте сетевые ошибки (TypeError из Fetch) и ошибки сервера (res.ok имеет значение false). Повторяйте запросы при ошибках 5xx и сбоях сети с экспоненциальной задержкой; никогда не повторяйте запросы при ошибках 4xx, кроме 429 с заголовком Retry-After. Отображайте ошибки полей для ответа 422. Отправляйте ошибки в Service, например Sentry.
Часто задаваемые вопросы
Урок «Обработка ошибок: коды состояния HTTP» бесплатный?
Да — полный текст урока «Обработка ошибок: коды состояния HTTP» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Обработка ошибок: коды состояния HTTP»?
Свяжите коды состояния HTTP с сообщениями для пользователей, различайте сетевые ошибки и ошибки сервера и реализуйте логику повторных попыток Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Обработка ошибок: коды состояния HTTP»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Fetch API: GET, POST, PUT и DELETE
- Axios: перехватчики и базовый URL
- Обработка ошибок: коды состояния HTTP
- SWR и React Query для кэширования данных