catchError for error handling in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of catchError in Angular?

catchError is used to handle errors in observable streams. It lets you catch errors and return a new observable or perform side effects, preventing the app from crashing.

beginner

How do you import <code>catchError</code> in an Angular service?

<p>You import it from <code>rxjs/operators</code> like this:<br><code>import { catchError } from 'rxjs/operators';</code></p>

intermediate

What does the catchError operator expect as its argument?

It expects a function that takes an error and returns a new observable, often using of() to emit a fallback value or throwError() to rethrow.

beginner

Show a simple example of using catchError in an HTTP request.

this.http.get('/api/data').pipe(
  catchError(error => {
    console.error('Error caught:', error);
    return of([]); // Return empty array as fallback
  })
);

beginner

Why is it important to handle errors with catchError in Angular apps?

Handling errors prevents the app from crashing, improves user experience by showing friendly messages or fallback data, and helps developers debug issues.

What does catchError return when it catches an error?

A A plain value

B A promise

C A new observable

D An error object

catchError returns a new observable to replace the error stream.

Where do you import catchError from in Angular?

A 'rxjs/operators'

B '@angular/core'

C 'rxjs'

D '@angular/common/http'

catchError is imported from rxjs/operators.

Which RxJS function is commonly used inside catchError to return fallback data?

A of()

B map()

C filter()

D throwError()

of() creates an observable emitting fallback data inside catchError.

What happens if you don't use catchError in an observable that errors?

A The observable will ignore the error

B The error will crash the app or stop the stream

C The error will be logged automatically

D The observable will retry automatically

Without catchError, errors can crash the app or stop the observable stream.

Which of these is a correct way to use catchError?

A observable.catchError(error => throw error)

B catchError(observable => error)

C catchError(() => console.log('error'))

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

The correct usage is to pipe catchError with a function returning a new observable.

Explain how catchError helps in managing errors in Angular observable streams.

Think about what happens when an error occurs in a data stream.

Describe a simple example of using catchError with an HTTP request in Angular.

Imagine you want to show empty data if the server fails.