We are using AngularJs(1.5.8) and Spring-boot in our application. we build these as a single war file and deployed in tomcat server.
we are consuming the spring-boot API from Angularjs through HTTP Post request. The issue is when the response takes more than 120 seconds or 200 seconds (this time is not consistent), automatically a new request is triggered from the browser which causes some duplicate issue in Server. The browser is considering only the latest request even if we got the response for the previous request.
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.
I have React app in front-end (client), calling API provided by Flask back-end (server) via axios package.
Both client and server are running locally. Client: localhost:3000. Server: localhost:5000
The problem is: after many requests, the server can not receive request from client.
Here is the picture of the received requests, which is captured in backend:
As you can see, after some success request, the React app stuck with pending request:
The lastest request: 127.0.0.1 - - [11/Jun/2020 09:34:39] "GET /posts HTTP/1.1" is error 500, but in network tab of chrome, the request is still pending, so i dont know if the server received that request or not. Nothing shown in console log of chrome, no error printed in backend terminal windows (i have some lines of code to print error in backend), just the error 500
What am i doing wrong? If this question is still confused, please comment below and i can update more info about it. Thank you!
The fact that your server is reporting a 500 error, but the request on the client is still pending makes me think that something is wrong on the server side.
To verify this, you can try manually calling raise Exception() in one of your endpoints. Then instead of seeing the error resolve through the react app, you can try calling your endpoint with curl, or a client like Postman. If you are able to see a 500 error there, then the error is likely in your React app. If that request does not resolve, then the error is probably in the server.
Is an error response is being sent to the client? The way to do this in flask is using error handlers.
Thank you for helping me.
i debugged my server and found that 2 request call from react app were served by 1 cursor
(i used 1 connector.cursor for the whole connection => 2 request arrives in one moment => the cursor does not know how to serve the result)
=> Solution: change 2 request to 1 new request to new API, in new API, return the result which is containing both result of that 2 request
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.
I found an interesting case in one of the react-scripts apps where the proxy is configured to localhost:3001 (the front end is running on localhost:3000).
From the react stuff we make a request via axios to localhost:3000/api/results and that loads a bunch of JSON information, but if I open localhost:3000/api/results in a new browser tab that does not display the JSON but loads the HTML instead.
Why is that happening?
The real problem is that we have endpoint to download files from, like:localhost:3001/api/downloads/csv/file.csv, but they won't work, because when localhost:3000/api/downloads/csv/file.csv is not proxied to localhost:3001/api/downloads/csv/file.csv and we simply cannot call this via axios because it should be a direct call from the browser.
However, the strange thing is why does it work via axios and curl?
By doing curl localhost:3000/api/downloads/csv/file.csv (or 3001), we get the right content back.
If you are using react-scripts, then this is facilitated by Service Workers. Quoting from Service Workers - By Ankita Masand...
Service Worker acts as a proxy server that intercepts the network requests sent by your web application to the server. In the sense, requests to fetch Javascript or CSS files, images go through service worker to the server. Service Worker has the ability to modify this request or send a custom response back to the client.
Here, Service Workers are acting as a Client Side Proxy and tapping to your HTTP Requests and you get the right content back.
I configured a simple cron job available at secure(admin only) path /cron?method=sendMail to send an email once daily. The servlet at the endpoint of the url is a jsp file which has the code to send the email.
This is tested through the frontend with the full url and it works.
I do not have any backend servers configured. Only frontend instances with 1 resident and dynamics.
The issue is that cron triggers successfully but the request fails with the following message.
0.1.0.1 - - [17/Nov/2013:01:07:44 -0800] "GET /cron?method=sendMail HTTP/1.1" 503 364 - "AppEngine-Google; (+http://code.google.com/appengine)"
This request is getting retried continuously and keeps failing.
The complete url however works. What is wrong with the setup? what am I missing?
Also, how do I stop the retries?
The cron entry I use goes like
<cron>
<url>/cron?method=sendMail</url>
<description>Send mail</description>
<schedule>every mon,tue,wed,thu,fri,sat,sun 11:30</schedule>
<timezone>Asia/Calcutta</timezone>
</cron>
The issue was resolved using the following tip from the documentation to secure the url
Requests from the Cron Service will also contain a HTTP header: X-AppEngine-Cron: true
The X-AppEngine-Cron header is set internally by Google App Engine. If your request handler finds this header it can trust that the request is a cron request. If the header is present in an external user request to your app, it is stripped.