Handling HTTP errors in Angular - Mini Project: Build & Apply

Handling HTTP errors

📖 Scenario: You are building a simple Angular app that fetches user data from a server. Sometimes the server might return an error, like a 404 or 500. You want to handle these HTTP errors gracefully so the app can show a friendly message instead of crashing.

🎯 Goal: Create an Angular standalone component that fetches user data using HttpClient. Add error handling to catch HTTP errors and store an error message in a signal. Display the error message in the template if an error occurs.

📋 What You'll Learn

Use Angular 17+ standalone component with signals

Inject HttpClient using inject()

Create a signal to hold the user data

Create a signal to hold the error message

Use HttpClient.get() to fetch data from 'https://jsonplaceholder.typicode.com/users/1'

Use subscribe() with error callback to handle HTTP errors

Display user name if data loads successfully

Display error message if an error occurs

💡 Why This Matters

🌍 Real World

Handling HTTP errors is essential in real apps to provide good user experience and avoid crashes when servers fail or data is missing.

💼 Career

Knowing how to handle HTTP errors in Angular is a key skill for frontend developers working with APIs and building robust web applications.

1

DATA SETUP: Create a standalone Angular component with signals

Create a standalone Angular component called UserComponent. Inside it, create two signals: user initialized to null and errorMessage initialized to an empty string ''. Import necessary Angular modules and functions.

Angular

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  template: `
    
  `
})
export class UserComponent {
  // Your code here
}

Hint

Use signal(null) for user and signal('') for errorMessage.

2

CONFIGURATION: Inject HttpClient to make HTTP requests

Import HttpClientModule and HttpClient from @angular/common/http. Add HttpClientModule to the component's imports array. Inside the component class, create a private variable http by calling inject(HttpClient).

Angular

import { Component, signal, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  template: `
    
  `
})
export class UserComponent {
  user = signal(null);
  errorMessage = signal('');

  private http = inject(HttpClient);
  // Your code here
}

Hint

Remember to add HttpClientModule to imports and use inject(HttpClient) inside the class.

3

CORE LOGIC: Fetch user data and handle HTTP errors

Inside the UserComponent constructor, use this.http.get() to fetch data from 'https://jsonplaceholder.typicode.com/users/1'. Subscribe to the observable. In the success callback, update the user signal with the response. In the error callback, update the errorMessage signal with the string 'Failed to load user data.'.

Angular

import { Component, signal, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  template: `
    
  `
})
export class UserComponent {
  user = signal(null);
  errorMessage = signal('');

  private http = inject(HttpClient);

  constructor() {
    // Use this.http.get() to fetch user data and handle errors
    // Your code here
  }
}

Hint

Use subscribe with next and error callbacks to update signals.

4

COMPLETION: Display user name or error message in the template

Update the component's template to show the user's name if user() is not null. If errorMessage() is not empty, display the error message inside a <div> with role="alert" for accessibility.

Angular

import { Component, signal, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  template: `
    
    
    
  `
})
export class UserComponent {
  user = signal(null);
  errorMessage = signal('');

  private http = inject(HttpClient);

  constructor() {
    this.http.get('https://jsonplaceholder.typicode.com/users/1').subscribe({
      next: (data) => this.user.set(data),
      error: () => this.errorMessage.set('Failed to load user data.')
    });
  }
}

Hint

Use Angular's *ngIf to conditionally show user name or error message. Add role="alert" for accessibility on the error message.

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