how to handle wcf errors using fault contract and jquery ajax

See more:

Ajax

jQuery

WCFServices

Hello All,

I searched a lot in the internet but could not be able to find any solution for my problem.

Problem

I have created two applications. One is WCF service application and another one is the main application that consumes WCF service operations through jQuery Ajax.
Everything is working fine. Finally, I want to complete the task by adding code for error handling in WCF service.
Now, I added "Fault Contract" in WCF service but cannot be able to understand how to pass the error from service to jQuery ajax directly. Right now, the custom error message is not being passed and the general service error message "Bad Request" is being passed.

WCF Service Code

[ServiceContract]
public interface IAdmin_UserDet
{
  [OperationContract]
  [FaultContract(typeof(ErrorHandler))]
  string getData();
}

[DataContract]
public class ErrorHandler
{
   [DataMember]
   public string message { get; set; }
   [DataMember]
   public string methodName { get; set; }
   [DataMember]
   public int lineNumber { get; set; }
   [DataMember]
   public string errorDateTime { get; set; }
}

[System.ServiceModel.ServiceBehavior(IncludeExceptionDetailInFaults = true)]
public class Admin_UserDet : IAdmin_UserDet
{
    [WebInvoke(Method = "GET", UriTemplate = "returnData", ResponseFormat =        WebMessageFormat.Json)]
    public string getData()
    {
        try
        {
            int num1 = 2;
            int num2 = 0;

            int res = num1/num2;
            return res.ToString();
        }
        //catch(FaultException<ErrorHandler> objErr)
        catch(Exception ex)
        {
            ErrorHandler objErr = new ErrorHandler();
            objErr.message = "division by zero";
            objErr.methodName = "getData";
            //return objErr.Detail.message + " | " + objErr.Detail.methodName;
            throw new FaultException<ErrorHandler>(objErr);
        }
    }
}

jQuery Ajax Code (through which I am calling the service)

var wcfUrl = "http://localhost/VMService/Admin_UserDet.svc/";

$('button[id=btnTest]').click(function () {
    $.ajax({
        type: "GET",
        url: wcfUrl + "returnData",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) {
           alert("no error");
           console.log(response);
        },
        error: function (e) {
          console.log(JSON.parse(e.responseText));
     }
  });
});

Error Message which I am getting after running the application

GET http://localhost/VMService/Admin_UserDet.svc/returnData 400 (Bad Request)

But, I want the error message as "division by zero | getData", which has been set in getData Method.

Please guide me the exact way / any link from where I might get an idea about how to handle WCF errors from jquery ajax.

Thank you.