Back to Blog

Global AJAX error handling with jQuery

September 7, 2012

By Matt Mombrea
5 Comments

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

 

Matt Mombrea

Matt Mombrea

Matt is a longtime entrepreneur and software engineer. He also sits on the board of Computer Science at SUNY Fredonia. Born and raised in Buffalo, Matt is passionate about building and maintaining great businesses in Buffalo. Apart from leading Cypress North, Matt architects our company’s datacenter, engineers dozens of custom applications, and directs the rest of the development team.

See Matt's Most Recent Posts

Share this post

5 comments

Haji December 19, 2012Reply

Hey great post and great solution. One question: say one of your ajax calls has a different exception (say 402) you want to handle on top of the 403 error. Overriding the error handler and then handling them both doesn’t seem ideal (duplicate code). Is there an elegant way that the 403 errors are handled by the error handler set in .ajaxsetup, and your 402 error is handled by the error handler you passed to the specific ajax call.

Matthew Mombrea December 19, 2012Reply

Haji,

That’s a good question, I’m not sure I know the answer to that. If it’s possible for other calls to get a 402 response, I might add it into the global error handler. As far as overriding for the one specific error then falling back to the global handler, I don’t know of a way to do that (that doesn’t mean there isn’t one).

Haji December 27, 2012Reply

Thanks for the response! Might have to do more research on this 🙂

Josiah June 13, 2013Reply

Note that this method of error handling is considered bad practice. The jQuery documentation strongly discourages the use of the $.ajaxSetup() api. This is noted in the documentation that you’ve linked in your post.

Best practice is to use global error handlers for the purpose you’re describing in this post. See the documentation for implementation information http://api.jquery.com/category/ajax/global-ajax-event-handlers/

Ale March 7, 2017Reply

Thanks, I needed this!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Search our blog

Start A Project

Categories

What's next?

Well...you might like one of these

Article

Friday Fun at Cypress North

If a picture is worth a thousand words, then a video must be...

Read article

Article

Cypress North Is Moving!

We're excited to announce that Cypress North will soon be...

Read article

Article

How to Use Google’s Structured...

It used to be that you needed a web developer to modify your...

Read article