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?

Mohiuddin Khan · Accepted Answer · 2020-11-19 11:11:43Z

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);
                }
            }
        })
    );
}

edited Nov 19, 2020 at 11:11

answered Nov 19, 2020 at 11:00

Mohiuddin Khan

5331 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mands Over a year ago

Actually i am not using access tokens in my angular project

Mohiuddin Khan Over a year ago

Okey ignore the token renewal part, I've updated my answer

Mands Over a year ago

Do i need to use a proxy with this one?

Mohiuddin Khan Over a year ago

You have to add that file to the provider, other than that I don't think you need anything else.

Mands Over a year ago

I guess i need to add ToastrModule to app.mpdule.ts file

|

Collectives™ on Stack Overflow

How to handle server errors in Angular using Http Interceptors

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related