AJAX Error Handling with JQuery

Printer-friendly version

I was recently working on a website that was heavily reliant on AJAX requests. JQuery has a lot of methods to define and process AJAX requests in a convenient fashion, but I noticed that one feature JQuery offers is often overlooked by developers, even though it was added back in version 1.0. 

We are going to discuss the ajaxError() method that can serve as a centralized place for AJAX request error processing. In general, unexpected server responses are handled in similar fashion as on a web page, such as a notification or a modal dialog appearing to tell the user that something unexpected happened and the operation has failed. 

By looking at the JQuery documentation for the AJAX convenience methods, like $.post and $.get, we notice that we can attach callback methods to successful and failed AJAX calls. 

$.post(“/api/sendStuff”, function(){

   //... handle success 

}).fail(function(){

   //... handle failure and display notification

});

Having a way to handle errors on individual AJAX calls is a great way to fine tune your JavaScript and deal with specific error scenarios close to their occurrences. However, being aware of a centralized AJAX error handling routine could avoid scenarios similar to this:

$.post(“/api/operationA”, function(){

   //...

}).fail(function(jqXHR, textStatus, error){

   handleError(error);

});

$.post(“/api/operationB”, function(){

   //...

}).fail(function(jqXHR, textStatus, error){

   handleError(error);

});

$.post(“/api/operationC”, function(){

   //...

}).fail(function(jqXHR, textStatus, error){

   handleError(error);

});

...

In this scenario, the developer created a sophisticated dynamic single page application driven by a collection of AJAX requests and wrote a method that processes errors thrown by those AJAX requests. Technically, there isn’t anything wrong with this solution. However, it is not the most elegant approach and causes a lot of repeated code fragments. 

We can get rid of all the redundant fail callbacks by defining the default behavior of the page in case an AJAX exception occurs with ajaxError(). The method needs to be attached to the document object and will serve as a centralized processing place for those types of AJAX scenarios:

$(document).ajaxError(function( event, jqxhr, settings, thrownError ) {

   handleError(error);

});

It is worth noting that this global handler will always fire upon an error situation regardless if we have defined a local fail callback. Consequently, the following code fragment will display both error notification at the same time:

$(document).ajaxError(function( event, jqxhr, settings, thrownError ) {

   showErrorNotificationA(error);

});

$.post(“/api/operationA”, function(){

   //...

}).fail(function(jqXHR, textStatus, error){

   showErrorNotificationB(error);

});

In order to suppress the global error handler, we need to add some additional logic that gives use more control over it. We can, for instance, define a flag in the settings of the AJAX request that determines if we want the global error handler to fire or not. The biggest disadvantage of this approach is that we won’t be able to use $.post() and $.get() anymore for these kinds of requests and we need to fall back to $.ajax() that gives us a more granular control over the request. Here is an example:

$(document).ajaxError(function( event, jqxhr, settings, thrownError ) {

   if(!settings.suppressGlobalErrorHandler){

         handleError(error);

   }

});

$.ajax(“/api/operationA”, {

   suppressGlobalErrorHandler: true,

   success: function(){

      //...

   },

   error: function(jqXHR, textStatus, error){

      //...

   }

});

About the Author:

TopLine Strategies delivers the complete integration and development of sales, marketing and customer service technologies that enable corporate clientele to improve revenue streams and strengthen customer interactions. Our project management and consulting is designed to achieve timely delivery, 100 percent user adoption of the technologies we implement and deliver measurable returns on investments for our clients.

Comments (0)

Related Blogs

TheReact Native Open Source roadmap was announced in Q4 2018 after they decided to invest more in the React Native open source community.

October is not just about pumpkins, fall foliage, and cooler temps anymore. October 2018 also means the exciting introduction of Microsoft Dynamics 365 for Customer Engagement.

Back in 2016, Microsoft introduced its intentions to refresh its CRM and ERP strategy with Dynamics 365. At the heart of its services was the Common Data Model (CDM).