catchError for error handling in Angular - Performance & Optimization

Performance: catchError for error handling

MEDIUM IMPACT

This affects how asynchronous errors are handled without blocking UI responsiveness or causing unnecessary re-renders.

Handling errors in an Angular Observable stream

Angular

this.dataService.getData().pipe(catchError(err => { this.error = err; return of([]); })).subscribe(data => this.data = data);

catchError handles errors inside the stream, preventing unhandled exceptions and allowing graceful fallback without blocking UI.

📈 Performance GainPrevents blocking rendering and reduces unnecessary change detection cycles

Handling errors in an Angular Observable stream

Angular

this.dataService.getData().subscribe({ next: data => this.data = data, error: err => { this.error = err; throw err; } });

Throwing errors inside subscribe causes unhandled exceptions and can block UI updates or crash the app.

📉 Performance CostBlocks rendering and triggers multiple change detection cycles on error

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Throw error inside subscribe	Multiple due to error propagation	Multiple reflows due to repeated change detection	High paint cost on error UI updates	[X] Bad
Use catchError with fallback	Minimal, only necessary updates	Single reflow for fallback UI	Low paint cost	[OK] Good

Rendering Pipeline

Errors caught by catchError prevent the stream from terminating abruptly, allowing Angular's change detection to update only necessary parts without re-rendering the whole component.

→JavaScript Execution

→Change Detection

→Render

⚠️ BottleneckChange Detection triggered by unhandled errors

Core Web Vital Affected

INP

This affects how asynchronous errors are handled without blocking UI responsiveness or causing unnecessary re-renders.

Optimization Tips

1Always use catchError to handle errors inside Observable streams.

2Return fallback values in catchError to keep the stream alive and UI responsive.

3Avoid throwing errors inside subscribe error handlers to prevent blocking rendering.

Performance Quiz - 3 Questions

What is the main performance benefit of using catchError in Angular Observable streams?

A It increases bundle size significantly

B It prevents unhandled errors from blocking UI updates

C It triggers multiple reflows to update the UI

D It delays the initial page load

DevTools: Performance

How to check: Record a session while triggering an error in the Observable stream. Look for long tasks or multiple change detection cycles.

What to look for: Check for repeated change detection events and long scripting times indicating blocking caused by unhandled errors.

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