jQuery AJAX Error Handling (HTTP Status Codes)

Question

We have an API which uses proper HTTP status codes for errors, and responds with JSON-encoded responses and appropriate Content-Type header. My situation is that jQuery.ajax() triggers the error callback when it encounters an HTTP error status, and not the success callback, so even when we have an intelligible JSON response, we have to resort to something like this:

$.ajax({
    // ...
    success: function(response) {
        if (response.success) {
            console.log('Success!');
            console.log(response.data);
        } else {
            console.log('Failure!');
            console.log(response.error);
        }
    },
    error: function(xhr, status, text) {
        var response = $.parseJSON(xhr.responseText);

        console.log('Failure!');

        if (response) {
            console.log(response.error);
        } else {
            // This would mean an invalid response from the server - maybe the site went down or whatever...
        }
    }
});

Is there a better paradigm than doing identical error handling in two spots in each jQuery.ajax() call? It's not very DRY, and I'm sure I've just missed something somewhere on good error handling practices in these cases.

I'm assuming by HTTP Status code, you mean you are sending back 501 as the HTTP status code on error. Why would you do that if you are properly handling the error on the server side? — Lawrence Johnson
Check out the jquery.ajax (api.jquery.com/jQuery.ajax) statusCode parameter. — ron tornambe
@LawrenceJohnson: I'm using the response codes as they were meant to be used. Sending a 200 OK every response would require reinventing the wheel with respect to error codes/messages. — FtDRbwLXw6
Yes, but those errors are in the protocol at the network level. You've lost your mind if you think validation errors are the same as Http errors. — Lawrence Johnson
@Liam: Nothing in my question has anything to do with how to get response codes out of jQuery.ajax(). — FtDRbwLXw6

Terry Terry · Accepted Answer · 2012-10-04T20:18:41

Check out jQuery.ajaxError()

It catches global Ajax errors which you can handle in any number of ways:

if (jqXHR.status == 500) {
  // Server side error
} else if (jqXHR.status == 404) {
  // Not found
} else if {
    ...

Alternatively, you can create a global error handler object yourself and choose whether to call it:

function handleAjaxError(jqXHR, textStatus, errorThrown) {
    // do something
}

$.ajax({
    ...
    success: function() { ... },
    error: handleAjaxError
});

jQuery AJAX Error Handling (HTTP Status Codes)

1 Answers