catchError for error handling in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the catchError operator from RxJS.

Angular

import { [1] } from 'rxjs/operators';

Drag options to blanks, or click blank then click option'

Afilter

Bmap

Ctap

DcatchError

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong operator like map or filter.

Forgetting to import catchError at all.

The catchError operator is imported from rxjs/operators to handle errors in observable streams.

2fill in blank

medium

Complete the code to use catchError inside the pipe to handle errors.

Angular

this.http.get('/api/data').pipe([1](error => {
  console.error(error);
  return of([]);
}))

Drag options to blanks, or click blank then click option'

Amap

Btap

CcatchError

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using map or tap instead of catchError for error handling.

Not returning a fallback observable inside catchError.

The catchError operator is used inside pipe to catch errors from the observable and handle them gracefully.

3fill in blank

hard

Fix the error in the catchError usage by completing the code.

Angular

this.http.get('/api/data').pipe(catchError([1] => {
  console.log('Error occurred');
  return of([]);
}))

Drag options to blanks, or click blank then click option'

Aerror

Bresult

Cdata

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated parameter names like 'data' or 'result' which confuse the error context.

Not using a parameter at all.

The parameter inside catchError callback represents the error object, so naming it error is clear and conventional.

4fill in blank

hard

Fill both blanks to create a catchError that logs the error and returns a fallback observable.

Angular

this.http.get('/api/items').pipe([1](err => {
  console.error('Error:', [2]);
  return of([]);
}))

Drag options to blanks, or click blank then click option'

AcatchError

Berr

Cerror

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'tap' instead of 'catchError' for error handling.

Logging a variable name that does not match the callback parameter.

Use catchError to handle errors, and inside the callback, log the err parameter to see what went wrong.

5fill in blank

hard

Fill all three blanks to handle errors by logging, showing a message, and returning a fallback observable.

Angular

this.http.get('/api/users').pipe([1](error => {
  console.error(error);
  this.message = [2];
  return [3]([]);
}))

Drag options to blanks, or click blank then click option'

AcatchError

B'Failed to load users'

Cof

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'tap' instead of 'catchError' for error handling.

Not returning an observable in catchError.

Using a variable instead of a string message.

Use catchError to catch errors, set a user-friendly message, and return an observable with an empty array using of.

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