Error Handling with catchError

HTTP errors arrive in the error channel of the Observable. catchError lets you intercept and recover from failures.

Basic Error Handling

import { catchError, throwError } from 'rxjs';

this.http.get<User[]>('/api/users').pipe(
  catchError(error => {
    console.error('Request failed:', error.message);
    return throwError(() => new Error('Failed to load users'));
  })
).subscribe({
  next: users => console.log('Users:', users),
  error: err => console.error('Error:', err.message),
});

HttpErrorResponse

import { HttpErrorResponse } from '@angular/common/http';

catchError((error: HttpErrorResponse) => {
  if (error.error instanceof ErrorEvent) {
    // Client-side or network error
    console.error('Client error:', error.error.message);
  } else {
    // Server-side error
    console.error(`Server error: ${error.status} ${error.statusText}`);
    console.error('Error body:', error.error);
  }
  return throwError(() => error);
})

Common HTTP Status Codes

Fallback Values

getUsers(): Observable<User[]> {
  return this.http.get<User[]>('/api/users').pipe(
    catchError(() => of([])) // Return empty array on error
  );
}

Retry Logic

import { retry, catchError } from 'rxjs';

getUsers(): Observable<User[]> {
  return this.http.get<User[]>('/api/users').pipe(
    retry(2), // Retry up to 2 times before failing
    catchError(error => {
      console.error('Failed after retries:', error);
      return of([]);
    })
  );
}

Different HTTP status codes require different handling strategies.

Status-Specific Handler

private handleError(error: HttpErrorResponse): Observable<never> {
  if (error.status === 401) {
    // Redirect to login
    this.router.navigate(['/login']);
    return throwError(() => new Error('Session expired'));
  }

  if (error.status === 403) {
    this.notification.show('Access denied');
    return throwError(() => new Error('Forbidden'));
  }

  if (error.status === 404) {
    this.notification.show('Resource not found');
    return throwError(() => new Error('Not found'));
  }

  if (error.status >= 500) {
    this.notification.show('Server error. Please try again.');
    return throwError(() => new Error('Server error'));
  }

  return throwError(() => error);
}

Using in a Service

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  private router = inject(Router);

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users').pipe(
      catchError(error => this.handleError(error))
    );
  }

  private handleError(error: HttpErrorResponse): Observable<never> {
    // Status-specific handling
    return throwError(() => error);
  }
}

Global Error Interceptor

For centralized error handling, use an HTTP interceptor (covered in the next topic).