Javascript error stops code execution

Question

Whenever an error occurs inside the event handler, it completely stops the code execution, so the second event is not called.

For instance:

$(function() { window.thisDoesntExist(); } $(function() { //Do something unharmful and unrelated to the first event } 

You can easily solve the problem in this (simplified) example by adding try / catch to both anonymous functions, but in fact these functions often add several other event handlers, which in turn will require try / catch. I get very repeating code filled with try / catch blocks.

My projects have a modular design where each function is in a different JS (and gets traction during the build process). I am looking for a more general way of handling errors within each function so that the error does not stop the execution of the code by other functions.

I have already tried the following solutions: - window.onerror (even if you return true in this function, code execution stops) - $ (window) .error () => is deprecated, and the code execution stops

Answer 1

I have found a solution. When using setTimeout, the code is executed in a separate thread, so it will not break other parts of the web page.

 $(function() { setTimeout(function() { window.thisDoesntExist(); }, 0); }); $(function() { setTimeout(function() { //Do something unharmful and unrelated to the first event alert("This passes") }, 0); }); 

In this example, the second function runs even when the first causes an error. Here is a working example: http://jsfiddle.net/mathieumaes/uaEsy/

Answer 2

You can create a helper function to prevent duplication of the same template code.

 function tryFunction(f, onerror) { try { if (typeof f == 'function') { return f(); } } catch (e) { return onerror(e); } } $(function() { var result = tryFunction(window.thisDoesNotExist, function (error) { alert('Whoops: ' + error); }); }); 

I created a small demonstration . This is a little different, but the same idea.

Answer 3

You can simply call if (typeof myFunction == 'function') before calling myFunction()

And optionally wrap it in a universal function, for example, Bart said, in order to be able to log an error in the console if your function does not exist.

If your webapp is huge with a lot of interaction and JS, too many try catch can change the global performance of your application.

Answer 4

I would try something like this with a wrapper that will handle a catch attempt for you (see below or this jsfiddle: http://jsfiddle.net/TVfCj/2/ )

By the way I (not and not quite) process this and the arguments, I assume that I start with js. But I hope you get this idea, and it is right / useful.

  var wrapper = { wrap: function wrap(f) { return function (args) { try { f.apply(null, args); } catch (ex){ console.log(f.name+" crashed with args "+args); }; }; } }; var f1 = function f1Crashes(arg) { return window.thisDoesntExist(); }; var f2 = function f2Crashes(arg) { return window.thisDoesntExist(); }; var f3 = function f3MustNotCrash(arg) { wrapper.wrap(f1)(arg); wrapper.wrap(f2)(arg); } f3('myarg'); 

Answer 5

The try - catch sample that you specify in your question is the right way - you want to try - catch block, not a way to silently load through module errors (in general, always be extremely careful when handling exceptions all over the world and continue in this way these are data corruption errors that you will only find after 6 months).

Your real problem is this:

... in fact, these functions often add several other event handlers, which in turn will require try / catch. I get very repeating code filled with try / catch blocks.

The fix for this is Promise . This is a new structure built into most browsers, but easily mixed into slow browsers (ah, IE), which gives you a standard way to control both an event callback and an exception from an event.

With Promise your code promises to always do something: allow / delete or reject / fail.

 function moduleA() { return new Promise(function (resolve, reject) { try{ var result = window.thisDoesntExist(); resolve(resolve); // Success! } catch(err){ reject(err); // Fail! } }); } 

This is better because instead of try - catch blocks instead of catch sockets in each callback, you can instead chain promises:

 moduleA(). then(moduleB). then(moduleC). catch(errorHandler); // Catch any error from A, B, or C 

You can also handle the error and continue:

 moduleA(). catch(continuableErrorHandler). // Catch any error from A then(moduleB). then(moduleC). catch(errorHandler); // Catch any error from B or C 

You still need a lot of try - catch blocks in callbacks, but everything wrapped in Promise can be handled in the same modular way.

Next in JS are async and await , but you can use them now with the transpiler. They use promises to make code that is much easier to read, and most importantly, there is one try for you - a catch at the top that collects exceptions from the Promise chain.

This answer is already too long, but I wrote about it in more detail .

TL DR: If your problem is “very repeating [callback] code filled with try / catch blocks”, try using Promise instead.