Sign in
Skip to solution
mediumFrontend

How does catchError work in RxJS, and how do you return a fallback value?

938 views
01

Understand the problem

Describe RxJS catchError operator and error recovery.

rxjserror-handling
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

catchError intercepts error notifications in an observable stream. To handle the error and return a fallback value, return a new observable emitting the fallback (e.g. of(fallbackValue)), which completes the source stream cleanly.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Graceful error recovery using catchError
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, inject } from '@angular/core';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app-users',
  template: '<ul>@for (u of users; track u.id) { <li>{{ u.name }}</li> }</ul>'
})
export class UsersComponent implements OnInit {
  private http = inject(HttpClient);
  users: any[] = [];

  ngOnInit() {
    this.http.get<any[]>('/api/faulty-users-endpoint')
      .pipe(
        catchError(error => {
          console.error('Request failed:', error);
          return of([]);
        })
      )
      .subscribe(data => this.users = data);
  }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 25 of 121 decoded in the Angular track. One more won't hurt.

Back to track