Error Handling with HttpClient and HttpInterceptor in Angular

To handle your errors properly in angular, you can use HttpInterceptor. It intercepts Http request. It helps in converting http request before sending and after getting the response from the server.

import {
    HttpEvent,
    HttpHandler,
    HttpRequest,
    HttpErrorResponse,
    HttpInterceptor
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

export class MyErrorInterceptor implements HttpInterceptor {
    intercept(
        request: HttpRequest,
        next: HttpHandler
    ): Observable> {
        return next.handle(request)
            .pipe(
                retry(1),
                catchError((error: HttpErrorResponse) => {
                    let errorMessage = '';
                    if (error.error instanceof ErrorEvent) {
                        // client-side error
                        errorMessage = `Error: ${error.error.message}`;
                    } else {
                        // server-side error
                        errorMessage = `Error Status: ${error.status}\nMessage: ${error.message}`;
                    }
                    console.log(errorMessage);
                    return throwError(errorMessage);
                })
            )
    }
}

After this you can inlude your ErrorIntercept in your app module like shown below. When you use integrate service within any of your component every http request you made gets intercept by ErrorIntercept. It will validates all your http request.

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyErrorInterceptor } from './error.interceptor';

@NgModule({
  declarations: [...],
  imports: [
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MyErrorInterceptor,
      multi: true
    }
  ],
  bootstrap: [...]
})

export class AppModule { }

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

class User {
    constructor(
        public id: string,
        public name: string,
        public email: string
    ) { }
}

@Injectable({
    providedIn: 'root'
})

export class MyService {
    private url = '/api';

    constructor(private http: HttpClient) { }

    getUsers(): Observable {
        return this.http.get(url)
    }
}