Question

I’m using $(document).ajaxError() to catch server-side and communication errors in ajax calls.

What’s a good clean way to globally catch client-side errors (for logging purposes) in ajax javascript handlers? Overriding $.ajax()?

E.g.

$.get("http://foo.com/", function(){
  alert(undefined.something); // I want this exception to be logged
});

I want to avoid writing individual try…catch…log for all my ajax handlers.

Answer 1

The only thing that comes to my mind is binding such error event:

​$(window).error(function(e){
    if ($.active > 0) {
        // your error handling
    }
});

$.active shows the number of active Ajax requests, so error will fire even if the request returns success but has undefined.something problem in the success handler.

DEMO: http://jsfiddle.net/KWX4k/

UPDATED: My test cases from the DEMO

I. Valid Ajax request with problem in success handler:

$.get("/", function() {
    undefined.something
});

​
Result: fires!

II. Invaid Ajax request without problem in success handler:

$.get("http://www.google.com/", function() {
    // undefined.something
});

Result: does not fire.

III. Simple undefined error in the code:

undefined.something

Result: does not fire.

So, it seems to be working 🙂

However in this method I see a small drawback. Since Ajax is usually used in asynchronous way, the event will fire twice if you have two errors – in Ajax handler and in the method which calls this Ajax request (i.e. placed immediately after calling Ajax). However, such situations are not important, since all actions after Ajax request are usually transferred to Ajax success handler.