Angular Academy · Lesson

Error Handling Operators

Recover with catchError and retry.

Error Handling Operators is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Errors in observables

When an observable emits an error, it terminates: no more values, and the error handler runs. Error operators let you recover, retry, or transform errors instead of breaking the stream.

The error path

Handle errors in the observer or with operators. Without handling, an unhandled error can crash the subscription.

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

catchError

catchError intercepts an error and returns a replacement observable, letting the stream continue gracefully.

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));

Re-throwing selectively

Inside catchError you can inspect the error and decide to recover or re-throw with throwError.

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

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

retry

retry(n) re-subscribes to the source up to n times when it errors — useful for transient network failures.

import { retry } from 'rxjs';

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

retry with config

The object form adds a delay between attempts (and supports a backoff function), avoiding hammering the server.

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

retryWhen-style backoff

For exponential backoff, the delay option can be a function returning an observable that delays progressively longer per attempt.

import { timer } from 'rxjs';

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

catchError after retry

Combine them: retry transient failures, then fall back gracefully if retries are exhausted.

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

Placement matters

The position of catchError in the pipe determines scope. Inside a switchMap it catches per-inner-request, keeping the outer stream alive; at the end it catches everything.

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

EMPTY as a silent fallback

Returning EMPTY from catchError completes the stream with no value — useful when you want to swallow the error and emit nothing.

import { EMPTY, catchError } from 'rxjs';

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

finalize for cleanup

finalize runs a callback when the stream ends for any reason — completion, error, or unsubscription. Pair it with error handling to always reset loading state.

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

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

Quick Check

Test your understanding of error handling.

Recap: Error Handling Operators

Errors terminate a stream unless handled.

catchError: recover by returning a replacement observable.
retry: re-subscribe on failure, with optional delay/backoff.
Placement (inside switchMap vs at the end) controls scope.

You have completed RxJS Operators in Depth.

Frequently asked questions

Is the “Error Handling Operators” lesson free?

Yes — the full text of “Error Handling Operators” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Error Handling Operators”?

Recover with catchError and retry. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Error Handling Operators” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy