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.