Handle HTTP Errors globally in angular

Question

I am working in http error handling. I have written error handling in each component which is not a good coding practice. So I have decided to write a common http error handling globally. I have searched for it, I have come across http-interceptor concept, I think there exists better way to handle the HTTP errors. What I have tried in each component is below Instead of that I need a global method. I already have http-interceptor file and the code is I am pasting below.

component.ts:

this.serviceName.methodName().catch(err => {
  console.log("Something went wrong with the request, please try again.");
  return Observable.throw(err.message.toUpperCase() || 'API_ERROR');
}).subscribe((res) => {
   console.log(res);
},
 error=>{
    this.openSnackBar('danger', "Something went wrong with the request, please try again.");
 });

http-interceptor:

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from "@angular/common/http";
import { Observable } from "rxjs";
import { tap } from 'rxjs/operators';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
constructor() { }

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(tap(
        event => event instanceof HttpResponse ? 'succeeded' : '',
        err => 'failed'
    ))
 }
}

Please help. Thanks.

Read the documentation, nothing explains interceptors better than it. — user4676340
– user4676340, Commented May 27, 2019 at 11:07

Adrita Sharma · Accepted Answer · 2019-05-27 11:33:02Z

2

Try this:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(tap(
      event => event instanceof HttpResponse ? 'succeeded' : '',
      err => {
        this.openSnackBar('danger', "Something went wrong with the request, please try again.");
      }
    ))
  }

edited May 27, 2019 at 11:33

answered May 27, 2019 at 11:09

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

2 Comments

Prasad Patel Over a year ago

Thanks for the reply, I already have an http-interceptor file, please check my answer again. Please suggest where to write the 'error' code from your answer in my http-interceptor file.

Prasad Patel Over a year ago

Getting error after adding your code like

ERROR in src/app/services/common/httperror.interceptor.ts(15,13): error TS2345: Argument of type '(error: any) => void' is not assignable to parameter of type '() => void'.

Collectives™ on Stack Overflow

Handle HTTP Errors globally in angular

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related