Angular 5 HttpClient Error response not catchable

Question

We're working with Angular 5 and a Spring 2 OAuth Backend. Now when I send an old token it's of course expired. It returns status code: 401 and an error response with invalid token and so on. Now I can't see it in my logs or when I catch the error. I want to get the error so I can at first log it and later on either refresh the token or send him to the Login Page.

Now if i subscribe to the request with:

.subscribe(res => {
    //just random stuff.
    }, err => {
    console.log("error", err);
});

I just see this response in the log with an unknown error like in this image

Could it be failure of the backend? Because i also see in the logs something like a "No 'Access-Control-Allow-Origin' header is present"-error, although it's because of the invalid token.

Although I can see this response code in Google Chrome Dev Tools and a 401 status code.

So I tried to find a solution myself. I've already got an interceptor and tried it with some solutions

return next.handle(authReq)
  .catch(error => {
    console.log("im in here");
    console.log(error);
    return Observable.throw(error);
  });

The Http Service just throws an error that catch is not a function without even logging the error or the "im in here".

I have also tried with the .do after next.handle and I got the same error like catch

.do((event: HttpEvent<any>) => {
    if (event instanceof HttpResponse) {
      // do stuff with response if you want
    }
  }, (err: any) => {
  console.log(err);
    if (err instanceof HttpErrorResponse) {
      if (err.status === 401) {
      }
    }
  });

I've tried with pipe after the http.get but it doesn't work either.

http.get(...).pipe(
  retry(3), // retry a failed request up to 3 times
  catchError(this.handleError) // then handle the error
);

Gary · Accepted Answer · 2018-03-27 12:19:49Z

2

    import 'rxjs/add/operator/catch';

    Somefunc(){
    this.httpClient
          .get("data-url")
          .subscribe(
            data => console.log('success', data),
            error => console.log('oops', error)
          );
    }


    OR

this.httpClient
      .get("data-url")
      .catch((err: HttpErrorResponse) => {
        // simple logging, but you can do a lot more, see below
        console.error('An error occurred:', err.error);
      });

Should work.

edited Mar 27, 2018 at 12:19

answered Mar 27, 2018 at 12:01

Gary

2,3492 gold badges33 silver badges53 bronze badges

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

13 Comments

Philipp Fock Over a year ago

thanks for your help. but this isn't working. i've already described at the beginning that I can't get the right error log from this. when i do subscribe: it logs the wrong thing and when i do with catch: i can't do subscribe afterwards

Gary Over a year ago

Is it the same with Http rather than HttpClient? Unable to catch errors?

Philipp Fock Over a year ago

yeah, it's also almost the same response. status: 0 and unknown error. although i see in dev tools: 401 and this time unauthorized

Gary Over a year ago

Its to do with HttpClient. Can you recheck your code again. Are you not able to capture the error even in Http?

Philipp Fock Over a year ago

but now it works. so i'm happy but of course it's a bug. but I've also read somewhere that the browser itselfs captures and don't let it go

|

Collectives™ on Stack Overflow

Angular 5 HttpClient Error response not catchable

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related