Axios Interceptor + TypeScript (Vite + React)

Proyecto mínimo y didáctico para configurar interceptores de Axios (request/response) y unificar el manejo de errores de forma tipada y legible para el usuario.

---

🎯 Objetivo

• Entender dónde y cómo inicializar interceptores de Axios.
• Enriquecer requests con headers comunes.
• Interceptar respuestas y unificar el manejo de errores.
• Mapear AxiosError.code a mensajes claros usando TypeScript.

---

🧰 Stack

• React + TypeScript + Vite
• Axios
• Sonner (toasts) para notificaciones

---

📁 Archivos relevantes

• src/interceptors/axios.interceptors.ts: Interceptor global de Axios (request/response + notificaciones de error).
• src/utils/getValidationsError.utils.ts: Traduce AxiosError.code a mensajes legibles.
• src/models/typeWithKey.ts: Tipo TypeWithKey para mapeo tipado de códigos de error de Axios.
• src/services/testing.service.ts: Servicio de ejemplo que dispara una petición para observar el interceptor.

---

⚙️ Cómo funciona el interceptor

Request

• Inserta encabezados comunes: Authorization y Content-Type.
• Omite la inyección de headers para rutas de assets (por ejemplo, archivos estáticos bajo /assets).
• Usa AbortController de forma intencional para cancelar inmediatamente la petición (propósito didáctico), provocando ERR_CANCELED en Axios.

Nota: La cancelación es intencional para observar el pipeline de errores. Si quieres que la petición continúe normalmente, comenta las líneas marcadas en src/interceptors/axios.interceptors.ts:

axios.interceptors.request.use((request) => {
  // const controller = new AbortController();
  // request.signal = controller.signal;
  // controller.abort("Cancelado desde el interceptor");
  return request;
});

Response

• Registra en consola las respuestas exitosas.
• En errores de Axios, obtiene un mensaje claro con getValidationsErrorUtils(error.code) y lo muestra con Sonner (toast).

---

🧪 Manejo de errores tipado

• TypeWithKey (src/models/typeWithKey.ts):
  • Define un mapa con claves restringidas a los códigos de error oficiales de Axios (ERR_BAD_OPTION_VALUE, ERR_CANCELED, ERR_NETWORK, etc.).
  • Garantiza en tiempo de compilación que cada código contemplado tenga un mensaje asociado.
• getValidationsErrorUtils (src/utils/getValidationsError.utils.ts):
  • Recibe AxiosError.code y devuelve un mensaje en español pensado para UX.
  • Si no existe code o no está reconocido, devuelve un mensaje genérico útil para soporte/depuración.

---

🔁 Flujo didáctico

1. La app inicializa el interceptor al arrancar.
2. Cualquier petición es cancelada inmediatamente para disparar un error controlado.
3. El interceptor de respuesta detecta error de Axios → mapea code a texto → muestra notificación.

---

📌 Servicio de ejemplo

• testing.service.ts realiza una petición a la API de Rick and Morty para observar el comportamiento del interceptor.
• Permite verificar que:
  • Se inyectan headers.
  • Se ejecuta (o no) la cancelación, según lo configurado.
  • Se muestra el mensaje correcto mapeado por getValidationsErrorUtils.

---

🚀 Ejecutar

npm install
npm run dev

Abre la app y observa en consola/toasts el comportamiento del interceptor. Si deseas que la petición se complete, recuerda comentar la cancelación con AbortController como se indicó arriba.