JQuery .AJAX Error handling and capturing

jQuery - Write Less Do More

jQuery – Write Less Do More

Using JQuery, you can with relative ease access AJAX requests.  JQuery provided several ways to do this. $.get, $.post and $.ajax.  To be honest if like me you never had to use them you never really knew too much about them.

I only really started to have to use these functions on a regular basis in 2010 and wanted to do more than just created a standard AJAX request.

There are a couple of ways to do this;

JQuery AJAX functions

$.ajax({
  url: "yourpage.php",
  context: document.body,
  success: function(){
    //do something on success
  }
});

Or you could write;

$.ajax({
  url: "yourpage.php",
  context: document.body
  }).done(function() {
  //do something like add a class!
  $(this).addClass("completed");
});

The problem here was that there was no way to capture and handle the errors in a way which was easy to understand if any occurred, not just for me but for other developers I worked with.

The idea is always to code so someone else can understand what you are writing.

So I created a series of “if statements”, arguments if you like, that would in the event of there being an error handle it accordingly telling me what the problem was. It’s done in an particular order and is using the error handling function $.ajaxSetup.

JQuery AJAX Error function

$(function() {
    $.ajaxSetup({
        error: function(jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
            }
        }
    });
});

Now that is written and in place, all that is left is to use the handler function to initiate the call. In fact you can using any of the methods I’ve already mentioned to initiate the AJAX call, but we’ll use $.ajax.

JQuery AJAX Call

$.ajax({
  url: "yourpage.php"
});

What you have done, is leverage the error handling and capturing function using JQuery, making easier for you to identify errors that arise as you build fabulous asynchronous web applications.

You can if you like change the alert to a console notification and personally I very much prefer that. A really friendly way to do that using JQuery can be done like this;

// For testing purposes use $.logThis("text"); to log your console tests
jQuery.logThis = function (text) {
    if ((window['console'] !== undefined)) {
        console.log(text);
    }
}

This way, it doesn’t throw up errors in typically developer “unfriendly browsers like Internet Explorer.

Happy coding.

1 Comment

  1. For an automated way to capture this and way more kinds of errors from your visitors, check out our service at trackjs.com. Get all the story of how the user ended up in a bad state.

Leave a Reply

Your email address will not be published. Required fields are marked *