Global AJAX error handling with jQuery

Error handling and feedback for AJAX requests can be a tedious undertaking for JavaScript heavy web applications. Often the AJAX functions are spread out in your code and, if you're like me, you may put off error handling until late in the game.

In a significant web project we're wrapping up, we were struggling to effectively handle session expiration issues when making AJAX calls. A major portion of this application uses AJAX and jQuery to perform the primary tasks in the software but the authentication is handled by .NET forms authentication on the server side. The sliding expiration is only 20 minutes, so when you walk away for a bit and return, you could easily create a new AJAX action which would fail silently due to an unauthorized error.

Our options as we saw them were:

1. Ping the server periodically to check for authorization, then redirect if unauthorized
2. Add an error handling function to each AJAX function to deal with problems
3. Add global error handling if possible

It turns out that, with JQuery, option 3 is trivial and exactly what we needed.

AJAX Setup

jQuery has a handy method called $.ajaxSetup() which allows you to set options that apply to all jQuery based AJAX requests that come after it. By placing this method in your main document ready function, all of the settings will be applied to the rest of your functions automatically and in one location.

$(function () {
    //setup ajax error handling
    $.ajaxSetup({
        error: function (x, status, error) {
            if (x.status == 403) {
                alert("Sorry, your session has expired. Please login again to continue");
                window.location.href ="/Account/Login";
            }
            else {
                alert("An error occurred: " + status + "nError: " + error);
            }
        }
    });
});

In this example, we're using the $.ajaxSetup method to define an on error handler. In this handler we check for a HTTP Response code 403 (Forbidden) and if found, redirect to the login screen. This solved our problem across the entire application in one shot. Additionally we add a very basic and generic error message if a request should fail for a different reason.

Additional Considerations

The $.ajaxSetup method accepts all of the parameters that a normal jQuery $.ajax method does and makes each of those settings the default action for future AJAX requests. Individual AJAX requests can easily override the defaults by specifying that option in the request.

You may be thinking, that's all well and good but does that mean I have to rewrite all of my shortcut calls to $.get, $.post, $.getJSON, $getScript, and $.load? The answer is No. Since the underlying call for each of these methods actually is the standard $.ajax call, they will all work with your new $.ajaxSetup defaults.

Now go forth and handle errors!

jQuery Documentation