catchError for error handling in Angular - Step-by-Step Execution

Concept Flow - catchError for error handling

Observable emits value

↓

catchError intercepts error?

No→Pass value downstream

Yes↓

Handle error inside catchError

↓

Return fallback Observable or throw

↓

Observable continues or ends

This flow shows how catchError listens for errors in an Observable stream, handles them, and decides what to emit next.

Execution Sample

Angular

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

const source$ = throwError(() => new Error('Fail'))
  .pipe(catchError(err => of('Recovered')));

source$.subscribe(console.log);

This code creates an Observable that throws an error, then catchError catches it and returns a fallback Observable emitting 'Recovered'.

Execution Table

Step	Observable Action	Error?	catchError Action	Output Emitted
1	Observable starts	No	No action	No output yet
2	Observable throws Error('Fail')	Yes	catchError catches error	No output yet
3	catchError returns of('Recovered')	Handled	Emit fallback Observable	Emits 'Recovered'
4	Observable completes	No	No action	Stream ends

💡 Error is caught at step 2, replaced by fallback Observable emitting 'Recovered', so stream continues without error.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
error	undefined	Error('Fail')	Handled inside catchError	No error downstream
output	none	none	'Recovered'	'Recovered' emitted

Key Moments - 2 Insights

Why doesn't the error stop the Observable stream?

Because catchError catches the error at step 2 and returns a new Observable emitting 'Recovered' at step 3, replacing the error with a normal value.

What happens if catchError does not return a fallback Observable?

If catchError does not return a new Observable, the error will propagate and the stream will end with an error, as shown by the absence of fallback emission in the execution_table.

Visual Quiz - 3 Questions

Look at the execution table, what is emitted at step 3?

A Error object

B 'Recovered'

C No output

D 'Fail'

💡 Hint

Check the 'Output Emitted' column at step 3 in the execution_table.

At which step does catchError catch the error?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Error?' and 'catchError Action' columns in the execution_table.

If catchError returned throwError again instead of of('Recovered'), what would happen?

A Stream errors out and stops

B Stream completes normally

C Stream emits 'Recovered'

D Stream emits no values

💡 Hint

Refer to key_moments about what happens if catchError does not return a fallback Observable.

Concept Snapshot

catchError operator catches errors in an Observable stream.
It intercepts errors and lets you return a new Observable.
This prevents the stream from stopping due to errors.
Use it inside pipe() to handle errors gracefully.
Return a fallback Observable or rethrow error.
Example: source$.pipe(catchError(err => of('fallback')))

Full Transcript

The catchError operator in Angular RxJS listens for errors in an Observable stream. When an error occurs, catchError intercepts it and allows you to handle it by returning a new Observable, such as a fallback value. This prevents the error from stopping the stream. In the example, the source Observable throws an error, but catchError catches it and returns an Observable that emits 'Recovered'. This way, the subscriber receives 'Recovered' instead of an error. If catchError does not return a new Observable, the error will propagate and end the stream. This visual trace shows each step: the Observable starts, throws an error, catchError catches it, returns a fallback Observable, which emits 'Recovered', and then the stream completes normally.