What is an AJAX Error? Managing Errors in AJAX

Today here at Arzhost, we discuss What is an AJAX Error? Many pages query a server via AJAX. You can expect these AJAX problems because this depends on the server’s cooperation and the network between the client and server. Instead of data, your JavaScript programme gets an error response because it takes too long to process request.

Managing Errors in AJAX

What is an AJAX Error? Many pages query a server via AJAX. You can anticipate these AJAX problems because this depends on server’s cooperation and the network between client and server:

1. Instead of data, your JavaScript programme receives an error response;
2. It takes too long for your software to receive the response. The user cannot be made to wait indefinitely for data to load.
3. The response takes longer to arrive than anticipated for your programme. If responses take longer than two seconds to come. You or your marketing department may elect to time out after five seconds.

This page proves how to use JavaScript loggers that log to server to create AJAX error handling and learn about these problems.

Initial Code that Doesn’t Properly Handle AJAX Errors

What is an AJAX Error? An application of an AJAX call using jQuery’s $. ajax shown below:

var requestData = data to send to server;
var url = Url to send request to;
// Show spinner image
$.ajax(url, {
    "data": requestData,
    "type": "POST"
})
.done(function (data, textStatus, jqXHR) {
    // Process data, as received in data parameter
})
.fail(function (jqXHR, textStatus, errorThrown) {
    // Request failed. Show error message to user. 
    // errorThrown has error message.
})
.always(function(jqXHR, textStatus, errorThrown) {
    // Hide spinner image
}

Step 1: Add a break

What is an AJAX Error? You can set a millisecond timeout using the $.ajax function. When a timeout occurs, Calling the fail callback with errorThrthrown set to “timeout”

Even if the response is received later, jQuery won’t call your done callback because the request has been cancelled.

var requestData = data to send to server;
var url = Url to send request to;
// Show spinner image
$.ajax(url, {
    "data": requestData,
    "type": "POST",
    "timeout": 5000
})
.done(function (data, textStatus, jqXHR) {
    // Process data, as received in data parameter
})
.fail(function (jqXHR, textStatus, errorThrown) {
    // Request failed. Show error message to user. 
    // errorThrown has error message, or "timeout" in case of timeout.
})
.always(function(jqXHR, textStatus, errorThrown) {
    // Hide spinner image
}

Step 2: Record a Fatal Message if an Error or Timeout Occurs

What is an AJAX Error? You should record as much information as you can about an AJAX error response or an AJAX timeout. Including the url, request data, and error message that jQuery gives you.

var requestData = data to send to server;
var url = Url to send request to;
// Show spinner image
$.ajax(url, {
    "data": requestData,
    "type": "POST",
    "timeout": 5000
})
.done(function (data, textStatus, jqXHR) {
    // Process data, as received in data parameter
})
.fail(function (jqXHR, textStatus, errorThrown) {
    // Request failed. Show error message to user. 
    // errorThrown has error message, or "timeout" in case of timeout.
    JL().fatal({
                "msg": "AJAX error response",
                "errorThrown": errorThrown,
                "url": url,
                "requestData": requestData
            });
})
.always(function(jqXHR, textStatus, errorThrown) {
    // Hide spinner image
}

Step 3: Record a Warning Message if an Unexpected Delay in an AJAX Response Occurs

What is an AJAX Error? To determine how long, the user has to wait for the response, keep track of the time before the AJAX request and compare it to time the response is received. If the time was longer than anticipated, log a warning message.

var requestData = data to send to server;
var url = Url to send request to;
// Show spinner image
var msBeforeAjaxCall = new Date().getTime();
$.ajax(url, {
    "data": requestData,
    "type": "POST",
    "timeout": 5000
})
.done(function (data, textStatus, jqXHR) {
    // Process data, as received in data parameter
    // Send warning log message if response took longer than 2 seconds
    var msAfterAjaxCall = new Date().getTime();
    var timeTakenInMs = msAfterAjaxCall - msBeforeAjaxCall;
    if (timeTakenInMs > 2000) {
        JL().warn({
            "msg": "AJAX response took long time",
            "timeTakenInMs": timeTakenInMs,
            "url": url,
            "data": data,
            "requestData": requestData
        });
    }
})
.fail(function (jqXHR, textStatus, errorThrown) {
    // Request failed. Show error message to user. 
    // errorThrown has error message, or "timeout" in case of timeout.
    JL().fatal({
                "msg": "AJAX error response",
                "errorThrown": errorThrown,
                "url": url,
                "requestData": requestData
            });
})
.always(function(jqXHR, textStatus, errorThrown) {
    // Hide spinner image
}