Globally logging jQuery Errors (Event & DOM errors)

Question

Since systems these days are becoming more and more Javascript (jQuery, AJAX, etc) oriented, we've been trying to get more and more Error logging happening for any of these things.

My concern is that within jQuery itself, when normal DOM manipulation / jQuery events are created or executed, window.onerror is unable to catch these, and this might help make debugging bugs in production faster, by having them logged on a server

In this article from 2008 (.onerror & jQuery bind try/catch{}), they add a try/catch {} to the jQuery.bind() event and even the document.ready event. Now that everything goes through the .on() event this article is a bit dated, but I feel like logic could still work...

Has anyone tried implementing such a jQuery overwrite (try/catch system) into their own Projects?

Basically I want to continue using jQuery from the CDN, and just within one of our JS files - extend/override the .on() / $(document).ready() / etc events with these changes.

jQuery.fn.extend({ // <-- can this be extended / overwritten ?
    on: function(etc etc) {
        // same code just add the additional
        try {
            // try to execute the original .on()
        }
        catch (ex) {
            // log any errors / info (where/why/etc)
        }
    }
});

// or even some sort of try/catch for $(document).ready()?

The other typical error logging formats: (of course logging browser/OS/QueryString/etc too)

window.onerror = function (msg, url, line) {
    // Log General Javascript Errors
    // this won't log jQuery internal errors
};

$.ajaxSetup({ // Log AJAX Errors
    error: function (jqXHR, ajaxSettings, thrownError) { }
});

Mark Pieszak - Trilon.io · Accepted Answer · 2012-11-07 00:05:17Z

3

We report JavaScript errors to the server in window.onerror and jQuery ajax errors, without overriding jQuery and it works well. If you want to override a jQuery function, you can do:

$.fn.oldOn = $.fn.on;
$.fn.on = function(a,b,c,d,e,f) {
    try {
        $(this).oldOn(a,b,c,d,e,f);
    }
    catch (ex) { ... }
};

edited Nov 7, 2012 at 0:05

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

answered Nov 6, 2012 at 20:52

Craig Celeste

12.7k10 gold badges45 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mark Pieszak - Trilon.io Over a year ago

Oh great, so you've done try/catch within jQuery events/code? I guess my biggest question was if it's possible to override .on() for instance, adding the try/catch, without actually having to edit the jQuery file itself.

Craig Celeste Over a year ago

I was probably unclear, sorry. We used error handlers such as you suggest without overriding the try/catch and found it worked well. But you can override it if you want. I'll update the answer.

Mark Pieszak - Trilon.io Over a year ago

Fantastic! Didn't even think to set it up like this. Kudos Parched, good looking out. Feel like I got 99% of everything covered now with this addition

Mark Pieszak - Trilon.io Over a year ago

Oh and strange, but check out this fiddle. I can see it entering the try/catch etc, but the actual event alert isn't appearing when it's clicked! jsfiddle.net/qbPXP/1

Craig Celeste Over a year ago

Whoops, dumb bug. $(this).oldOn(...), not $.oldOn(...). You need $(this) to set up the 'this' for the new function. jsfiddle.net/Y5Jcu/1

|

Collectives™ on Stack Overflow

Globally logging jQuery Errors (Event & DOM errors)

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related