504 GATEWAY_TIMEOUT in ajax call - javascript

I have ajax call where I process large data and then reload the page in ajax success. Ajax call is
$.ajax({
type:'POST',
cache:false,
async:false,
url: 'URL',
data: "",
timeout:0,
beforeSend:function(msgg){
$('#loading').show();
},
success: function(data){
if(data == "success")
{
setTimeout(function(){
$('#loading').hide();
window.location.reload();
},5000);
}
}
});
but it gets 504 GATEWAY_TIMEOUT and ajax call never comes in success. I need manual refresh.

504 GATEWAY_TIMEOUT errors normally occur when your API Gateway URL is not responsive. It could be some kind of internal Gateway error.
Here are some steps to troubleshoot:
Use a proxy like Postman to make the same exact request and see what the response is
Make sure your path is correct
If there are other requests that you make to the same gateway URL, maybe a GET request, try making those calls manually or using your code, to make sure the gateway is working fine
If you have access to the Gateway, restart it (this is possible if you have Microservices architecture, and Dockerisation etc)

The recommendation is to make more short calls to check status / retrieve data.
Here is the alternative if the above is not possible:
Notice: This solution is not recommended for production use or high traffic scenarios, make sure this action is performed on an isolated server.
If using Apache Web Server 2.4, the TimeOut directive is by default set to 60 seconds.
For more details see this article.
The web server will only keep the connection open for 60 seconds regardless the max_execution_time
While the max_execution_time in php.ini sets the execution time of php, the Apache TimeOut directive sets the maximum connection time.
Example:
if php max_execution_time is 120 sec, but TimeOut is 30 sec - you will get a 504 error
if php max_execution_time is 120 sec, but TimeOut is 300 sec - your script will execute for max 120 seconds, but your connection can stay alive for 300 seconds
If you didn't set any response code from php, PHP returns 200 if everything is OK, 500 if error occured.
When you get an unexpected HTTP Response code it's good to keep an eye on the web server too.

I think browser can not hold for long ajax call so I used ajax recall and processed data in parts. It solved problem.

Found working solution posted by #david-hoerster
As he said, If your error event handler takes the three arguments (XMLHttpRequest, textstatus, and message) when a timeout happens, the status arg will be 'timeout'
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 1000,
success: function(response) { alert(response); },
error: function(xmlhttprequest, textstatus, message) {
if(textstatus==="timeout") {
alert("got timeout");
} else {
alert(textstatus);
}
}
});​
With jsFiddle, you can test ajax calls -- it will wait 2 seconds before responding. I put the timeout set at 1 second, so it should error out and pass back a textstatus of 'timeout' to the error handler.

Related

Handling HTTP request time out by browser in Javascript

In my web application, I am trying to handle time out situations when calling a REST API. Here is my code which calls the API using jQuery ajax.
$.ajax({
type: "POST",
url: endpoint,
data: payload,
dataType: dataType,
timeout: 0,
success: successHandler,
error: failureHandler
});
The success and failure handlers are shown below.
function successHandler(data) {
//Got the data
}
function failureHandler(xhr, textStatus, thrownError) {
if(xhr.status==404) {
console.log('Page not found');
} else if(xhr.status==408) {
console.log('request timed out at server. You may want to retry') ;
}
}
If the timeout happens at the server, it is giving status 408. But sometimes, due network connectivity problems, the client (browser) itself is getting timed out because it is not able to connect to the service in specified time. I guess this is the browser behavior. What will be xhr.status and textStatus if the request gets timed out by the browser? How to handle this scenario?
[Edit] I found some explanation in Set timeout for ajax (jQuery). This explains how we can set timeout in the code. But my question is that I don't want to set timeout like this. Check the code in ajax request, I set timeout: 0 which means, there is no timeout and I am going to wait till I get the response from the server. Meanwhile, the browser may kill this request because of it's global timeout setting. I am looking for a solution which can handle this.
This looks like it is a very similar question to this post. Good luck!
How to detect timeout on an AJAX (XmlHttpRequest) call in the browser?

How to cancel an ajax request or third party js request when no response after x time w/ abort()

Curious what are some of your solutions, elegantly, that deal with block js calls / ajax calls that take too long reaching out to third party sites for data/info.
Lately, I've been contending with some scripts/ajax requests in which the server is either down or not responding and literally blocks my page. They are suppose to be async.
So, I want to abort the call after x time.
var request = $.ajax({
type: 'POST',
url: 'someurl',
success: function(result){}
});
then use: request.abort() if it takes too long.
But I am thinking I can use a deferred/promise here, with a timeout ability and call abort if my promise doesn't come back in say 1000ms.
Your thoughts?
My bad for not referring to the timeout attr of the ajax request. I didn't want to wrap the abort() in a setTimeout, but having the jQuery ajax api w/ timeout is what I need. I should have seen this. thanks all.
Check the timeout option: http://api.jquery.com/jQuery.ajax/
var request = $.ajax({
type: 'POST',
url: 'someurl',
timeout: 2000,
success: function(result){},
error: function(xhr, status, message) {
if(status == "timeout") {
alert("Request time out");
}
}
});
One way can be using setTimeout
var abort_req = setTimeout(function () {
request.abort();
}, 3000);
//^ time in ms
Possible duplicate of jQuery $.ajax timeout setting. JQuery AJAX has an optional timeout option that can be passed by milliseconds. You can process logic when the AJAX request timed out by passing a callback function to the error option like so:
error: function(x, t, m){
//process error here
}

Salesforce - success handler for $.ajax call

I have a form that I have been submitting to Salesforce with standard form submit action. By default, you can tell Salesforce to redirect you to a given URL after the POST has completed.
I no longer wish to be redirected since I have other activities on the form page. No problem, my page is already using jQuery so I can use the handy $.ajax utility like this:
$('#wrapper').on('click', '#formsubmit', function(e) {
e.preventDefault();
var formData = $('#subForm').serialize();
$.ajax({
type: "POST",
url: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data: formData,
success: function() {
console.log('success!'); // or not!
},
error:function (xhr, ajaxOptions, thrownError){
console.log(xhr.status); // 0
console.log(thrownError); // empty
}
});
});
In my misguided brain, I imagined that Salesforce would return my good ol' redirect, which would count as a "success" that I can just discard/ignore. Misguided indeed!
I can see a 200 OK result (which usually means "success") but the success callback isn't tripped.
The lead is added to the Salesforce database
Inspecting the content of what's returned shows zero; there is no content in the response.
The error callback IS being tripped (despite the 200 OK) but maybe due to intentionally not redirecting it is seen as a "resource not available"? (therefore my status code is 0, and there is no content in the thrownError?).
Any advice on identifying this as a successful POST so that I can trigger additional actions in a callback? I don't want to TOTALLY ignore the response, or I could end up in a scenario in which I'm acting on a failed POST as if it was successful. I need to capture the success somehow.
It occurred to me that it could be a cross-site scripting issue as well, but since the application doesn't exchange data in JSONP, I'm not sure how to get around that (and I'm not sure how to identify it in the first place).
Few things here:
1) The redirect response being sent by salesforce's API is most likely being interpreted as an error code.
2) The response code of the subsequent page (after the redirect) is 200 OK, from the sound of it.
3) It is not possible to do a POST request using JSONP. This is a limitation of JSONP; which is not actually an AJAX request, but an HTTP GET request wrapped inside of a dynamically generated script tag. Also, JSONP only works if the request yields an HTTP response of 200 OK.
I would recommend using your own server-side intermediary to handle your AJAX POST request. This will act as a proxy between your front-end app and salesforce's API. This will also allow you to better control the response being sent to your app.
var formData = $('#subForm').serialize();
var response = $.ajax({
type: "POST",
url: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data: formData,
success: function() {
console.log('success!'); // or not!
},
error:function (xhr, ajaxOptions, thrownError){
console.log(xhr.status); // 0
console.log(thrownError); // empty
}
}).responseText;
where var response will contain the return value from your ajax call

jQuery.get queue the request until network connection available

I am using jQuery Mobile to create a webapp to look at and update a CRM type system.
The mobile app sends update using jQuery.get and jQuery.post and they work fine when network connection is available.
How should I code or what can I use to queue the jQuery.get and jQuery.post calls when the network connection is not available so they are sent when it becomes available again.
Edit: ah poo, i just noticed you said 'jQuery Mobile', I initially read that as jquery for mobile lol. Ummm, this'll probably only work as long as jQM supports ajax the same as normal jquery
I had an idea with a secondary ajax request, but you shouldn't need that. Just set up your AJAX like this, and give it a timeout. If it takes > 4 (should be enough for a broadband connection, but some phones may need ~10-15) seconds for the server to respond, it'll just try the ajax request again up to retryLimit, which can be set, then changed later as well after the 50 times is up (i.e. should it send when the program is idle and has no data perhaps?). When it connects, it'll go to the success function, which will then send the data to the server.
So it'd be like:
$.ajax({
type: 'GET',
timeout: 4000,
tryCount : 0,
retryLimit: 50,
success:function(data) {
sendSavedData();
}
error: function(xhr, textStatus, errorThrown) {
if(textStatus == 'timeout') {
this.tryCount++;
if(this.tryCount <= this.retryLimit) {
$.ajax(this);
return;
}
var check = confirm('We have tried ' + this.retryLimit + ' times to do this and the server has not responded. Do you want to try again?');
if(check) {
this.timeout = 200000;
$.ajax(this);
return;
} else {
return;
}
}
}
});

Ajax - Checking for connection drops

I am writing a Web chat application. It uses a long polling mechanism. Basically you send a request to the server, and the server holds it until there is data to send back. Then it responds, and then the client sends another request to the server. And the cycle repeats.
However, there is a problem - I have no error checking in place. What if the connection drops? Let's say I'm chatting with a friend and then my Wifi drops. Internet's down and let's say it goes back up a minute later. But then the long-polling mechanism has already died and with no polling, I have to refresh the page.
How can I implement an error checking mechanism to solve the problem of unsuccessful or dropped network connections? I am using jQuery to facilitate the Ajax requests if that helps.
*EDIT: Here is my JS code for the polling mechanism: *
// Polls the server for more data, basically a regular encrypted request
Minte.Network.poll = function()
{
// If client is not connected, do not send poll requests
if (!Minte.Client.connected)
return;
Minte.Network.request({ "action" : "poll"}, function(data) {
// If a client has disconnected and a poll returns afterwards, do not process it
if (!Minte.Client.connected)
return;
Minte.Network.lastPoll = Minte.clock.getTime();
Minte.Processor.process(data);
Minte.Network.poll();
});
};
// Send a regular, routine encrypted request
Minte.Network.request = function(data, callback)
{
$.post(SERVER_URI, data, function(data, textStatus, jqXHR) {
data = JSON.parse(data);
callback(data);
});
};
First off, you can hook the error handling of the ajax call. If it fails, you should eventually get an error condition back. Since I haven't seen this defined anywhere, you'd probably have to work out a way to test how all the different browsers respond when the connection is lost in different ways to see if this is something you could use exclusively. In any case, it won't hurt to hook the ajax failure response. You will likely also want to implement your own timeout so that if you haven't heard back from the server in xx time, then there must be some sort of problem.
Second off, if you want quicker feedback and more likely to be consistent even in different browsers, then you can have your server return a heartbeat. So, ever xx seconds of inactivity, your server would return a heartbeat response. The client would wait, xx + yy seconds (yy is some extra to allow for roundtrip time and any slight lag in the server response) and if it didn't receive either an actual datagram back from the server or a heartbeat response, then it would assume the connection has died. If it receives a heartbeat, it just makes another request again. You can set the heartbeat to whatever interval you want, though obviously short times are more taxing on the server infrastructure.
FYI, jQuery has a global ajax error handler described here: http://api.jquery.com/ajaxError#callback and the jQuery ajax call itself allow you to specify a timeout and an error handler.
In pseudo code:
$.ajax({
url: 'xxxx',
success: function(data, textStatus, jqXHR) {
if (data is heartbeat) start a new ajax connection to ask again
if (data has returned data in it) process it
};
error: function(jqXHR, textStatus, errorThrown) {
some sort of connection error has happened
};
timeout: 2 * 60 * 1000; // 2 minutes
});

Categories

Resources