How To

JavaScript Error Handling

JSNLog makes it very easy to log JavaScript errors to your server side log:

When using a try-catch block to handle errors explicitly, as described here.
When using window.onerror and window.onunhandledrejection to handle JavaScript errors, as described on this page.

window.onerror

The window.onerror handler lets you handle any JavaScript errors that haven't been caught elsewhere in your code. The JavaScript interpreter will pass your handler an error message, the url of the file where the javascript exception happened, and the line number. On more modern browsers, you get the column number and exception as well.

JSNLog sets a handler for uncaught JavaScript errors

When it loads, the jsnlog.js library checks if window.onerror has been set. If it isn't, it sets a handler that logs uncaught JavaScript errors to your server side log:

// Code included in jsnlog.js to set a handler that logs uncaught JavaScript errors to 
// the server side log.

if (window && !window.onerror) {
    window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
        JL("onerrorLogger").fatalException({
            "msg": "Uncaught Exception",
            "errorMsg": errorMsg, "url": url,
            "line number": lineNumber, "column": column
        }, errorObj);

        return false;
    }
}

Looking at this code, you'll see that the browser is supposed to pass 5 parameters to the onerror handler. Unfortunately, not all browsers pass in all parameters.

If there is an uncaught JavaScript error on a browser that doesn't support all 5 parameters, the missing parameters are left undefined. In that case, JSNLog will simply only send the parameters that it did get. This way, when more browsers start supporting the full set of parameters, you will get all the available information.

You'll also notice that this code returns false. This tells the browser to do its own error handling in addition to the handler - so it will write a message to the console, etc. Returning true would have told the browser that the error has been completedly handled and it doesn't need to do anything.

How to set your own handler for uncaught JavaScript errors

To override JSNLog's handler, simply set window.onerror to your own handler.

If your code runs before jsnlog.js loads, jsnlog.js will see that window.onerror has already been set and leave it alone. If your code runs after jsnlog.js loads, your code will overwrite window.onerror.

How to prevent logging of uncaught JavaScript errors

If you do not want to log uncaught JavaScript errors at all, set window.onerror to a method that does nothing:

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
    return false;
}

window.onunhandledrejection

A working demo is in project JSNLogDemo_Log4Net_UnhandledRejection

If you use promises, you may have found that exceptions thrown inside promises tend to not be caught by window.onerror. Take for example:

function testPromiseExceptionHandling() {
    // Return a new promise.
    return new Promise(function (resolve, reject) {
        var timeoutExpired = function () {
            resolve("timeout expired");
        };

        throw "Exception thrown in promise";
        setTimeout(timeoutExpired, 5);
    });
}

// Note: no rejection handler given. If one had been given, it would have been called to deal with the exception.
testPromiseExceptionHandling().then(function (response) {
    console.log("Success!", response);
});

Here an exception is thrown inside the promise. If there had been a rejection handler passed to the then method, that rejection handler would have been called in response to the exception. However, there is no rejection handler and window.onerror won't catch this uncaught exception.

To deal with this situation, JSNLog sets a window.onunhandledrejection handler in addition to the window.onerror handler. You'll notice it uses the exact same pattern as for window.onerror, making it easy to use your own handler if you want to:

// Code included in jsnlog.js to set a handler that logs uncaught JavaScript exceptions inside promises
// where no rejection method is provided.

if (typeof window !== 'undefined' && !window.onunhandledrejection) {
    window.onunhandledrejection = function (event) {
        JL("onerrorLogger").fatalException({
            "msg": "unhandledrejection",
            "errorMsg": event.reason ? event.reason.message : null
        }, event.reason);

        return false;
    };
}