Ajax отлов ошибок

This is a tutorial on how to handle errors when making Ajax requests via the jQuery library. A lot of developers seem to assume that their Ajax requests will always succeed. However, in certain cases, the request may fail and you will need to inform the user.

Here is some sample JavaScript code where I use the jQuery library to send an Ajax request to a PHP script that does not exist:

$.ajax({
     url: 'does-not-exist.php',
     success: function(returnData){
         var res = JSON.parse(returnData);
     },
     error: function(xhr, status, error){
         var errorMessage = xhr.status + ': ' + xhr.statusText
         alert('Error - ' + errorMessage);
     }
});

If you look at the code above, you will notice that I have two functions:

• success: The success function is called if the Ajax request is completed successfully. i.e. If the server returns a HTTP status of 200 OK. If our request fails because the server responded with an error, then the success function will not be executed.
• error: The error function is executed if the server responds with a HTTP error. In the example above, I am sending an Ajax request to a script that I know does not exist. If I run the code above, the error function will be executed and a JavaScript alert message will pop up and display information about the error.

The Ajax error function has three parameters:

• jqXHR
• textStatus
• errorThrown

In truth, the jqXHR object will give you all of the information that you need to know about the error that just occurred. This object will contain two important properties:

• status: This is the HTTP status code that the server returned. If you run the code above, you will see that this is 404. If an Internal Server Error occurs, then the status property will be 500.
• statusText: If the Ajax request fails, then this property will contain a textual representation of the error that just occurred. If the server encounters an error, then this will contain the text “Internal Server Error”.

Obviously, in most cases, you will not want to use an ugly JavaScript alert message. Instead, you would create an error message and display it above the Ajax form that the user is trying to submit.

JQuery 3.0: The error, success and complete callbacks are deprecated.

Update: As of JQuery 3.0, the success, error and complete callbacks have all been removed. As a result, you will have to use the done, fail and always callbacks instead.

An example of done and fail being used:

$.ajax("submit.php")
  .done(function(data) {
      //Ajax request was successful.
  })
  .fail(function(xhr, status, error) {
      //Ajax request failed.
      var errorMessage = xhr.status + ': ' + xhr.statusText
      alert('Error - ' + errorMessage);
})

Note that always is like complete, in the sense that it will always be called, regardless of whether the request was successful or not.

Hopefully, you found this tutorial to be useful.

Documentation Menu

Many pages send AJAX requests to a server.
Because this relies on the cooperation of the server and the network between the client and the server,
you can expect these AJAX errors:

• Your JavaScript program receives an error response instead of data;
• Your program has to wait too long for the response. You can’t have the user wait indefinitely for some data to load.
• Your program has to wait longer than expected for the response. You or your marketing department may decide to
  time out after 5 seconds, and that if responses take over 2 seconds to arrive you want to know about it.

This page shows how to implement AJAX error handling with JavaScript loggers that log to the server, so you find out about these issues.

Initial code without proper AJAX error handling

Below is a fairly typical AJAX call implemented with jQuery’s $.ajax:

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 timeout

The $.ajax method lets you set a timeout in milli seconds. When a timeout happens,

• The fail callback is called, with errorThrown set to «timeout».
• The request is aborted, meaning that even if the response arrives later on, your done callback is not called by jQuery.

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: Log fatal message in case of error or timeout

When there is an AJAX error response or the AJAX request times out, you’ll
want to log as much information as you have, including the error message that jQuery gives you,
the url and the request data.

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: Log warning message if AJAX response takes longer than expected

Record the time before making the AJAX call and compare that with the time
when the response is received to find out how long the user had to wait for the response.
Log a warning message if it took longer than expected.

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
}

In this article I will explain how to handle errors and exceptions in jQuery AJAX calls and show (display) Custom Exception messages using jQuery Dialog.

There are two types of Exceptions which is caught by jQuery

1. When exception object is in the form of JSON object.

2. When exception object is in the form of plain text or HTML.

I will explain both the types with detailed explanation and also how to display the exception error details in both the cases.

WebMethod for testing both types

In order to test both the cases I have created the following WebMethod which simply tries to convert the received string value to integer.

1. When exception object is in the form of JSON object

In the following HTML Markup, I have created a simple form with a TextBox and a Button which prompts user to enter a Numeric value.

The value entered is passed to the WebMethod using a jQuery AJAX call where it is converts string value to integer.

If it is a valid number then an alert message is displayed inside the jQuery AJAX Success event handler and if an exception occurs in the WebMethod, the thrown exception is caught inside the jQuery AJAX Error event handler and which makes a call to the OnError JavaScript function which processes and displays the exception details.

2. When exception object is in the form of HTML or plain text

The second case is similar to the first one. In order to receive a Non-JSON response I have just set incorrect WebMethod name in the jQuery AJAX so that it generates an error.

Parsing the received Exception response using jQuery

Here I am explaining the details of the OnError JavaScript function which is called by the Error event handler in both the above case.

This function accepts the following three parameters

xhr – It is the error response object.

errorType – It describes the type of error.

exception – It contains the title of the exception occurred.

Inside this function, I have placed a TRY CATCH block and within the TRY block, the Exception received is parsed to a JSON object and then the details of the exception are displayed using jQuery Dialog Modal Popup.

If an error occurs during the process of parsing the JSON string, it means it is a Non-JSON response i.e. HTML or plain text and then it is handled inside the CATCH block where I am displaying the exception directly without any processing.

Demo

Downloads