handle HTTP status codes in Angular 5

Question

I'm trying to capture http status codes in angular in service which calls a backend service, i'm facing issues as i see status 204 , but when logging angular show status null, here is what i'm doing in my service:

return this.http.get<JSON>(mybackendsserviceurl)
      .do(res => {
      })
      .catch(res => {
        return this.handleError(res);
      });
  }

  private handleError(err: HttpErrorResponse) {
    console.log(err.message);
    return Observable.throw(err.message);
  }

How to catch different errors from backend service, like 204,403,404,500...etc and display a user friendly message for each error? my frontend is calling the service from API gateway and i'm setting the errors in Response Integrations.

Where do you log the status code?

kedenk
– kedenk

2018-08-30 18:10:43 +00:00
Commented Aug 30, 2018 at 18:10 — kedenk
– kedenk, Commented Aug 30, 2018 at 18:10

kedenk · Accepted Answer · 2018-08-30 19:24:49Z

2

To handle different status codes just check them:

this.http.get<JSON>(<URL>)
    .subscribe( 
        res => console.log(res), 
        err => {
            console.error(err);
            this.handleError(err);
        });


private handleError(err: HttpErrorResponse) {
    if( err.status == 500 ) {

        return Observable.throw(new Error(<YOUR USERFRIENDLY MESSAGE>));

    } else if( err.status == 400 ) {

        return Observable.throw(new Error(<YOUR MESSAGE>));
    }

    // you can also catch all errors of a group like this
    else if( err.status < 500 && err.status >= 400 ) {

        return Observable.throw(new Error(<CLIENT ERROR MESSAGE>));
    }
}

In your UI you can handle the Observable and of course, show a nice dialog with the error message.

edited Aug 30, 2018 at 19:24

answered Aug 30, 2018 at 18:17

kedenk

6696 silver badges9 bronze badges

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

10 Comments

Alexi Felix Over a year ago

When adding this in the HandleError, none of console log comes up

private handleError(err: HttpErrorResponse) {     if( err.status == 500 ) {     console.log(err.status,"500 from servce");         return Observable.throw(new Error(<YOUR USERFRIENDLY MESSAGE>));     }      if( err.status == 400 ) {         return Observable.throw(newError(<YOUR MESSAGE>));     } }

kedenk Over a year ago

how do you log errors? Do you produce an HTTP error and is the .catch executed?

Alexi Felix Over a year ago

console.log(err.message); prints: Http failure response for (unknown url): 0 Unknown Error none of the status set above is executed

kedenk Over a year ago

You have probably a problem with CORS. Try the same page with Google Chrome and see, what the JS console writes.

Alexi Felix Over a year ago

Yes, i'm on chrome and the console has following errors: OPTIONS 403 () requestURL then

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

|

Collectives™ on Stack Overflow

handle HTTP status codes in Angular 5

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related