Handling javascript errors as always been sort of a problem for me. Testing every combination possible in a big application is hard, and there is always a chance you will miss something.

Of course, we should always strive to make an application as bug free as possible, but users seems to always find a way to break it. You can always expect them to do something you never have think of, and this is one of the reason I created this plugin.

When a javascript error is detected, this plugin will do an ajax request to your server and then sends an email, of course you could also log it in a database. It’s certainly not a revolutionary idea, but still, I was finding the idea cool enough to add it to my list of online plugin.

It’s also very useful for debugging big live applications that you have not written. In which case you want to know if some users hit javascript errors already.

Download the source code

Integration

Load the plugin just after the jQuery library

      $(document).jsErrorHandler();

Your done.

Options

By default the plugin automatically fetch the domain and add it to the email subject, but you can overwrite it.
You can also define a from attribute, I would highly recommend that you change the from setting in the plugin file (jquery.onerror.js) if your going to use this plugin on multiple websites.

     $(document).jsErrorHandler({
        from: "support@youremail.com",
        website: document.domain
     });

The Email

The email received will look like this:

A javascript error has been detected on www.position-absolute.com

Error: variable is not defined
Url: http://www.position-absolute.com/creation/onerror/
Line: 21
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0

Limitation

The plugin works on:
Firefox 3.6+
Chrome Latest
IE 7+

It does not work on Safari (but it will not break your application)

Share this article: Facebook Twitter

23 thoughts on “Handling javascript errors on production websites”

  1. Hey Cedric, I haven’t looked at your code (yet), but can you sum up what you’re doing? I built something like this about a year ago (it just logged the errors using an image beacon). Here’s the jist of it (hope code doesn’t get stripped here).

    I basically used window.onerror but according to info I found at quirksmode at the time, Safari, Chrome, Opera and Konqueror (didn’t really care about the last two) don’t support that JS event.

    //http://www.quirksmode.org/dom/events/index.html
    //Safari, Chrome, Opera and Konqueror do not support this event on JavaScript errors 🙁
    window.onerror = function(message, url, line) {
    var loggerUrl = ‘http://www.mydomain.com/javascript_error_logger.php’,
    date = datetime = new Date(),
    date = date.toLocaleDateString() + ‘ @ ‘,
    datetime = datetime.toLocaleTimeString(),
    parameters = ‘?description=’ + encodeURIComponent(message) //error message
    + ‘&url=’ + encodeURIComponent(url) //error url (could be an external script)
    + ‘&line=’ + encodeURIComponent(line) //error line
    + “&parent_url=” + encodeURIComponent(location.href) //url error occurred on
    + ‘&time=’ + encodeURIComponent(date + datetime) //time error happened
    + ‘&user_agent=’ + encodeURIComponent(navigator.userAgent); //user environment info

    //send error to server to be logged
    new Image().src = loggerUrl + parameters;
    //console.log(loggerUrl + parameters);
    };

  2. Same as you,

    Chrome now support it,

    Not safari, and well, I don’t test opera and Konqueror

  4. Hi,
    Very nice plugin I really like the idea…
    I made a little post about it and I was thinking that it could be very useful to give informations in the mail of the browser that encounter the error…

    Thanks for the work
    Johan

  7. I don’t think it’s necessary to make this a jQuery plugin – I think it’d be more reusable if it was just plain JavaScript 🙂

  8. I agree Daniel,

    But as far as I am concern its cleaner with jQuery than adding the cross browser ajax stack,

    But I like the Cancel Bubble beacon idea, which would then be as cleaner, might change it soon.

  9. I was going to release my code on Github, I’ve just never spent the time to figure Github out – it doesn’t seem that intuitive to me (a non-CS guy). If anyone knows a good screencast walkthrough of getting set up, I’d love to check that out.

    I have a PHP script which logs the data as well, but you could obviously use any server-side language as you’re just parsing the query string from the image beacon.

    The goal of what I built is to be pro-active in JavaScript errors on your site. Check the logged data table every Monday am or whatever, it tells you what, when, where and who, so you go check it out with some info to reproduce and hopefully fix.

    The data table shows counts of errors as well so you get a dropdown with all the different errors (which you can filter on) and their count so you have an idea where the big problems are. Basically gives you a pseudo priority list.

    It was well received internally (at work).

  15. I agree Daniel,

    But as far as I am concern its cleaner with jQuery than adding the cross browser ajax stack,

    But I like the Cancel Bubble beacon idea, which would then be as cleaner, might change it soon.

  19. Wow, wonderful weblog structure! How lengthy have you ever been blogging for? you make blogging look easy. The overall glance of your website is wonderful, let alone the content!

  20. You might find it interesting that we’re developing a SaaS for this. It installs like google analytics. http://muscula.com we’ve found that logging the errors is only a small part of having a good js error log, also grouping the errors is a hard problem to solve, because of all the browser differences, and we’ve also had to put a lot of work into filtering away all the noise, like errors from browser plugins.

    We do more than onerror logging, But onerror logging is better than nothing 🙂

  23. Our http://jslogger.com can take care of the frontend errors. It supports the most popular browsers and mobile devices.
    You can track exceptions from the backend with the JSLogger NodeJS library.
    Worth to give it a try.

Comments are closed.