Making JavaScript fail-fast

// This code make JavaScript fail-fast in developement and during smoke test.
// Very useful to catch sneaky errors, and work hand-in-hand with fail-fast code
// by making it much more "in your face".

// Fail-fast if an unhandled exception occur in JavaScript. This use a a very old API, and it
//doesn't work with addEventListener, so we must go old school.
window.onerror = function (message, file, line, column, error) {
    // Chrome and Safari will give us a stack trace! But other browsers will not :(
    var stackTrace = error && error.stack;

    showError(message, stackTrace);
};

// Fail-fast if an external resource (tested with image) fail to load. Loading error event
// don't bubble up the DOM, but we can catch them with a "capturing" listener
// (the "true" argument at the end)
document.addEventListener('error', function (event) {
    // This has been created to test img element, but maybe we could do a || event.srcElement.href
    // to catch error in stylesheet too (if that work). It may catch script errors also (not tested)
    // Interestingly, the src property give us an absolute URL as resolved by the browser. Doing
    // event.srcElement.getAttribute('src') give us the textual value of the attribute
    var failedUrl = event.srcElement.src;

    // We capture the HTML of the parent node to find the misbehaving element more easily
    var context = event.srcElement.parentNode.outerHTML;

    showError("Failed to load resource at url: " + failedUrl, context);
}, true);

// In production, we would probably log the error instead
function showError(message, stackTrace) {

    // The rest of the function will destroy the DOM, and that can cause
    // subsequent error for asynchronous operation. So we only display the initial error.
    // We could probably move this global to a variable scoped in a function
    if (window.isDisplayingError) {
        return;
    }

    // We use jQuery to manipulate the DOM more easily, but a portable solution could use the DOM
    // API directly. We style the element directly so that it display correctly even when the CSS
    // doesn't load
    $(document.body).html(
        '<h1 style="color: red; padding: 20px 40px; margin 0">The application crashed</h1>' +
        '<p style="padding:5px 40px;"><strong>' + message + '</strong></p>');

    if (stackTrace) {
        var stackContainer = $('<pre style="padding:20px 20px; margin: 0 40px"></pre>');
        $(document.body).append(stackContainer);
        stackContainer.text(stackTrace);

    }

    // If you are like anyone, you will want to press backward, because the error look like an
    // error that happened while loading a new page. But its not, you must refresh,
    // not go back to the previous page!
    $(document.body).append(
        '<p style="padding:20px 40px;">' +
        '   <a href="javascript:location.reload();">Refresh the page to continue</a>' +
        '</p>');

    // Your page has crashed. Go back and fix your code!
    window.isDisplayingError = true;
}