Angular2 HTTP - How to understand that the backend server is down

Question

I am developing a front end which consumes JSON services provided by a server.

I happily use HTTP of Angular2 and I can catch errors via .catch() operator.

If I find a problem related to a specific service (e.g. the service is not defined by the server) the catch() operator receives a Response with status 404 and I can easily manage the situation.

On the other hand, if it is the server that is completely down, the catch() operator receives a Response with status code 200and no specific sign or text related to the cause of the problem (which is that the whole server is down). On the console I see that angular (http.dev.js) writes a message net::ERR_CONNECTION_REFUSED but I do not know how to do something similar (i.e. understand what is happening and react appropriately) from within my code.

Any help would be appreciated.

Did you find a solution for this? See also my answer here.... — Herman Fransen, Apr 21 '16 at 08:38
If I catch an error in an http operation (e.g. POST, GET) and the error status is 200 then I assume the whole server is down, something like `private handleError (error: Response) { ler error; if (error.status == 200) { errorText = 'The whole server is down. The connection has been refused.'; } return Observable.throw(errorText || 'Server error'); }`; far from sure that this method is really OK, but seems to work in the cases I face — Picci, Apr 22 '16 at 06:29
Looks like a good workaround. But you should realise that your code will break if they solve this issue and you upgrade. Therefore, it might be a good idea to put a `TODO` everytime you use this workaround — Herman Fransen, Apr 23 '16 at 12:49

score 9 · Answer 1 · edited May 23 '17 at 12:25

If you would like to handle this event globally in your application I recommend using slightly modified Nicolas Henneaux's answer https://stackoverflow.com/a/37028266/1549135

Basically you can check for error.status === 0 which happens when the net::ERR_CONNECTION_REFUSED error occurs.

The complete module file:

import { Request, XHRBackend, BrowserXhr, ResponseOptions, XSRFStrategy, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

export class AuthenticationConnectionBackend extends XHRBackend {

  constructor(_browserXhr: BrowserXhr, _baseResponseOptions: ResponseOptions, _xsrfStrategy: XSRFStrategy) {
    super(_browserXhr, _baseResponseOptions, _xsrfStrategy);
  }

  createConnection(request: Request) {
    let xhrConnection = super.createConnection(request);
    xhrConnection.response = xhrConnection.response.catch((error: Response) => {
      if (error.status === 0){
        console.log("Server is down...")
      }
      ...
      return Observable.throw(error);
    });
    return xhrConnection;
  }

}

Module file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, XHRBackend } from '@angular/http';
import { AppComponent } from './app.component';
import { AuthenticationConnectionBackend } from './authenticated-connection.backend';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
    ],
    entryComponents: [AppComponent],
    imports: [
        BrowserModule,
        CommonModule,
        HttpModule,
    ],
    providers: [
        { provide: XHRBackend, useClass: AuthenticationConnectionBackend },
    ],
})
export class AppModule {
}

score 2 · Answer 2 · answered Apr 20 '16 at 10:14

2

I have the same problem while using angular2.0.0-beta.15

It seems like this is a bug. You get http status 200 and this is not correct:

https://github.com/angular/http/issues/54

answered Apr 20 '16 at 10:14

Herman Fransen

2,200
5
24
40

2

BTW link is broken as of today – superjos Jun 22 '17 at 10:23

score 1 · Answer 3 · answered Oct 17 '19 at 07:27

Well i have faced something similar before. I was trying to make a logging Service and a Error handling which tells the user if error happened with some requests to the server or if the whole server is down.

I used HTTP Interceptor to catch the responses here is the code:

export class HttpErrorHandlingInterceptor implements HttpInterceptor {
   constructor(private logService: LogService,
               private layoutStateService: LayoutStateService){}
   intercept(
      req: HttpRequest<any>,
      next: HttpHandler
   ): Observable<HttpEvent<any>> {
     if (req.url) {
         return next.handle(req).pipe(
                map((event: HttpEvent<any>) => {
                   if (event instanceof HttpResponse) {
                        return event;
                   }
                }),catchError(err => {
                    if(!err.status){
                       this.layoutStateService.dispatchServerDown();
                    }else{
                       this.layoutStateService.dispatchAddServerError(err);
                       this.logService.logError(err);
                    }

               throw err;
             })
        );
    }
  }
}

Now you can specify what should happen when Server is down according to your application. Hope that helps.

Angular2 HTTP - How to understand that the backend server is down

3 Answers3

Linked