Handling WebFaultException in jQuery AJAX call

Question

I have some jQuery that makes a call into a WCF service. When the service runs into an error, it throws a WebFaultException with a description and a 500 Internal Server Error status code.

Client side, I'm doing something along the lines of:

$.ajax({
    url: BaseUrl + 'ThisShouldThrowAnException',
    type: 'GET',
    dataType: 'jsonp',
    crossDomain: true,
    success: function (data) {
        // this should never be called
        alert("Got data: " + data);
    },
    error: function (jqXHR, status, message) { // never called
            // would like this to handle my status code
        alert(status + " " + message);
    }
});

On the local IIS server, the corresponding code that's being invoked is given as:

[OperationContract]
[WebGet(RequestFormat=WebMessageFormat.Json)]
bool ThisShouldThrowAnException();


public bool ThisShouldThrowAnException()
{
    throw new WebFaultException<String>("Something really bad happened.", HttpStatusCode.InternalServerError);
}

The issue is that when I make this call, the success function is called. jQuery seems to swallow my 500 Internal Server Error and instead gives me a 200 OK. Inspection using Fiddler also reveals that my response status code is a 200 OK. When I call via the browser or if I handcraft a request I receive the appropriate 500 Internal Server Error.

My question is: How can I handle a WebExceptionFault inside of a $.ajax(...) call? As it stands, the $.ajax is completely ignoring any status code that gets passed to it.

I tried using ajaxError and statusCode, but neither worked:

$('#error').ajaxError(function() {
    alert("An error occurred");
});

$.ajax({
    url: BaseUrl + 'ThisShouldThrowAnException',
    type: 'GET',
    dataType: 'jsonp',
    crossDomain: true,
    success: function (data) {
        alert("Got data: " + data);
    },
    statusCode: {
        500: function() {
            alert("Got 500 Internal Server Error");
        }
    },
    error: function (jqXHR, status, message) {
        alert(status + " " + message);
    }
});

New Findings

On further analysis, when I inspected the query string that jQuery generates I find that the following returns a 200 OK:

http://localhost/RestService/RestService.svc/ThisShouldThrowAnException?callback=jQuery172003801283869839445_1341495740773&_=1341495740777

// on page:
jQuery172003801283869839445_1341495740773("Something really bad happened.",500);

Meanwhile, the following request returns a 500 Internal Server Error:

http://localhost/RestService/RestService.svc/ThisShouldThrowAnException

// on page:
"Something really bad happened"

Have you tried this in your error function >>var msg = JSON.parse(jqXHR.responseText); alert(msg.Message); — Suave Nti, Jul 03 '12 at 16:48
That would change nothing. The error handler is never called in the first place. — Mike Bailey, Jul 03 '12 at 17:57
Sorry Misread your question. I used this ajaxError for checking If my url has any problem like this : .ajaxError(function (e, xhr, settings, exception) { if (settings.url == "Default.aspx/GetDat") { alert('Url cannot be called'); } }); — Suave Nti, Jul 03 '12 at 18:24
There's a property called `ajaxError`? I didn't see that in the documentation. — Mike Bailey, Jul 03 '12 at 18:29

score 1 · Answer 1 · edited May 23 '17 at 10:09

1

Error handlers don't fire for jsonp requests. The jQuery ajax documentation has the following disclaimer for error(jqXHR, textStatus, errorThrown):

Note: This handler is not called for cross-domain script and JSONP requests.

If you have the option of switching to json and crossDomain=false the error handler should fire.

There is a similar SO question on this topic here

This SO question suggests catching any errors on the server, always returning 200 and returning the response code in the payload.

edited May 23 '17 at 10:09

Community

1
1

answered Jul 06 '12 at 00:46

pd40

3,187
3
20
29

1

How do you explain the fact that the bare web request, made *outside* of jQuery, returns a HTTP 200 error? Before I even get to jQuery, I'm already having issues that my browser is telling me `200 OK` on a request should show a 500 error. – Mike Bailey Jul 06 '12 at 02:54
I can only guess the browser is not requesting text/json so you are not hitting the actual ThisShouldThrowAnException() method. I am going to update my answer with a comment on response codes in success. – pd40 Jul 06 '12 at 10:22

Amith George · Accepted Answer · 2012-07-06T03:31:06.837

http://api.jquery.com/jQuery.ajax/

Under the section Data Types, they mention

The jsonp type appends a query string parameter of callback=? to the URL. The server should prepend the JSON data with the callback name to form a valid JSONP response. We can specify a parameter name other than callback with the jsonp option to $.ajax().

When data is retrieved from remote servers (which is only possible using the script or jsonp data types), the error callbacks and global events will never be fired.

Which is why your error callback is not firing and its directly going to the success callback.

EDIT: What does the data look like in the success function? Cuz from what I understand, whatever is returned from the server is passed in as data.

Here is an example of consuming a WCF webservice using JSONP.

http://bendewey.wordpress.com/2009/11/24/using-jsonp-with-wcf-and-jquery/

The key point is, WCF sees that you are requesting JSONP data and that you have provided a query string parameter called 'callback'. Thus WCF automatically returns a 200 OK (irrespective of actual status) and whatever data was returned by the remote function.

Further reading on how JSONP actually works: http://devlog.info/2010/03/10/cross-domain-ajax/

If you read how JSONP works, you will realize that's its not quite possible for jQuery to return the actual error status, as the server itself doesnt return it.

With regards to your current problem, either switch to JSON requests. If that's not possible, you can always check the data object in ajax success function. It will have the error code 500 as you are returning it.

Handling WebFaultException in jQuery AJAX call

New Findings

2 Answers2