How to handle net::ERR_CONNECTION_REFUSED in Angular2

Question

error-handling shows how to handle errors as follows:

private handleError (error: Response | any) {
  // In a real world app, we might use a remote logging infrastructure
  let errMsg: string;
  if (error instanceof Response) {
    const body = error.json() || '';
    const err = body.error || JSON.stringify(body);
    errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
  } else {
    errMsg = error.message ? error.message : error.toString();
  }
  console.error(errMsg);
  return Promise.reject(errMsg);
}

I'd like to access an API server, but the server hasn't started. Then I got the error:

http://localhost:3000/api/heroes net::ERR_CONNECTION_REFUSED

I need to tell the user politely that the API server hasn't started. How should I handle the error?

The error Response is:

_body:ProgressEvent
headers:Headers
ok:false
status:0
statusText:""
type:3
url:null

Could I handle this according to the status of the response?

Answer 1

//First inject the router in the constructor


private handleError (error: Response | any) {
//Your other codes    

if (error.status == 0){ //or whatever condition you like to put
this.router.navigate(['/error']);
}
}

Answer 2

It's impossible distinguish both ERR_CONNECTION_TIMED_OUT (the one someone had mentioned above) and ERR_CONNECTION_REFUSED, because HttpErrorResponse class doesn't differentiate them. So you have to use status 0 to handle all the generic errors. According to list of HTTP status codes https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

If you receive a response that is not in this list, it is a non-standard response, possibly custom to the server's software.

It means 0 is a non-standard response.

Angular is a Javascript Framework; hence you should refer to XMLHttpRequest status codes to find out what 0 means. The Mozilla page says..

Before the request completes, the value of status is 0. Browsers also report a status of 0 in case of XMLHttpRequest errors.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status

So, ERR_CONNECTION_REFUSED means the connection is not established (request is not completed), and therefore, the status code is 0. In that case it's safe to say "Unable to Connect to the Server". throwError is a RxJs function that emit error message, which you can read through Subscribe() method.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((errorResponse: HttpErrorResponse) => {
       if (errorObj instanceof HttpErrorResponse) {
        if (errorObj.status === 0) {
          return throwError('Unable to Connect to the Server');
        }
       }
      })
    );
  }