-1

Problem

Getting:

enter image description here

Setup

It is difficult to pin-point the reason and provide details. In a nutshell there is a Angular + Express.js app, MySQL for the database, Nginx for a proxy server, using Docker to glue everything together.

  • The problem happens when request takes ~110+ ms to complete.
  • Only PUT, POST, DELETE methods are affected (GET works fine).
  • The browser shows a request got canceled, but the actual code work (e.g. Express.js completes the logic and updated MySQL database).
  • Verified on Chrome and Firefox (so not a browser problem).

So, whenever any long-running async task is used (e.g. setTimeout(() => {}, 1000), the request in the browser gets canceled status.

So trying to figure out. Is it an Express.js setting? NginX setting? Angular HttpClient?

TO summarize, everything works under the hood. But the browser receives status canceled - which makes impossible to track the action outcome and notify the user operation has been completed.

Update

Nginx log returns:

nginx_1        | 172.18.0.1 - - [01/Aug/2020:12:49:19 +0000] "PUT /api/tags/update HTTP/1.1" 499 0 "http://localhost:8081/tags" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36

Angular TypeScript code looks like this:

this.httpClient
   .put<Tag>(`/api/tags/${slug}`, data)
   .pipe(takeUntil(this.unsubscribe$))
   .subscribe();
0leg
  • 13,464
  • 16
  • 70
  • 94
  • [This](https://stackoverflow.com/questions/12009423/what-does-status-canceled-for-a-resource-mean-in-chrome-developer-tools) might help. – Parth Shah Aug 01 '20 at 12:35
  • 1
    it is angular HttpClient. whenever you unsubscribe from http observable, the corresponding request got canceled. There is not enough information for further help if needed, like if you are using ngrx or unsubscribptions in ngOnDestroy ... – Andrei Aug 01 '20 at 12:51
  • @Andrei ok, you are right. Failing Angular component was a **dialog**. Clicking the OK button was closing and destroying it. So the `unsubscribe` method was the reason. Feel free to post an answer for reputation points. – 0leg Aug 01 '20 at 12:58

1 Answers1

1

You are probably calling request.unsubscribe() on a http observable in a component ngOnDestroy hook. That causes request to be "canceled"

Andrei
  • 10,117
  • 13
  • 21