My tech stack includes react on UI and spring boot on server.
All the other api requests made to server work just fine but one request that has response of an array with a million records has this issue.
The response size is about 15mb and the request shows 200 as status code.
But the timing tab of the request shows this flag - Caution: request is not finished yet.
As long as this flag stays, the application becomes unresponsive.
On doing my research on this issue, I found that this means that chrome is expecting some more data as response.
Is there something to be mentioned in the response header to resolve this issue?
As the application becomes unresponsive, how can this be terminated by a button click? I added axios cancel token but that cancels the request only if its pending and not when 200 comes as status.
Related
I am using Axios instance in a React app to fetch data from GET requests. Backend server is deployed on Heroku(Professional Dyno) and written in Django REST framework. Database is deployed on AWS.
On postman, APIs are giving response in around 2-3 seconds:
Postman Screenshot
But in the react app, response time is around 25-30 seconds.
React app response time Screenshot
Please note that I am calling around 10 different APIs in a single page. Is this affecting the response times?
The problem is, your request got blocked for 18 seconds. When you are executing multiple heavy requests, it's definitely possible that this requests takes some time to be even executed. If you want to check whether this is the reason for it, you could just comment out the other requests an examine what happens.
An interesting request on what blocked means can be found here.
We have had a angularJS application, then we've updated our FE to angular7.1 and now every request in chrome is stalled for about 450ms, both static files and data requests.
There isn't such an issue on local version of an application
Firefox and IE don't block requests.
Do you have a any idea about this? Thanks.
Was tested with Cache-Control: no-store, no-cache, must-revalidate
Was tested with only one request at a time
Was tested with and w/o proxy
(can't post images)
Old app chrome behavior:
AngularJS behavior image
New app chrome behavior:
Angular7 behavior image
New app IE behavior:
Angular7 IE behavior image
UPDATE:
Even first request is stalled.
Waterfall looks like this:
Waterfall
Please read the following information in the link that #JonathanHamel posted:
A request being queued indicates that:
The request was postponed by the rendering engine because it's considered lower priority than critical resources (such as scripts/styles). This often happens with images.
The request was put on hold to wait for an unavailable TCP socket that's about to free up.
The request was put on hold because the browser only allows six TCP connections per origin on HTTP 1.
Time spent making disk cache entries (typically very quick.)
Additionally, Stalled/Blocking is the time the request spent waiting before it could be sent. It can be waiting for any of the reasons described for Queueing. Additionally, this time is inclusive of any time spent in proxy negotiation.
Please tell us which of these case might apply to you.
I'm using Etags in the response headers for dynamic resources, and my client is sending future requests for the same resource with the If-None-Match header.
The client and server are interacting perfectly, and I get 304 responses if the data was not modified. I can see this on the nginx logs on my server, and the browser network tab on Firefox. However, when i log the exact same response from the whatwg-fetch response status, I'm getting 200.
Although react doesn't re-render if there is not diff in the data, all the processing till that point (dispatching actions, running custom data manipulation etc) are being executed, which is consuming too much memory.
I'm using react-boilerplate, which is internally whatwg-fetch, and too far out to make a U-turn and start using xhrHttpRequests, which apparently don't have this problem from the scant resources I found in other parts of the web.
Please help; I can attach logs and notes if need be. Thanks :)
We have a web application (UI wrapped in CEF + WPF) where we make a JavaScript POST request to the server. The POST request only has query string parameters and no request body. The server takes up to 5 minutes to process and send a small response back. Even when the server sends the response back (lets say 4 minutes), the request is still shown as pending in the Inspector (and success callback is not executed). Only after 8-10 minutes the response is shown as complete (and success callback is executed).
When we check the time distribution of the finished request call, it says that everything finished in 4 minutes which is very strange. This behavior is not happening in Google chrome browser. Any advise on what could be going wrong.
I am encountering a problem with Angular 1.5 and I could not find a similar question via Google. For a welcome change, the problem does not exist in IE, it only happens in the latest version of Chrome.
When I approach a JSON API and I send the same GET request twice in a row, the first request returns a 200 OK and the second returns a 304 NOT MODIFIED. I am doing the request with 'Cache-Control': 'no-cache' to simulate how our (generated) API client performs requests. With cache control enabled, both requests are executed correctly (see F12) and the program terminates. With cache control disabled, both requests are executed correctly (F12) but the program does not terminate.
Is this a bug in Chrome, or a bug in Angular's $http, or am I missing some crucial detail?
Minimal example on JsFiddle
Output:
Hi
Sending request 1 to http://jsonplaceholder.typicode.com/posts/1...
Success 1!
Resolved 1!
Sending request 2 to http://jsonplaceholder.typicode.com/posts/1...
Fixed after a Google Chrome update.