catchError for error handling in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when catchError returns EMPTY in an Angular service?

Consider an Angular service method that uses catchError(() => EMPTY). What will the subscriber receive if an error occurs?

Angular

import { EMPTY } from 'rxjs';
import { catchError } from 'rxjs/operators';

this.http.get('/api/data').pipe(
  catchError(() => EMPTY)
).subscribe({
  next: data => console.log('Data:', data),
  error: err => console.log('Error:', err),
  complete: () => console.log('Completed')
});

A The subscriber receives no data, no error, and the observable completes silently.

B The subscriber receives an empty array as data and completes.

C The subscriber receives an error notification with the original error.

D The subscriber receives undefined as data and continues listening.

💡 Hint

Think about what EMPTY observable does in RxJS.

The EMPTY observable emits no items and immediately completes. Using catchError(() => EMPTY) swallows the error and completes the stream silently without emitting data or error.

📝 Syntax

intermediate

Identify the correct catchError usage to return a fallback value

Which option correctly uses catchError to return a fallback observable emitting the string 'fallback' on error?

Angular

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

this.http.get('/api/data').pipe(
  // catchError usage here
).subscribe(data => console.log(data));

A catchError(() => { return 'fallback'; })

B catchError(() => of('fallback'))

C catchError(() => 'fallback')

D catchError(() => of(fallback))

💡 Hint

The fallback must be an observable, not a plain value.

catchError expects a function returning an observable. of('fallback') creates an observable emitting the string 'fallback'. Options A and B return plain strings, causing errors. Option B references an undefined variable fallback.

🔧 Debug

advanced

Why does this catchError not handle the error as expected?

Given this code snippet, why does the error still propagate to the subscriber's error handler?

Angular

this.http.get('/api/data').pipe(
  catchError(err => {
    console.error('Error caught:', err);
    throw err;
  })
).subscribe({
  next: data => console.log('Data:', data),
  error: err => console.log('Subscriber error:', err)
});

A Because rethrowing the error inside catchError causes the observable to error again, propagating to subscriber.

B Because catchError must return a Promise to handle errors properly.

C Because catchError only catches synchronous errors, not HTTP errors.

D Because the error is swallowed and never reaches the subscriber.

💡 Hint

What happens if you throw inside a catchError callback?

Throwing an error inside catchError re-emits the error, causing the observable to error again and the subscriber's error handler to be called. To handle the error and prevent propagation, catchError must return a new observable.

❓ state_output

advanced

What is the output sequence when catchError returns a fallback observable?

What will be logged to the console when this code runs?

Angular

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

of('start').pipe(
  catchError(() => of('fallback'))
).subscribe({
  next: val => console.log('Next:', val),
  error: err => console.log('Error:', err),
  complete: () => console.log('Complete')
});

throwError(() => new Error('fail')).pipe(
  catchError(() => of('fallback'))
).subscribe({
  next: val => console.log('Next:', val),
  error: err => console.log('Error:', err),
  complete: () => console.log('Complete')
});

A

Next: start
Error: fail
Next: fallback
Complete

B

Next: start
Next: fallback
Complete
Complete

C

Next: start
Complete
Next: fallback
Complete

D

Error: fail
Next: fallback
Complete
Complete

💡 Hint

Remember that of emits values and completes, and throwError emits an error.

The first observable emits 'start' and completes normally. The second observable errors, but catchError catches it and returns of('fallback'), which emits 'fallback' and completes. So the logs show 'Next: start', 'Complete', then 'Next: fallback', 'Complete'.

🧠 Conceptual

expert

Why is catchError preferred over try-catch for handling HTTP errors in Angular?

In Angular services using RxJS, why should you use catchError instead of a traditional try-catch block to handle HTTP errors?

A Because HTTP calls are asynchronous and return observables, so errors must be handled in the observable stream using catchError.

B Because try-catch blocks only work with synchronous code and cannot catch errors from observables.

C Because catchError allows you to recover from errors and continue the observable stream, unlike try-catch.

D All of the above.

💡 Hint

Think about how asynchronous code and observables work in Angular.

All statements are true: HTTP calls return observables which are asynchronous. try-catch cannot catch errors inside observables. catchError handles errors inside the observable stream and can recover or replace the stream, making it the correct choice.