How to override method on Window in ES2015

Question

I'm trying to rewrite an vanilla ES5 closure to a ES2015 Class. The code overrides the window.onerror function and acts as a global error handler method for logging purposes.

My old code looks like this. I would like to know how to rewrite it in ES2015. How do i override the Window.onerror?

    (function() {

        window.onerror = function(errorMessage, url, line) {
            try {
                if (typeof(url) === "undefined") {
                    url = "";
                }
                if (typeof(line) === "undefined") {
                    line = "";
                }

                // Avoid error message being too long...
                if (errorMessage.length > 300) {
                    errorMessage = errorMessage.slice(0,300) + "...";
                }

                errorMessage = errorMessage.replace(/&/g, "%26").replace(/ /g, "+");
                url = url;
                line = line;
                var parentUrl = encodeURIComponent(document.location.href);

                // Set error details
                var parameters = "error_message=" + errorMessage +
                                 "&url=" + url +
                                 "&line=" + line +
                                 "&parent_url=" + parentUrl;

                // Set path to log target
                var logUrl = "xxx";

                // Set error details as image parameters
                new Image().src = logUrl + '?' + parameters;
            } catch (e) {}
        };

    }());

EDIT! Now I'm trying to rewrite it in a JS Class. So I guess I have to extend the Window class or something like that (I have a Java background). But Window is not a class as I understand. This is what I have so far.

So I need help to override the window.onerror function, written in ES2015!

export const Logging = new class {

    constructor() {
        // todo
    }

    onerror(errorMessage, url, line) {
        try {
            if (typeof(url) === "undefined") {
                url = "";
            }
            if (typeof(line) === "undefined") {
                line = "";
            }

            // truncate error message if necessary
            if (errorMessage.length > 300) {
                errorMessage = errorMessage.slice(0,300) + "...";
            }

            // URI encoding
            errorMessage = errorMessage.replace(/&/g, "%26").replace(/ /g, "+");
            url = url;
            line = line;
            var parentUrl = encodeURIComponent(document.location.href);

            // set error details
            var parameters = "error_message=" + errorMessage +
                "&url=" + url +
                "&line=" + line +
                "&parent_url=" + parentUrl;

            // Set path to log target
            var logUrl = "xxx";

            // set error details as image parameters
            var img = new Image().src = logUrl + '?' + parameters;

            console.log(img);
        }
        catch (e) {}
    }

}

/* ------------------------------------------------------------------------------------------------------------ */

export default Logging;

ES2015 doesn't have very much to do with browser functionality like the `onerror` callback. What exactly is the problem with your code as it is now? What doesn't work? — Pointy, Oct 13 '15 at 14:06
How to assign a new value to a property hasn't changed in ES2015. You still to `obj.property = newValue;`. Not everything has changed with ES2015. 90% didn't change. — Felix Kling, Oct 13 '15 at 14:12
Please see my EDIT! I added my current code. How can I override the Window.onerror method in a JS2015 class? — olefrank, Oct 14 '15 at 06:54

score 2 · Answer 1 · answered Oct 13 '15 at 14:20

The only thing that might be useful here are parameter default values. Everything else that I changed was mistaken in ES5 already.

window.onerror = function(errorMessage, url="", line="") {
    try {
        // Avoid error message being too long...
        if (errorMessage.length > 303) {
            errorMessage = errorMessage.slice(0,300) + "...";
        }
        var parentUrl = document.location.href;

        // Set error details
        var parameters = "error_message=" + encodeURIComponent(errorMessage).replace(/%20/g, "+") +
                         "&url=" + encodeURIComponent(url) +
                         "&line=" + encodeURIComponent(line) +
                         "&parent_url=" + encodeURIComponent(parentUrl);

        // Set path to log target
        var logUrl = "xxx";

        // Set error details as image parameters
        new Image().src = logUrl + '?' + parameters;
    } catch (e) {}
};

@rd5: Because the OP did as well, I didn't change that. If I had to guess, it's supposed to prevent exceptions in the global error handling code to trigger itself ad infinitum. Might be worth a comment in the empty catch block of course. — Bergi, Feb 06 '16 at 17:19

How to override method on Window in ES2015

1 Answers1