Javascript Error Log

by Martin Parenteau

HTML

<div>
    Image 1:
    <input id="url1" type="text" value="http://unknown-url" />
    <button onclick="setImageUrl('img1', 'url1')">Set image URL</button>
    <img id="img1" />
</div>
<div>
    <button onclick="readUndefinedProperty()">Read undefined property</button>
    <button onclick="unknownFunction()">Call unknown function</button>
</div>
<div>
    <button onclick="outputErrorLog()">Output error log</button>
    <button onclick="clearErrorLog()">Clear errors</button>
</div>
<div id="output">
</div>

CSS

div {
    padding: 4px 0px;
}

#output {
    border: solid 1px black;
    min-height: 400px;
    overflow-y: auto;
}

pre {
    margin-top: -0.25em;
}

JavaScript

var errors = [];

window.onerror = function(msg, url, lineNo, columnNo, error) {
    let string = msg.toLowerCase();
    let substring = "script error";
    if (string.indexOf(substring) > -1) {
        console.log("Script Error: See Browser Console for Detail");
    } else {
        errors.push({
            message: msg,
            url: url,
            line: lineNo,
            column: columnNo,
            error: error
        });
    }
    return false;
};
window.document.addEventListener("error", function(event) {
    if (event.target && event.target.src) {
        let url = event.target.src;
        console.log("Resource not found -> " + url);
        errors.push({
            message: "Resource not found",
            url: url
        });
    } else {
        errors.push({
            message: "Unknown error",
            error: event
        });
    }
}, true);

function outputErrorLog() {
    let output = document.getElementById("output");
    output.innerHTML = "<pre><code>" + JSON.stringify(errors, null, "  ") + "</code></pre>";
}

function clearErrorLog() {
    errors.length = 0;
    let output = document.getElementById("output");
    output.innerHTML = "";
}

function readUndefinedProperty(value) {
    return novalue.noproperty;
}

function setImageUrl(imgID, txtID) {
    let img = document.getElementById(imgID);
    let txt = document.getElementById(txtID);
    img.src = txt.value;
}