Angular Academy · Lección

Operadores de gestión de errores

Recupérese con catchError y retry.

Operadores de gestión de errores es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 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.

Errores en los observables

Cuando un observable emite un error, se termina: no emite más valores y se ejecuta el gestor de errores. Los operadores de errores permiten recuperarse, reintentar o transformar los errores en lugar de interrumpir el stream.

La ruta del error

Gestione los errores en el observer o mediante operadores. Sin gestión, un error no controlado puede cerrar la suscripción.

this.http.get('/api/data').subscribe({
  next: d => console.log(d),
  error: err => console.error('failed', err)
});

catchError

catchError intercepta un error y devuelve un observable de reemplazo, lo que permite que el stream continúe correctamente.

import { catchError, of } from 'rxjs';

this.http.get('/api/data').pipe(
  catchError(err => {
    console.error(err);
    return of([]); // fallback value
  })
).subscribe(data => console.log(data));

Volver a lanzar errores de forma selectiva

Dentro de catchError puede inspeccionar el error y decidir si recuperarse o volver a lanzarlo con throwError.

import { catchError, throwError, of } from 'rxjs';

source$.pipe(
  catchError(err =>
    err.status === 404 ? of(null) : throwError(() => err)
  )
).subscribe();

retry

retry(n) vuelve a suscribirse a la fuente hasta n veces cuando se produce un error; resulta útil para fallos de red transitorios.

import { retry } from 'rxjs';

this.http.get('/api/flaky').pipe(
  retry(2) // try up to 3 times total
).subscribe(d => console.log(d));

retry con configuración

La forma de objeto añade un retraso entre intentos (y admite una función de backoff), evitando saturar el servidor.

this.http.get('/api/flaky').pipe(
  retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));

Backoff al estilo de retryWhen

Para aplicar un backoff exponencial, la opción delay puede ser una función que devuelva un observable con retrasos progresivamente mayores en cada intento.

import { timer } from 'rxjs';

source$.pipe(
  retry({
    delay: (err, count) => timer(count * 1000)
  })
).subscribe();

catchError después de retry

Combínelos: reintente los fallos transitorios y, si se agotan los reintentos, recurra a una alternativa de forma controlada.

this.http.get('/api/data').pipe(
  retry({ count: 2, delay: 500 }),
  catchError(() => of([]))
).subscribe(data => console.log(data));

La posición importa

La posición de catchError en el pipe determina su ámbito. Dentro de un switchMap, captura los errores de cada solicitud interna y mantiene activo el stream externo; al final, captura todos los errores.

term$.pipe(
  switchMap(t => this.http.get('/api?q=' + t).pipe(
    catchError(() => of([])) // outer stream survives
  ))
).subscribe();

EMPTY como alternativa silenciosa

Devolver EMPTY desde catchError completa el stream sin ningún valor; resulta útil cuando desea ocultar el error y no emitir nada.

import { EMPTY, catchError } from 'rxjs';

source$.pipe(
  catchError(() => EMPTY)
).subscribe();

finalize para la limpieza

finalize ejecuta una función de callback cuando el stream termina por cualquier motivo: finalización, error o cancelación de la suscripción. Combínelo con la gestión de errores para restablecer siempre el estado de carga.

import { finalize, catchError, of } from 'rxjs';

this.loading = true;
source$.pipe(
  catchError(() => of([])),
  finalize(() => this.loading = false)
).subscribe();

Comprobación rápida

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

Repaso: operadores de gestión de errores

Los errores terminan un stream si no se gestionan.

catchError: se recupera devolviendo un observable de reemplazo.
retry: vuelve a suscribirse cuando se produce un error, con retraso o backoff opcional.
La posición (dentro de switchMap o al final) controla el ámbito.

Ha completado Operadores de RxJS en profundidad.

Preguntas frecuentes

¿La lección «Operadores de gestión de errores» es gratis?

Sí — el texto completo de «Operadores de gestión 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 «Operadores de gestión de errores»?

Recupérese con catchError y retry. 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 4 de 4.

¿Cuánto tiempo toma la lección «Operadores de gestión 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