error

catchError

Catches errors from the source Observable and handles them by returning a new Observable or re-throwing — keeps the stream alive after an error.

Signature

catchError<T, O extends ObservableInput<any>>(selector: (err: any, caught: Observable<T>) => O): OperatorFunction<T, T | ObservedValueOf<O>>

Marble Diagram

source:  --1--2--X
catchError(() => of(0))
result:  --1--2--0|
(error replaced with fallback value)

Example

import { of } from 'rxjs'
import { catchError, retry } from 'rxjs/operators'
import { ajax } from 'rxjs/ajax'

ajax.getJSON('/api/data').pipe(
  retry(2),
  catchError(err => {
    console.error('Failed after 2 retries', err)
    return of({ data: [], error: true })
  })
).subscribe(response => render(response))

Common Use Cases

Return a fallback value when an HTTP request fails
Show a user-friendly error state instead of crashing the stream
Log errors and switch to a cached or default data source

Flow Diagram