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.

Appointee

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/… – Anew

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. – Appointee

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! – Anew

Answer 1

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)
  }
  ...
};

Docila

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. – Virtual