How to handle server errors in Angular using Http Interceptors

Question

I am trying to handle server errors coming from my backend in my Angular project. I am using angular HTTP Interceptors. This is my interceptor service class

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {

  constructor() { }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        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}`;
                        console.log(errorMessage);
                    } else {
                        // server-side error
                        errorMessage = `Error Status: ${error.status}\nMessage: ${error.message}`;
                    }
                    console.log(errorMessage);
                    return throwError(errorMessage);
                })
        );

    }
}

I have added this in app.module.ts file.

providers:[ [{ provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true }]
    ]

If i inspect and check in UI i can see in red color that 500 server error .How can i show a user friendly message in a html code by combining this http interceptors in my angular project. Can I use this http interceptors to show a user friendly error message in UI. And do i need to use a proxy if i am using http interceptors?

Answer 1

I'm using this function on my project and toastr for alert!

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(request).pipe(
        map((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                return event;
            }
        }),
        catchError(error => {
            if (error instanceof HttpErrorResponse) {
                if (error.status === 500) {
                    toastr.remove();
                    toastr.error(error.statusText.toUpperCase(), error.status);
                    return throwError(error);
                } else if (error.status === 400) {
                    if (error.error && typeof error.error === 'string') {
                        toastr.remove();
                        toastr.error(error.error.toUpperCase(), error.status);
                    } else {
                        toastr.remove();
                        toastr.error('something went wrong!'.toUpperCase(), error.status);
                    }
                    return throwError(error);
                } else if (error.status === 404) {
                    toastr.remove();
                    toastr.error('api not found'.toUpperCase(), error.status);
                    return throwError(error);
                } else {
                    return throwError(error);
                }
            }
        })
    );
}