Как глобально перехватываешь ошибки от Backend через Axios?

Как глобально перехватываешь ошибки от Backend через Axios?

Response Interceptor для ошибок

Перевхватываем ошибки на уровне HTTP ответа:

const apiClient = axios.create({
  baseURL: "https://api.example.com"
});

apiClient.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      window.location.href = "/login";
    } else if (error.response?.status === 403) {
      console.error("Access denied");
    } else if (error.response?.status === 500) {
      console.error("Server error");
    }
    return Promise.reject(error);
  }
);

Обработка по статусам

apiClient.interceptors.response.use(
  response => response,
  error => {
    const status = error.response?.status;
    const message = error.response?.data?.message || error.message;
    
    switch (status) {
      case 400:
        console.error("Bad Request");
        break;
      case 401:
        redirectToLogin();
        break;
      case 403:
        showNotification("No access");
        break;
      case 404:
        showNotification("Not found");
        break;
      case 500:
        showNotification("Server error");
        break;
    }
    
    return Promise.reject(error);
  }
);

Request Interceptor для токена

apiClient.interceptors.request.use(
  config => {
    const token = localStorage.getItem("authToken");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  }
);

Retry логика

import axiosRetry from "axios-retry";

axiosRetry(apiClient, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay,
  retryCondition: error => 
    error.response?.status === 503 || !error.response
});

Custom Error Class

class ApiError extends Error {
  constructor(public status: number, public message: string) {
    super(message);
    this.name = "ApiError";
  }
}

apiClient.interceptors.response.use(
  response => response,
  error => Promise.reject(
    new ApiError(
      error.response?.status || 0,
      error.response?.data?.message || error.message
    )
  )
);

Полный пример

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  timeout: 10000
});

// Добавление токена
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem("authToken");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Обработка ошибок
apiClient.interceptors.response.use(
  response => response,
  error => {
    const status = error.response?.status;
    
    if (status === 401) {
      localStorage.removeItem("authToken");
      window.location.href = "/login";
    }
    
    console.error(`API Error [${status}]`);
    return Promise.reject(error);
  }
);

export default apiClient;

Преимущества

1. Обработка ошибок в одном месте
2. Автоматическое добавление токена ко всем запросам
3. Глобальное логирование
4. Retry для временных ошибок
5. Перенаправление при 401 (неавторизированный доступ)
6. Единообразная обработка ошибок во всем приложении