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.

Answer 1

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
});