Handling HTTP errors in Angular - Step-by-Step Execution

Concept Flow - Handling HTTP errors

Start HTTP Request

↓

Receive HTTP Response

↓

Is response error?

No→Process Data

Yes↓

Catch Error

↓

Handle Error (show message/log)

↓

Complete or Retry

This flow shows how Angular sends an HTTP request, checks if the response has an error, and handles it gracefully.

Execution Sample

Angular

this.http.get('/api/data').pipe(
  catchError(error => {
    this.errorMessage = 'Failed to load data';
    return throwError(() => error);
  })
).subscribe(data => this.data = data);

This code sends a GET request, catches errors to set a message, and updates data on success.

Execution Table

Step	Action	HTTP Response	Error Detected	Error Handling	Data State	Message State
1	Send GET request	Pending	No	No	undefined	''
2	Receive response	200 OK with data	No	No	undefined	''
3	Subscribe success	200 OK with data	No	No	data loaded	''
4	Send GET request	Pending	No	No	data loaded	''
5	Receive response	500 Internal Server Error	Yes	Yes	data loaded	Failed to load data
6	Subscribe error	500 Internal Server Error	Yes	Yes	data loaded	Failed to load data

💡 Execution stops after handling error or successfully loading data.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	After Step 6
data	undefined	undefined	data loaded	data loaded	data loaded
errorMessage	''	''	''	Failed to load data	Failed to load data

Key Moments - 3 Insights

Why does the errorMessage only update after an error response?

Because catchError runs only when an error occurs, as shown in steps 5 and 6 of the execution_table.

What happens to the data variable when an error occurs?

The data variable keeps its previous value and does not update, as seen in steps 5 and 6.

Why do we return throwError inside catchError?

Returning throwError rethrows the error so subscribers can handle it further if needed, matching the flow in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of errorMessage at step 3?

A 'Loading...'

B 'Failed to load data'

C '' (empty string)

D undefined

💡 Hint

Check the 'Message State' column at step 3 in the execution_table.

At which step does the HTTP error get detected?

A Step 5

B Step 4

C Step 2

D Step 3

💡 Hint

Look for 'Error Detected' marked 'Yes' in the execution_table.

If the server returns 404 instead of 500, how would the errorMessage change in the variable_tracker?

A It would remain '' (empty string)

B It would update to 'Failed to load data'

C It would update to 'Not Found'

D It would become undefined

💡 Hint

The catchError sets errorMessage on any HTTP error, not just 500, as shown in the execution_table.

Concept Snapshot

Angular HTTP error handling:
- Use catchError() in pipe() to catch errors.
- Set error message inside catchError.
- Return throwError() to rethrow error.
- Subscribe handles success or error.
- Keeps UI responsive and informative.

Full Transcript

This visual trace shows how Angular handles HTTP errors. First, an HTTP GET request is sent. When the response arrives, Angular checks if it is an error. If no error, data updates normally. If an error occurs, catchError runs, setting an error message and rethrowing the error. The subscription then receives either data or error. Variables like data and errorMessage update accordingly. This flow helps keep the app stable and user informed when requests fail.

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