Angular 4 - Detect connectivity issue with http request

Question

I am facing an issue that I don't know how to solve. I am developing a small web app in Angular 4. In that application, I make http request to an api I developed in Node.js - Express hosted in our company network.

My problem is that most of the time those calls to the api work perfectly fine. I got no problem in my dev environment, at my home, and in some of our customers networks. But in some networks, the http request does not perform.

I know that because I register every call in the api, and in those cases I do not even detect the call. In Chrome, I even get a 404 error. Furthermore, I installed Postman on a customer's computer, and still no response. I assume it is a network policy which inteferes with the api calls, but I do not know what I am looking for (proxy ?).

Can you give me some hints ? Is it possible to detect those problems in my code and maybe show a message to the customers in that case ?

I can paste some parts of my code if needed.

Thank you!

Edit : I found what caused my problem. My api used an uncommon port (3088), and this port was sometimes blocked by customers network policy. I switched to the port 443 and now it runs pretty well.

hyper0009 · Accepted Answer · 2018-05-14 14:35:52Z

1

So you have a couple of options assuming you are using angulars HTTP service, as you can see the request here returns an observable, you can then subscribe to that and handle the error.

getConfig(): Observable<HttpResponse<any>> {
    return this.http.get(this.configUrl);
}

showConfig() {
  this.configService.getConfig()
  .subscribe(
    (data: Config) => this.config = { ...data }, // success path
    error => this.error = error // error path
  );
}

You can also retry the request like so

getConfig() {
  return this.http.get<Config>(this.configUrl)
   .pipe(
     retry(3), // retry a failed request up to 3 times
     catchError(this.handleError) // then handle the error
  );
}

You can then pop up a toast message to tell the user about the error if it occurs, here's the source material from Angular's documentation: https://angular.io/guide/http.

Hope this helps.

answered May 14, 2018 at 14:35

hyper0009

2461 silver badge11 bronze badges

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

1 Comment

JiceY Over a year ago

Thank you for your reply, i will implement the route for errors in the subscribe part of my services calls.

Collectives™ on Stack Overflow

Angular 4 - Detect connectivity issue with http request

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