test to see what we can do when we override addEventListener

override-addEventListener.html

<!-- 
======================================================================
Example trying to show hooking addEventListener to see if we can
capture error state for errors that occur in the handler.

Basically, we can capture that an error occurred, and get the
error message, and the event and object that was fired that
caused code to run that caused the error.  But no stack trace
or line information.

On my 4.2.x iPod Touch, e.stack is an empty string, on Chrome, it's
a nice stack trace.  Verified the iPod Touch behavior with weinre
======================================================================
-->

<script>

//--------------------------------------------------------------------
var button

override_addEventListener()

window.addEventListener("load", handlerLoad, false)

//--------------------------------------------------------------------
function handlerLoad() {
    button = document.getElementById("button")
    button.addEventListener("click", handlerClick, false)
}

//--------------------------------------------------------------------
function handlerClick() {
    console.log("button clicked on " + new Date())
    y = x + z
}

//--------------------------------------------------------------------
var original_Window_addEventListener
var original_Node_addEventListener

function override_addEventListener() {
    original_Window_addEventListener = window.addEventListener
    original_Node_addEventListener = Node.prototype.addEventListener
    
    window.addEventListener = function _window_addEventListener(event, listener, useCapture) {
        console.log("window.addEventListener(" + event + ")")
        
        if (typeof arguments[1] == "function") {
            arguments[1] = wrappedListener(event, arguments[1])
        }
        original_Window_addEventListener.apply(window, [].slice.call(arguments))
    }

    Node.prototype.addEventListener = function _Node_addEventListener(event, listener, useCapture) {
        console.log("Node.addEventListener(" + event + ")")
        
        if (typeof arguments[1] == "function") {
            arguments[1] = wrappedListener(event, arguments[1])
        }
        original_Node_addEventListener.apply(this, [].slice.call(arguments))
    }
}

//--------------------------------------------------------------------
function wrappedListener(event, listener) {
    return function _wrappedListener() {
        try {
            listener.apply(this, [].slice.call(arguments))
        }
        catch(e) {
            console.log("exception running event listener " + event + " for " + this + ": " + e)
            console.log("--- stack begin ---")
            console.log(e.stack)
            console.log("--- stack end ---")
            console.log("--- calc stack begin ---")
            console.log(getStackTrace())
            console.log("--- calc stack end ---")
        }
    }
}

//--------------------------------------------------------------------
function getStackTrace() {
    var result = []
    var visitedFuncs = []
    
    var func = arguments.callee.caller
    
    while (func) {
        var name = func.displayName || func.name || "<anonymous>"
        result.push(name + "()")

        if (-1 != visitedFuncs.indexOf(func)) {
            result.push("... recursion")
            break
        }
        
        visitedFuncs.push(func)
        
        func = func.caller
    }
    
    return result.join("\n")
}

</script>

<button id="button">click me</button>

Thank you sir. 12 years and this gist is still relevant and helpful