Angular Academy · Lección

Gestión global de errores

Capturar y transformar los errores HTTP de forma centralizada

Lección 3 de 413 pasos

Gestión global de errores es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Gestión centralizada de errores

En lugar de capturar los errores HTTP en cada componente, un interceptor puede gestionarlos globalmente: registrarlos, mostrar una notificación, redirigir en caso de 401 o normalizar la estructura del error.

catchError en un interceptor

Conduzca el flujo de next(req) a través de catchError para interceptar los fallos.

import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      console.error('HTTP error', err.status);
      return throwError(() => err);
    })
  );

Inspeccionar HttpErrorResponse

HttpErrorResponse contiene status, message y el cuerpo de error del servidor. Evalúe el estado para gestionar cada caso.

catchError((err: HttpErrorResponse) => {
  if (err.status === 0) console.error('network/CORS error');
  else console.error('server error', err.status);
  return throwError(() => err);
})

Redirigir en caso de 401

Un 401 normalmente significa que la sesión ha caducado. Redirija al inicio de sesión desde el interceptor.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      if (err.status === 401) router.navigate(['/login']);
      return throwError(() => err);
    })
  );
};

Mostrar una notificación

Inyecte un servicio de notificaciones o de mensajes emergentes para mostrar los errores al usuario de forma coherente.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const toast = inject(ToastService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      toast.error(err.error?.message ?? 'Something went wrong');
      return throwError(() => err);
    })
  );
};

Volver a lanzar frente a ignorar

Normalmente, vuelva a lanzar el error con throwError(() => err) para que los componentes puedan reaccionar. Devuelva un observable alternativo (como of(null)) solo cuando realmente quiera ocultar el error a quienes llaman.

Normalizar el error

Convierta los distintos cuerpos de error del servidor en una estructura de error coherente de la aplicación antes de volver a lanzarlos, para simplificar la gestión posterior.

catchError((err: HttpErrorResponse) => {
  const appError = {
    code: err.status,
    message: err.error?.message ?? err.message
  };
  return throwError(() => appError);
})

Distinguir entre errores del cliente y del servidor

err.error instanceof ErrorEvent (o err.status === 0) indica un error del cliente o de red; de lo contrario, el backend devolvió un estado de error. Gestiónelos de forma diferente.

Evitar gestionar dos veces el mismo error

Si el interceptor ya muestra una notificación, los componentes no deberían mostrar otra para el mismo error. Elija una sola capa de gestión visible para el usuario y evite mensajes duplicados.

Registrar en un servicio de supervisión

Un interceptor central es el lugar ideal para enviar errores a una herramienta de supervisión (Sentry, etc.) junto con el contexto de la solicitud.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const monitor = inject(MonitoringService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      monitor.captureHttpError(req.url, err.status, err.message);
      return throwError(() => err);
    })
  );
};

Ordenar el interceptor de errores

Coloque el interceptor de errores de modo que envuelva a los demás y pueda capturar los errores de toda la cadena, incluidos los reintentos.

provideHttpClient(
  withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)

Comprobación rápida

Compruebe su comprensión de la gestión global de errores.

Responde en la lección interactiva

Resumen: gestionar errores globalmente

Un interceptor de errores centraliza la gestión de fallos HTTP.

Use catchError sobre next(req).
Evalúe HttpErrorResponse.status (por ejemplo, redirija en caso de 401).
Vuelva a lanzar el error para que los componentes reaccionen; ignórelo solo cuando sea intencionado.

Siguiente: reintentos e indicadores de carga.

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 38
Lecciones: 144

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Gestión global de errores» es gratis?

Sí — el texto completo de «Gestión global de errores» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Gestión global de errores»?

Capturar y transformar los errores HTTP de forma centralizada Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Gestión global de errores»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy