Angular: Catch connection time out and no internet connection HTTP errors

Question

I'm trying to add error handling for HTTP request using the newer Angular's HTTP Client: https://angular.io/guide/http

In the docs, it says that error handling is done as follows:

return this.http.get('https://api.example.com/foo')
    .pipe(
      catchError(this.handleError)
    );

private handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // A client-side or network error occurred. Handle it accordingly.
    console.log('Client side error:', error.error)
    // TODO: how do I catch specific client side errors?
  } else {
    console.log('Back-end error:', error.error)
  }
  // return an observable with a user-facing error message
  return throwError('Something bad happened; please try again later.');
};

Handling back-end errors is simple enough. However, I want to be able to catch specific client-side errors such as:

Connection time out (net::ERR_CONNECTION_TIMED_OUT)
No internet connection

How can I catch these specific client side errors?

Update In fact I've never been able to get error.error to return an ErrorEvent. Usually when the internet connection is gone, or connecting to an invalid domain, it returns a ProgressEvent.

Take a look at Angular Interceptors. I think this is the functionality you're looking for. If my memory serves me right, here's a video I found helpful when looking at the topic. youtube.com/watch?v=-G7kStvqgcg Here's an article explaining it too. blog.angularindepth.com/… — thenolin
– thenolin, Commented Aug 5, 2019 at 21:06
Thanks for this, but I have looked at interceptors and I even use it in my app. But that is not what i'm looking for. I'm trying to find ways to handle specific HTTP errors. Unfortunately it seems that Angular loses this information when it returns the error. — Yahya Uddin
– Yahya Uddin, Commented Aug 5, 2019 at 21:16
Gotcha. If I get more time I'll look into it more. This has been something I've wanted to explore for a while now, just haven't had the time yet. Hoping you find something soon! — thenolin
– thenolin, Commented Aug 6, 2019 at 15:57

Eden Ilan · Accepted Answer · 2020-11-04 17:25:09Z

8

In fact I've never been able to get error.error to return an ErrorEvent. Usually when the internet connection is gone, or connecting to an invalid domain, it returns a ProgressEvent.

You're right about that, it seems to be a bug in the Angular docs - meaning you should actually look for a ProgressEvent.

Both "Connection time out" and "No internet connection" should return a status of 0, according to the XMLHttpRequest spec (as should any "network error", i.e. some connection issue in the client).

So your condition should be:

private handleError(error: HttpErrorResponse) {
  if (error.status === 0 && error.error instanceof ProgressEvent) {
    // A client-side or network error occurred. Handle it accordingly.
    console.log('Client side error:', error.error)
  }
  ...
};

answered Nov 4, 2020 at 17:25

Eden Ilan

1861 silver badge5 bronze badges

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

1 Comment

Brian Reinhold Over a year ago

When I get this net::ERR_CONNECTION_TIMED_OUT message on the console, the ProgressEvent type gives me 'no internet connection', not 'timeout'. Confused as to why.

Collectives™ on Stack Overflow

Angular: Catch connection time out and no internet connection HTTP errors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related