An Easy Javascript Error Logger using Google Analytics

Because there’s so many different browsers and configurations out there it’s much harder to write Javascript that works flawlessly everywhere compared to for example server-side code, and you already probably log server-side exceptions.

Graphing the amount of errors happening

There are many services out there that allow you to log client-side exceptions, but naturally none of them are free once you go beyond the basic offering. Luckily Google Analytics is still free, and we can easily feed it our errors as events. Bonus: sweet graphs!

How To

We’re going to create a Google Analytics Event every time an exception happens. Creating these events is easy if you already have Google Analytics installed. We’ll just push an array containing ‘_trackEvent’, and the category, action and optionally a label, onto the _gaq (Google Analytics Queue) object:

_gaq.push(['_trackEvent', category, action, label])

To catch the exceptions, we’ll use the window.onerror event handler, which gives us the file, line-number and actual exception message. Together that looks like this:

window.onerror = function(message, file, line) {
  _gaq.push(['_trackEvent', "Global", "Exception", file + "(" + line + "): " + message])
}

And we’re done! Easy.

Script Error

Once you start logging your errors, you might notice a lot of “Script error” happening without any file or line number. This is the standard exception message given when a Javascript file from a different domain raises an error. Because these exceptions might leak information across domains the message is sanitized to the standard “Script error”, hiding the real error message, file and line-number that makes logging errors so useful.

If you’re using a different domain to serve your script files, for example because of a CDN, this makes tracking exceptions almost useless. To fix it we tell the browser that the javascript files are allowed to be accessed by our website, by setting the HTTP header Allow-Access-Control-Origin in the http-server that serves the javascript files to either a wildcard (*) or our main domain (example.com). Check out this handy site Enable Cors to find out how.

We also need to add the crossorigin-attribute to the script-tag that loads the external javascript:

<script src="assets1.domain.tld/main.js" crossorigin="anonymous"></script>;

You might still notice Script Errors happening. That’s probably because you’re loading libraries from other sources as well, such as Facebook, New Relic, or Adsense. They might not have the CORS set, or the browser might not support it, so in that case there’s nothing more we can do.