Какие знаешь коды ошибок и состояния сервера?

Коды состояния HTTP: классификация и практическое применение

При разработке фронтенд-приложений глубокое понимание HTTP-кодов состояния критически важно для эффективной обработки ответов сервера, улучшения UX и отладки. Эти трехзначные коды разделены на пять классов, определяемых первой цифрой.

Основные классы статус-кодов

1xx: Информационные (Informational)

Коды этого класса указывают на промежуточный статус обработки запроса. На практике фронтенд-разработчики редко встречаются с ними напрямую, но понимание их значения полезно.

• 100 Continue: Сервер получил начальные заголовки и клиент может продолжать отправлять тело запроса
• 101 Switching Protocols: Сервер соглашается сменить протокол (например, при переходе на WebSocket)

2xx: Успешные (Success)

Эти коды означают успешную обработку запроса.

// Пример обработки успешных ответов в fetch API
fetch('/api/data')
  .then(response => {
    if (response.ok) { // Проверяет статус 200-299
      return response.json();
    }
    throw new Error(`HTTP error! status: ${response.status}`);
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

• 200 OK: Стандартный ответ для успешных запросов
• 201 Created: Запрос выполнен, новый ресурс создан (часто после POST)
• 204 No Content: Сервер успешно обработал запрос, но не возвращает контент (после DELETE)
• 206 Partial Content: Сервер возвращает часть данных (используется для докачки файлов)

3xx: Перенаправления (Redirection)

Указывают на необходимость дополнительных действий для завершения запроса.

• 301 Moved Permanently: Ресурс永久но перемещен (браузеры кэшируют это перенаправление)
• 302 Found: Временное перенаправление
• 304 Not Modified: Ресурс не изменился (используется для кэширования)
• 307 Temporary Redirect: Временное перенаправление с сохранением метода запроса
• 308 Permanent Redirect: Постоянное перенаправление с сохранением метода

4xx: Ошибки клиента (Client Error)

Ошибки, вызванные некорректным запросом со стороны клиента.

// Пример дифференцированной обработки ошибок клиента
async function handleApiError(response) {
  switch(response.status) {
    case 400:
      const errorData = await response.json();
      return `Неверный запрос: ${errorData.message}`;
    case 401:
      // Токен истек или отсутствует - перенаправляем на страницу входа
      localStorage.removeItem('authToken');
      window.location.href = '/login';
      return 'Требуется авторизация';
    case 403:
      return 'Доступ запрещен (недостаточно прав)';
    case 404:
      return 'Ресурс не найден';
    case 429:
      return 'Слишком много запросов (лимит rate limiting)';
    default:
      return `Ошибка клиента: ${response.status}`;
  }
}

• 400 Bad Request: Сервер не может обработать запрос из-за синтаксической ошибки
• 401 Unauthorized: Требуется аутентификация (некорректные или отсутствующие учетные данные)
• 403 Forbidden: Сервер понял запрос, но отказывается его авторизовать
• 404 Not Found: Запрашиваемый ресурс не найден
• 405 Method Not Allowed: Метод не разрешен для данного ресурса
• 409 Conflict: Конфликт при обработке запроса (часто при одновременном изменении)
• 429 Too Many Requests: Превышен лимит запросов (rate limiting)

5xx: Ошибки сервера (Server Error)

Сервер не смог обработать корректный запрос.

// Обработка ошибок сервера с retry-логикой
async function fetchWithRetry(url, options = {}, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url, options);
      
      if (response.status >= 500 && response.status < 600) {
        // Серверная ошибка - повторяем попытку с экспоненциальной задержкой
        if (i < maxRetries - 1) {
          const delay = Math.min(1000 * Math.pow(2, i), 10000);
          await new Promise(resolve => setTimeout(resolve, delay));
          continue;
        }
      }
      
      return response;
    } catch (error) {
      if (i === maxRetries - 1) throw error;
    }
  }
}

• 500 Internal Server Error: Общая ошибка сервера без конкретной причины
• 501 Not Implemented: Сервер не поддерживает функциональность запроса
• 502 Bad Gateway: Проблема при проксировании запроса
• 503 Service Unavailable: Сервер временно недоступен (перегрузка, техработы)
• 504 Gateway Timeout: Таймаут при проксировании запроса

Практическое применение во фронтенд-разработке

Обработка ошибок должна быть дифференцированной:

• 4xx ошибки часто требуют действий пользователя (исправить данные, авторизоваться)
• 5xx ошибки обычно отображаются с предложением повторить попытку позже
• Кэширование на основе 304, 200 кодов
• Оптимистичные UI-обновления с откатом при получении 4xx/5xx ошибок

Мониторинг и аналитика:

• Отслеживание частоты 404 для выявления битых ссылок
• Мониторинг 5xx для оценки стабильности бэкенда
• Анализ 429 для настройки rate limiting на клиенте

UX-соображения:

• Пользовательские сообщения для разных типов ошибок
• Retry-логика для временных ошибок (5xx, 429)
• Graceful degradation при частичных отказах (206, 207 Multi-Status)

Понимание этих кодов позволяет создавать более устойчивые приложения, улучшать пользовательский опыт и эффективно взаимодействовать с бэкенд-разработчиками при диагностике проблем.