How to correctly handle ajax timeouts

Question

For example, a user want to login, the connection is slow or the request is stuck into some network , then the user waits, but sometimes is better resend the request than waiting.

Questions:

What would be the desirable waiting time? (no uploading files, just simple login) I've put 15 secs, but maybe it's too much.
What's the best solution?

1) Keep the user waiting till he decides to click login again

2) Set an ajax timeout

$.ajax({

url: '{{ url('/login') }}',
data: data,
method: 'POST',
timeout: 15000,

and display them an error

error: function(data, status, error){

if(status==="timeout") {
var errorString = 'Please retry. Ref Timeout';                      
}

3) do an auto retry (code)

$.ajax({
url : 'someurl',
type : 'POST',
data :  ....,   
tryCount : 0,
retryLimit : 3,
...
error: function(data, status, error){
    if (status == 'timeout') {
       this.tryCount++;
       if (this.tryCount <= this.retryLimit) {
       //try again
           $.ajax(this);
           return;
       }            
       return;
    }

4) Use a wrapper function over the ajax

setTimeout(function(){
    $.ajax({...})
}, 15000);

5) Some other options

score 4 · Accepted Answer · answered Jan 11 '18 at 08:19

I would personally do a mix, that means, try 2 times and the fall, you can use this code:

$.ajax({

    url: '{{ url('/login') }}',
    data: data,
    method: 'POST',
    timeout: 10000, // sets timeout to 5000 = 5 seconds
    retryCount: 0, // start retry count
    retryLimit: 1, //will let you retry a determined number of times

error: function(data, status, error){       

if(status==="timeout") {
    this.retryCount++;
    if (this.retryCount <= this.retryLimit) { //&& Date.now() - this.created <  this.retryTimeout
        console.log("Retrying");
        $.ajax(this);
        return;
}
else{
    var errorString = 'Timeout';                        
}

score 1 · Answer 2 · answered Dec 13 '17 at 07:54

Default server timeout is 30s, so it's proper timeout in Ajax.

Don't bombard server with re-logins (if it's too busy, you make it even worse).

Do not allow user to click login button once more while request is pending.

IMO there should be ajax without timeout and on error you should tell user to try again later.

$.ajax({
    error: function (response) {
        console.error(response); // Show error response to dev

        alert('Something went wrong. Please try again later or contact administrator admin@email.com'); // Use pretty modal instead
    }
})

Dobrin Tinchev · Answer 3 · 2017-12-13T08:11:20.260

You could you a library like https://github.com/inmar/patience_js that lets you define retry strategies and keep your code a lot cleaner.

Or better yet take a look at RxJS

where you can use an approach like the one suggested here: RxJS retry operator with ajax call

const doLogin = () => {
    console.log('calling');
    return $.ajax('...')
};

const stream = Rx.Observable.fromPromise(doLogin).retry(3);

stream.subscribe(log);

How to correctly handle ajax timeouts

3 Answers3