Handling HTTP errors in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of handling HTTP errors in Angular?

Handling HTTP errors helps your app respond gracefully when a server request fails, like showing a message or retrying, instead of crashing or freezing.

beginner

Which Angular service is commonly used to make HTTP requests and handle errors?

The HttpClient service is used to make HTTP requests. It returns Observables that you can use with operators like catchError to handle errors.

intermediate

What does the catchError operator do in Angular's HTTP error handling?

catchError intercepts an error from an Observable stream, allowing you to handle it by returning a new Observable or throwing a user-friendly error.

intermediate

How can you show a user-friendly message when an HTTP error occurs in Angular?

You can catch the error using catchError, then return a fallback value or throw a custom error message that your component can display to the user.

beginner

Why is it important to handle HTTP errors instead of ignoring them?

Ignoring errors can cause your app to behave unpredictably or crash. Handling errors keeps the app stable and improves user trust by explaining what went wrong.

Which Angular operator is used to catch errors from HTTP requests?

A map

B tap

C filter

D catchError

catchError is the RxJS operator designed to catch and handle errors in Observable streams, including HTTP requests.

What does HttpClient return when making an HTTP request?

A Observable

B Promise

C Callback function

D EventEmitter

HttpClient returns an Observable, which allows you to subscribe and handle data or errors asynchronously.

If an HTTP request fails, what should you do in your Angular app?

A Ignore the error

B Handle the error and show a message

C Reload the page automatically

D Stop the app

Handling errors and showing a friendly message helps users understand the problem and keeps the app stable.

Which Angular service do you inject to make HTTP calls?

A HttpModule

B HttpService

C HttpClient

D HttpRequest

HttpClient is the Angular service used to perform HTTP requests.

What is a good practice when catching HTTP errors?

A Return a fallback value or message

B Throw the raw error to the user

C Ignore the error silently

D Reload the app automatically

Returning a fallback value or user-friendly message improves user experience and app stability.

Explain how you would handle an HTTP error in an Angular service using HttpClient and catchError.

Think about how Observables and catchError work together.

Why is it important to handle HTTP errors in your Angular app instead of ignoring them?

Consider what happens if errors are not handled.

Practice

1. What is the main purpose of using catchError in Angular HTTP requests?

easy

A. To handle errors that occur during the HTTP request

B. To retry the HTTP request automatically

C. To transform the HTTP response data

D. To cancel the HTTP request

Solution

1. Step 1: Understand the role of catchError

   catchError is used to catch errors in an observable stream, such as HTTP requests.

2. Step 2: Identify its purpose in HTTP requests

   It allows handling errors gracefully instead of letting them crash the app or go unhandled.

3. Final Answer:

   To handle errors that occur during the HTTP request -> Option A

4. Quick Check:

   catchError handles HTTP errors = A [OK]

Hint: Remember catchError catches errors in observable streams [OK]

Common Mistakes:

• Thinking catchError retries requests automatically
• Confusing catchError with data transformation operators
• Assuming catchError cancels requests

2. Which of the following is the correct syntax to catch HTTP errors in Angular using RxJS operators?

easy

A. this.http.get(url).catchError(error => throwError(error))

B. this.http.get(url).pipe(catchError(error => throwError(() => error)))

C. this.http.get(url).pipe(map(error => throwError(error)))

D. this.http.get(url).subscribe(catchError(error => throwError(error)))

Solution

1. Step 1: Recognize correct RxJS operator usage

   In Angular, pipe() is used to chain operators like catchError.

2. Step 2: Check the syntax of catchError

   The correct form is catchError(error => throwError(() => error)) inside pipe().

3. Final Answer:

   this.http.get(url).pipe(catchError(error => throwError(() => error))) -> Option B

4. Quick Check:

   Use pipe with catchError and throwError = B [OK]

Hint: Always use pipe() to chain catchError in Angular HTTP calls [OK]

Common Mistakes:

• Using catchError outside pipe()
• Using map instead of catchError for errors
• Passing throwError without a function wrapper

3. Consider this Angular service code snippet:

getData() {
  return this.http.get('/api/data').pipe(
    catchError(err => {
      console.error('Error:', err.message);
      return throwError(() => new Error('Failed to load data'));
    })
  );
}

What will happen when the HTTP request fails?

medium

A. The HTTP request is retried automatically

B. The error is ignored and the observable completes successfully

C. The error is logged and a new error is passed to subscribers

D. The app crashes due to unhandled error

Solution

1. Step 1: Analyze catchError behavior on failure

   When the HTTP request fails, catchError runs, logging the error message.

2. Step 2: Understand throwError usage

   It returns a new error observable with a friendly message, passing it to subscribers.

3. Final Answer:

   The error is logged and a new error is passed to subscribers -> Option C

4. Quick Check:

   catchError logs and rethrows error = A [OK]

Hint: catchError logs error then returns throwError to notify subscribers [OK]

Common Mistakes:

• Assuming error is ignored or swallowed
• Thinking HTTP request retries automatically
• Believing app crashes without catchError

4. Identify the error in this Angular HTTP error handling code:

this.http.get('/api/items').pipe(
  catchError(error => {
    console.log('Error:', error);
    return throwError(error);
  })
).subscribe(data => console.log(data));

medium

A. throwError should be called with a function: throwError(() => error)

B. catchError should be outside pipe()

C. subscribe should be before pipe()

D. console.log cannot be used inside catchError

Solution

1. Step 1: Check throwError usage

   In RxJS 7+, throwError requires a function returning the error: throwError(() => error).

2. Step 2: Verify catchError and subscribe placement

   catchError must be inside pipe(), and subscribe after pipe(), which is correct here.

3. Final Answer:

   throwError should be called with a function: throwError(() => error) -> Option A

4. Quick Check:

   throwError needs function wrapper = D [OK]

Hint: Use throwError(() => error) to avoid RxJS errors [OK]

Common Mistakes:

• Calling throwError directly with error object
• Placing catchError outside pipe()
• Misordering subscribe and pipe()

5. You want to show a friendly message to users when an HTTP error occurs, but still log the original error for debugging. Which code snippet correctly implements this in Angular?

hard

A. return this.http.get(url).pipe(catchError(err => { console.error(err); return of('Error occurred'); }))

B. return this.http.get(url).pipe(catchError(err => { return throwError(() => new Error('Error occurred')); }))

C. return this.http.get(url).pipe(catchError(err => { alert(err.message); return throwError(() => err); }))

D. return this.http.get(url).pipe(catchError(err => { alert('Error occurred'); console.error(err); return throwError(() => err); }))

Solution

1. Step 1: Check user notification and logging

   return this.http.get(url).pipe(catchError(err => { alert('Error occurred'); console.error(err); return throwError(() => err); })) shows an alert to users and logs the error to console, fulfilling both requirements.

2. Step 2: Verify error propagation

   It returns throwError(() => err) to pass the error downstream for further handling.

3. Final Answer:

   return this.http.get(url).pipe(catchError(err => { alert('Error occurred'); console.error(err); return throwError(() => err); })) -> Option D

4. Quick Check:

   Alert user + log error + rethrow = C [OK]

Hint: Alert user, log error, then rethrow with throwError(() => err) [OK]

Common Mistakes:

• Not alerting user or not logging error
• Returning a string instead of throwing error
• Alerting raw error message confusing users