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.

Practice

1. What is the main purpose of catchError in Angular's RxJS?

easy

A. To delay the emission of values in an Observable

B. To catch errors in an Observable stream and handle them gracefully

C. To create a new Observable from scratch

D. To unsubscribe from an Observable automatically

Solution

1. Step 1: Understand what catchError does

   catchError is used to catch errors that happen in an Observable stream and lets you handle them without breaking the stream.

2. Step 2: Compare with other options

   Creating new Observables, delaying emissions, or unsubscribing are different RxJS tasks not related to catchError.

3. Final Answer:

   To catch errors in an Observable stream and handle them gracefully -> Option B

4. Quick Check:

   catchError handles errors [OK]

Hint: catchError is for handling errors inside Observable streams [OK]

Common Mistakes:

• Thinking catchError creates Observables
• Confusing catchError with delay or unsubscribe
• Assuming catchError stops the Observable completely

2. Which of the following is the correct syntax to use catchError inside an Observable pipe?

easy

A. catchError(observable, error => of('Error caught'))

B. observable.catchError(error => of('Error caught'))

C. observable.pipe(catchError(error => of('Error caught')))

D. observable.pipe(catchError => error => of('Error caught'))

Solution

1. Step 1: Recall the correct usage of catchError

   catchError is used inside pipe() and takes a function with an error parameter returning a new Observable.

2. Step 2: Identify the correct syntax

   observable.pipe(catchError(error => of('Error caught'))) correctly uses pipe(catchError(error => of('Error caught'))). Other options misuse method chaining or syntax.

3. Final Answer:

   observable.pipe(catchError(error => of('Error caught'))) -> Option C

4. Quick Check:

   Use catchError inside pipe() [OK]

Hint: Always use catchError inside pipe() with a function [OK]

Common Mistakes:

• Calling catchError directly on observable
• Wrong arrow function syntax inside catchError
• Passing catchError arguments incorrectly

3. Given the code below, what will be the output?

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

const source$ = throwError(() => new Error('Oops!'));

source$.pipe(
  catchError(err => of('Error handled'))
).subscribe(value => console.log(value));

medium

A. Throws an error and stops

B. No output

C. Logs 'Oops!'

D. Logs 'Error handled'

Solution

1. Step 1: Understand throwError and catchError interaction

   throwError creates an Observable that immediately errors. catchError catches this error and returns a new Observable emitting 'Error handled'.

2. Step 2: Trace the subscription output

   The subscriber receives 'Error handled' and logs it. The original error is replaced by the catchError Observable.

3. Final Answer:

   Logs 'Error handled' -> Option D

4. Quick Check:

   catchError replaces error with new value [OK]

Hint: catchError replaces error with new Observable output [OK]

Common Mistakes:

• Expecting original error to be logged
• Thinking error stops the stream without catchError
• Confusing error message with emitted value

4. Identify the error in this code snippet using catchError:

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

const source$ = throwError(() => new Error('Fail'));

source$.pipe(
  catchError(err) {
    return of('Recovered');
  }
).subscribe(console.log);

medium

A. Missing parentheses around catchError argument function

B. Using throwError incorrectly

C. Not subscribing to the Observable

D. Returning a string instead of an Observable inside catchError

Solution

1. Step 1: Check catchError function syntax

   The argument to catchError must be a function expression or arrow function inside parentheses. Here, parentheses are missing around the function.

2. Step 2: Verify other parts

   throwError usage is correct, subscription exists, and return value inside catchError is an Observable (of('Recovered')), so no issues there.

3. Final Answer:

   Missing parentheses around catchError argument function -> Option A

4. Quick Check:

   Function argument to catchError needs parentheses [OK]

Hint: Wrap catchError callback in parentheses or use arrow function [OK]

Common Mistakes:

• Omitting parentheses around function in catchError
• Returning non-Observable values inside catchError
• Not subscribing to see output

5. You want to retry an HTTP request up to 3 times and then handle errors gracefully using catchError. Which code snippet correctly combines retry and catchError?

hard

A. http.get(url).pipe(retry(3), catchError(err => of('Failed after retries')))

B. http.get(url).pipe(catchError(err => of('Failed')), retry(3))

C. http.get(url).pipe(catchError(err => retry(3)), of('Failed'))

D. http.get(url).pipe(retry(3).catchError(err => of('Failed')))

Solution

1. Step 1: Understand operator order in pipe

   retry(3) should come before catchError so retries happen before error handling.

2. Step 2: Analyze each option

   http.get(url).pipe(retry(3), catchError(err => of('Failed after retries'))) correctly chains retry(3) then catchError. http.get(url).pipe(catchError(err => of('Failed')), retry(3)) reverses order, so catchError stops retries. http.get(url).pipe(catchError(err => retry(3)), of('Failed')) misuses catchError and retry. http.get(url).pipe(retry(3).catchError(err => of('Failed'))) uses invalid chaining syntax.

3. Final Answer:

   http.get(url).pipe(retry(3), catchError(err => of('Failed after retries'))) -> Option A

4. Quick Check:

   retry before catchError in pipe [OK]

Hint: Place retry before catchError inside pipe() [OK]

Common Mistakes:

• Putting catchError before retry disables retries
• Using invalid chaining syntax
• Returning non-Observable inside catchError