Global Error Handler For AJAX Requests in MVC

Objective

For a large application we need to have a provision to handle AJAX request exceptions globally. Otherwise, it will be a tedious task to handle it in every AJAX request. This article is not intended for starters. I assume that people reading this have a good knowledge of MVC and have about 2 years of experience working with MVC.

Problem Statement

It is ideal to put some operations that are common to all AJAX requests through the application. Sometimes we also need to show a custom error message to let the user correct their actions. So it is always helpful to have a global error handler for all AJAX requests.

The Global AJAX Handler

jQuery provides many AJAX global handlers. These handlers are fired automatically if jQuery.ajaxSetup () property is set to true, that it is by default. To enable the global error handler we will use the .ajaxError handler.

If we want to call any controller action asynchronously, then we can either define an AJAX form action, or we can call it using a jQuery script. Both ways are useful.

Calling actions asynchronously

We can define an AJAX form action in the following way:

@using (Ajax.BeginForm("FormulaAction", "Home", new AjaxOptions
{
   UpdateTargetId = "FrmlEditForm",
   HttpMethod = "POST",
   OnBegin = "Base.showProgress",
   OnComplete = "Base.hideProgress"
   }, new { id = "frmAdd", autocomplete = "off" }
))

“FormulaAction” is the controller name and “Home” is the action name. We are setting some options here, like to show a progress indicator and that is the target view and so on. To learn more on this please check some tutorial on BeginForm ajax helper.

Another way is to call from the jQuery file. Suppose we have an editable data grid and we have provided the user to add/edit/delete data from the grid. On a “Delete” icon/button click we want to call any Action. For that we can define a script. The way I do that is I create one script per module/.csproj level and use it from the view. Let me try to provide an overview by giving a snippet of my project:

Namespace: Employee.EmployeeEntry.js

In the button onClick event I call this script:

delRow: function (GridName) {
   $.ajaxSetup({
      cache: false
   });
   // Using a telerik MVC grid extension
   var grid = $(GridName).data('tGrid');
   var selectedrow = $(grid.$tbody[0]).find("tr.t-state-selected");
   var msgText;
   if (selectedrow.length == 0) {
      alert("Please select a row");
      return;
   }
   var row = selectedrow[0];
   var gridData = grid.data[$(grid.$tbody[0].rows).index(row)];
   var employee_uid = gridData.Employee_UID;
   var session_uid = gridData.SESSION_UID;
   $.ajax({
      url: '/ Employee/EmployeeEntry/DeleteEmpData',
      data: {
         "emp_uid": employee_uid,
         "session_uid": session_uid,
      },
      cache: false,
      beforeSend: function () {
      Base.showProgress();
   },
   success: function (data, textStatus, jqXHR) {
   Base.hideProgress();
   $(GridName).data('tGrid').rebind();
}, }) }),

This will call the EmployeeEntry Controllers DeleteEmpdata action and will pass the Employee id and current session id.

public ActionResult DeleteStgData(long EMP_UID, string SESSION_UID)
{
   // Delete action
}

Setup Global error handler

To handle any ajax exception in the controller, we define a global error handler at the WebProject level. We created a script and then registered all error handlers there. Have a look at our global error handler:

//register namespace
var Base = namespace("Base");
Base = {
   rootUrl: "/",
   /// Set Default Configuration for Application
   init: function (strRootURL) {
      //set root url
      this.rootUrl = strRootURL;
      //ajax call setup
      $.ajaxSetup({
         error: function (jqXHR, textStatus, errorThrown) {
         //Use Base handleError method
         try{
            Base.hideProgress();
            var msg = "";
            if (jqXHR.status === 0) {
               msg = 'Not connect. Verify Network.';
            } else if (jqXHR.status == 404) {
               msg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 500) {
               msg = 'Internal Server Error [500].';
            }
            else if (jqXHR.status == 401) {
               location.href = "/";
               return;
            }
            else if (textStatus === 'parsererror') {
               msg = 'Requested JSON parse failed.';
            } else if (textStatus === 'timeout') {
               msg = 'Time out error.';
            } else if (textStatus === 'abort') {
               msg = 'Ajax request aborted.';
            } else {
            try
            {
               msg =JSON.parse(jqXHR.responseText);
            }
            catch(ers)
            {
               msg =jqXHR.responseText;
            }
         }
         Dialog.error({
            message: msg,
            title: "Error"
         });
      }
      catch (err)
      {
         Dialog.error({
            message: errorThrown,
            title: "Error"
         });
      }
      //hide loader
      Base.hideProgress();
   }
});

Where Dialog is a custom class. You can use your own dialogue to show the error. See, you can handle any error that has occurred during the ajax request.

Propagating Custom error:

As you can see, currently 0,404,500 and 401 HTTP errors are defined. But if you want to specifically show any custom error message, in my example suppose the delete has failed for some reason, then in the controller action we can pass a custom HTTP Status and Error message to the Ajax Error handler so that the msg =JSON.parse(jqXHR.responseText); statement can be executed and the message is shown in an error dialogue box.

Catch (Exception Ex)
{
   this.HttpContext.Response.StatusCode = 20;
   return new JsonResult()
   {
      JsonRequestBehavior = JsonRequestBehavior.AllowGet,
      Data = Ex.Message or “Custom message”
   };
}