jQuery exception handling

Question

Is there any way I could catch any uncaught exception in javascript? I mean, all my "dangerous" code are in try-catch blocks. But what about exceptions that I don't handle explicitly? I'm using jQuery, my main javascript file starts with :

$(document).ready(function(){})

here I bind some events to some DOM elements. I can use try-catch blocks here, but they will catch exceptions that occur during the event binding procedure, not during the event handling. But if I used try-catch blocks in every event handling functions it would be ugly.

How should I catch exceptions that don't occur in my explicit try-catch blocks? (I don't want to write a general handler function, I just want to send the problem to my server)

Answer 1

You could write a function that would wrap your real handlers in a try/catch

function tc(func, msg) {
  msg = msg || "Handler exception";
  return function(e) {
    try {
      return func(e);
    }
    catch (exc) {
      $.post( /* send exception to server? */ );
      throw exc; // let nature take its course
    }
  };
}

(Might want to get fancier with argument handling etc.) Then when you bind handlers you'd do:

$('#whatever').click(tc(function(e) {
  // your handler function
}, "This is the message sent to the server when this handler fails"));

Also, if you want to make sure "this" in the handler behaves as before, you can do func.apply($(this), e) instead of just func(e).

Answer 2

You can use the window.onerror event handler, it's not supported in Opera though and it may not fire in certain situations (thanks @Josh).

It's not really wise to do this, however, it will make bug finding a nightmare for a start. It's generally best to make sure your code is error free in the first place :-) You certainly shouldn't need to use try... catch statements very often in JavaScript and you definitely shouldn't be using empty catch blocks.

I can use try-catch blocks here, but they will caught exceptions that occured during the event binding procedure, not during the event handling.

You can also add try/catch blocks to inner scopes:

// Outer
try { 
    $(document).ready(function(){})
}
catch (e) {
    /* Error handling */
}

// Inner
$(document).ready(function(){
    try { /* ... */ } catch (e) { /* Error handling */ }
});