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.