jQuery method throw new Error - not catched by the outside try / catch block

error-handling, javascript, javascript-objects, jquery

Solution

In the first example, the `try/catch` protects the code that sets the event handler, not the body of the event handler itself. That code doesn't run until the event is triggered, at which point execution has long since left the `try` block.

Consider this equivalent example:

try {
    var foo = function() {
        throw new Error("foo error");
    }
}
catch (error) {
}

foo();

You wouldn't expect the error caused by calling `foo` to be caught just because at the time `foo` was defined execution was inside the `try` block.

One solution is of course to use `try/catch` inside the body of the function that might throw, as you have shown. Another solution is to create a reusable "catching wrapper" function, perhaps like this:

function catchIfException(func, handler) {
    return function() {
        try {
            var args = Array.prototype.slice.call(arguments);
            func.apply(this, args);
        }
        catch (error) {
            handler(error);
        }
    };
}


$(document).on('change', 'select', 
    catchIfException(
        function(event) {
            event.preventDefault();
            event.stopPropagation();

            throw new Error('callPage method failed');
        }, 
        function(error) {
            console.log("error: " + error);
        }
    );
);

Problem

I'm started adding error handling to my javascript objects, which very often use jQuery. The problem I have is that when I throw new Error from within jQuery method - it is not catched by the catch statement wrapping the jquery call - it simply throws the standard error, but does not log into the console as log message. Here's an example: ``` var MyNamespace = MyNamespace || {}; MyNamespace.Page = function() {}; MyNamespace.Page.prototype = { callPage : function() { "use strict"; $(document).on('change', 'select', function(event) { event.preventDefault(); event.stopPropagation(); throw new Error('callPage method failed'); }); }, init : function() { "use strict"; try { this.callPage(); } catch(errorMessage) { console.log('Error : ' + errorMessage); } } }; ``` When I wrap the content of the callback function with the try / catch - then it works: ``` $(document).on('change', 'select', function(event) { try { event.preventDefault(); event.stopPropagation(); throw new Error('callPage method failed'); } catch(errorMessage) { console.log('Error : ' + errorMessage); } }); ``` Any idea how to streamline this and why does it behave this way?

Original source