В чем разница между HTTP-статусами 4xx и 5xx?

В чем разница между HTTP-статусами 4xx и 5xx

Основное правило

• 4xx (Client Error) — ошибка на стороне клиента (браузер/приложение)
• 5xx (Server Error) — ошибка на стороне сервера

Это фундаментальное разделение ответственности при отладке проблем.

4xx: Client Error

Что это значит

Клиент отправил неправильный запрос. Сервер отказывает правильно, проблема в запросе.

Основные коды 4xx

400 Bad Request

// Неправильный формат запроса
fetch('/api/users', {
  method: 'POST',
  body: 'invalid json {{'  // Некорректный JSON
});
// Статус 400: Сервер не может разобрать запрос

401 Unauthorized

// Требуется аутентификация
fetch('/api/private/data', {
  headers: {
    // Забыли отправить Authorization!
  }
});
// Статус 401: Требуется логин/токен

403 Forbidden

// Аутентифицирован, но нет доступа
fetch('/api/admin/settings', {
  headers: {
    'Authorization': 'Bearer valid_token'
    // Но пользователь не админ
  }
});
// Статус 403: Доступ запрещён (permissions)

404 Not Found

// Ресурс не существует
fetch('/api/users/999999');
// Статус 404: Пользователь не найден

405 Method Not Allowed

// Неправильный HTTP метод
fetch('/api/users/5', {
  method: 'DELETE'  // Но DELETE не разрешен
});
// Статус 405: Метод не поддерживается

409 Conflict

// Конфликт данных (например, дублирование)
fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ email: 'taken@example.com' })
});
// Статус 409: Email уже зарегистрирован

429 Too Many Requests

// Слишком много запросов (rate limiting)
for (let i = 0; i < 1000; i++) {
  fetch('/api/data');  // Спам запросов
}
// Статус 429: Подождите перед следующим запросом

5xx: Server Error

Что это значит

Сервер не смог обработать валидный запрос. Проблема на стороне сервера, клиент сделал всё правильно.

Основные коды 5xx

500 Internal Server Error

// Неопределённая ошибка на сервере
fetch('/api/users');
// Статус 500: На сервере произошла ошибка
// (обычно: uncaught exception, database crash, etc)

502 Bad Gateway

// Сервер-прокси не смог подключиться к upstream сервису
// Например, за nginx нет running приложения
// Статус 502: Промежуточный сервер недоступен

503 Service Unavailable

// Сервер временно недоступен
// Причины: maintenance, перегрузка, crash
fetch('/api/data');
// Статус 503: Попробуй позже
// Обычно с заголовком Retry-After

504 Gateway Timeout

// Upstream сервер не ответил вовремя
// Например, database запрос занял слишком долго
// Статус 504: Timeout при обращении к сервису

Сравнительная таблица

Практический пример обработки

function handleApiError(status, message) {
  if (status >= 400 && status < 500) {
    // Клиентская ошибка
    if (status === 401) {
      // Требуется переавторизация
      redirectToLogin();
    } else if (status === 403) {
      // Нет доступа
      showMessage('У вас нет доступа к этому ресурсу');
    } else if (status === 404) {
      // Не найдено
      showMessage('Ресурс не найден');
    } else {
      // Другие клиентские ошибки
      showMessage(`Ошибка в запросе: ${message}`);
    }
  } else if (status >= 500) {
    // Серверная ошибка
    showMessage('Ошибка сервера. Попробуйте позже.');
    // Обычно можно повторить запрос
    logToMonitoring(status, message);
  }
}

// Использование
fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      handleApiError(response.status, response.statusText);
    }
    return response.json();
  })
  .catch(error => {
    // Network error
    showMessage('Ошибка сети. Проверьте подключение.');
  });

Стратегия повторных попыток (Retry)

Повторять не нужно

// 4xx ошибки обычно постоянны
const DO_NOT_RETRY = [400, 401, 403, 404, 409];

if (DO_NOT_RETRY.includes(status)) {
  // Показать ошибку, не повторять
  return;
}

Повторять имеет смысл

// 5xx ошибки часто временны
const SHOULD_RETRY = [500, 502, 503, 504];

if (SHOULD_RETRY.includes(status)) {
  // Exponential backoff
  setTimeout(() => {
    retryRequest();
  }, 1000 * (2 ** attemptNumber));
}

Логирование и мониторинг

function logError(status, message, context) {
  const level = status >= 500 ? 'error' : 'warning';
  
  logger[level]({
    status,
    message,
    context,
    timestamp: new Date(),
  });
  
  // Для 5xx отправить в систему мониторинга
  if (status >= 500) {
    Sentry.captureException(new Error(message));
  }
}

Правила для Frontend разработчика

При 4xx ошибке:

1. Проверь формат запроса
2. Проверь Authorization header
3. Проверь наличие ресурса
4. Покажи понятное сообщение пользователю
5. Не повторяй запрос бездумно

При 5xx ошибке:

1. Это не твоя вина (обычно)
2. Покажи сообщение "Попробуйте позже"
3. Повтори запрос с экспоненциальной задержкой
4. Залогируй в систему мониторинга
5. Уведоми backend команду

Заключение

Понимание разницы между 4xx и 5xx критично для:

• Правильной обработки ошибок
• Отладки проблем
• Правильной стратегии повторов
• Информирования пользователя
• Мониторинга приложения