Error handling jQuery AJAX promises with Q

Question

I'm using jQuery for AJAX but Q elsewhere in our application so want to ensure that the Promise implementation is consistent.

I've wrapped the jQuery AJAX call with Q like so:

Q($.ajax(url, {
  type: 'get'
}));

And it works all fine for success responses. Now I want to add error handling, I want to have global error handling (since we have a consistent error response from our server), making an API like so:

var xhr = function (url) {
    return Q($.ajax(url, {
      type: 'get'
    }))
    .then(function (data) {
      return data;
    }, function (res) {
      //global error handling
    });
};

And I'd expect to use it like this:

xhr('...').then(function () { console.log('success'); });

The problem is when the global error handler runs the "success" method on the consumer of the xhr method is invoked.

How would you prevent that?

A runnable sample can be seen here - http://jsbin.com/gudifu/3/edit

Answer 1

Due to jQuery's non-standard promises, you have to jump through hoops to pass on the error to a Q-coerced promise.

Firtly, jqXHR's error signature is (jqXHR, textStatus, errorThrown), and you typically want to pass on the second arg, textStatus.

Secondly, the two promise implementations are quite different with regard to error handling:

• jQuery: propagates the error state unless a fresh, resolved promise is returned from a .then() error callback. .fail() is guaranteed to propagate the error state regardless of what is returned. An uncaught throw will terminate the event thread.
• Q: marks an error as "handled" (ie send it down the success path) unless a .catch(), .fail() or .then() error callback rethows the error or throws a fresh one, in which case the promise continues down the error path.

Hence, you need to :

• chain .then(null, errHandler) to your jQuery.ajax() call in order to report textStatus
• throw an error from Q based on the jQuery error

var xhr = function (url) {
    return Q($.ajax(url, {
      type: 'get'
    }).then(null, function(jqXHR, textStatus, errorThrown) {
        return textStatus;
    })).then(function (data) {
        return data;
    }, function (textStatus) {
      //global error handling
      throw new Error(textStatus);
    });
};

You could alternatively throw a proper error from jQuery and simply rethrow it from Q.

var xhr = function (url) {
    return Q($.ajax(url, {
      type: 'get'
    }).then(null, function(jqXHR, textStatus, errorThrown) {
        return new Error(textStatus);
    })).then(function (data) {
        return data;
    }, function (err) {
      //global error handling
      throw err;
    });
};

The nett effect of the two solutions will be pretty close to identical. I think I'm right in saying that they will show a different error line number if the error was logged - the former stemming from Q and the latter stemming from jQuery.

Answer 2

Your problem is that the global error handler handles the error. As promises chain, your xhr(…) promise will just be fulfilled with whatever the error handler returned. It's like a catch, when an exception has been handled then normal execution resumes.

So you need to rethrow the exception from the handler so that the resulting promise gets rejected as well:

var xhr = function (url) {
    return Q($.ajax(url, {
        type: 'get'
    }))
    .then(null, function (res) {
        //global error handling
        throw res;
    });
};