Handling javascript errors on production websites

by Cedric Dugas on March 30, 2011

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)



24 comments

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);
};

by cancel bubble on March 30, 2011 at 6:14 pm. Reply #

Same as you,

Chrome now support it,

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

by Cedric Dugas on March 30, 2011 at 7:26 pm. Reply #

Nice idea & hint! Thank you very much. I’ve just tweeted about it.

by Philipp Schaffner on March 31, 2011 at 4:35 am. Reply #

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

by Johan on March 31, 2011 at 5:35 am. Reply #

Ya Johan,

Adding the browser is a good idea, will add it today

by Cedric Dugas on March 31, 2011 at 8:45 am. Reply #

Nice idea, but you should at least use PHP function nl2br on every php variables you add to the email, because it is easily craftable to send spam written this way.

by David Boissonnault on March 31, 2011 at 9:39 am. Reply #

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 :)

by Daniel15 on April 1, 2011 at 2:05 am. Reply #

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.

by Cedric Dugas on April 1, 2011 at 6:34 am. Reply #

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).

by cancel bubble on April 1, 2011 at 11:34 am. Reply #

Here’s a screenshot: http://i.imgur.com/dSPKv.jpg

You can also filter errors by browser version as well as Macs. The dropdown shows counts of unique errors.

by cancel bubble on April 1, 2011 at 11:43 am. Reply #

Great article .Congratulations for this !

by Jocuri on April 6, 2011 at 11:19 am. Reply #

Useful tips. Thanks for sharing it with us.

by Web Element on June 2, 2011 at 5:22 am. Reply #

Thank you for sharing this information. The information was very helpful and saved a lot of my time.

by hollister uk on July 18, 2011 at 11:24 pm. Reply #

Thanks for the work..

by Tamer GÜL on August 17, 2011 at 8:42 pm. Reply #

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.

by audio on December 15, 2011 at 10:02 pm. Reply #

Usefull Tips =) Thanks!

by thinspiration on December 18, 2011 at 11:28 pm. Reply #

I am pretty new in programming so I think that reading such articles and try to implement what they are trying to learn will boost my skills.

by Danny Watson on February 27, 2012 at 7:33 am. Reply #

Coding always seems to me like too complicated. Thanks for proving me wrong.

by Robert Malone on February 29, 2012 at 8:22 am. Reply #

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!

by laptop reviews 2012 on March 5, 2012 at 10:12 am. Reply #

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 :-)

by Allan Ebdrup on April 8, 2012 at 2:29 pm. Reply #

These java script tips are really useful! Thanks

by Rabota on April 15, 2012 at 7:23 am. Reply #

Useful tips. Thank you very much

by otel sikayet on March 8, 2013 at 5:44 pm. Reply #

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.

by Dumitru Glavan on May 26, 2013 at 10:37 am. Reply #

Marketplace Rumor : women Described as Essential In recent times

by casio 腕時計 on February 17, 2014 at 11:48 pm. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.