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 Aug 30 '18 at 18:10 — kedenk, Aug 30 '18 at 18:10

kedenk · Accepted Answer · 2018-08-30T19:24:49.697

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 '18 at 19:24

answered Aug 30 '18 at 18:17

kedenk

659
6
9

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()); } if( err.status == 400 ) { return Observable.throw(newError()); } }` – Alexi Felix Aug 30 '18 at 18:27
how do you log errors? Do you produce an HTTP error and is the `.catch` executed? – kedenk Aug 30 '18 at 18:30
in UI i see: Http failure response for (unknown url): 0 Unknown Error and in network tab i see code 403 however the backend is 404 – Alexi Felix Aug 30 '18 at 18:32
1

console.log(err.message); prints: `Http failure response for (unknown url): 0 Unknown Error` none of the status set above is executed – Alexi Felix Aug 30 '18 at 18:41
1

You have probably a problem with CORS. Try the same page with Google Chrome and see, what the JS console writes. – kedenk Aug 30 '18 at 18:49
1

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.` – Alexi Felix Aug 30 '18 at 18:55
You can configure your backend and add the necessary headers. Otherwise there are some workarounds: https://codecraft.tv/courses/angular/http/http-with-promises/ . https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome – kedenk Aug 30 '18 at 18:59
Thank you :) however the same problem persists not just in localhost, also on dev and different environments, the backend already has CORS configured, when i can the service from load balancer i don't see the problem, only from api gateway URL. do you have any suggestion? – Alexi Felix Aug 30 '18 at 19:07
installing chrome extension to disable CORS, now i see the console.log as: `Cannot read property 'status' of null`, while in network the status is 204 – Alexi Felix Aug 30 '18 at 19:12
Your answer works, making it as a solution, Thank you :) – Alexi Felix Aug 31 '18 at 15:24

handle HTTP status codes in Angular 5

1 Answers1