Free JavaScript / AJAX Error Monitoring via Google Analytics

January 19, 2016

I tried Sentry. I wasn’t impressed. It caused an error on my AngularJS application which was efficient in proving that the error tracking worked. As for the error itself, the documentation/forum data was lacking for me to be able to fix it. I assume it could be version conflicts as the app I’m working on is still on Angular 1.2.x

Anyway, that is besides the point. The world renowned JavaScript Consultant – David Walsh had an awesome solution, which I adapted for my own use where I updated it to work with the newer version of Google Analytics, which is called analytics.js or Universal Analytics. It’s the latest version.

<script>
    window.addEventListener('error', function (e) {
        ga('send', 'exception', {
            exDescription: 'JavaScript Error ' + e.message + ' ' + e.filename + ': ' + e.lineno
        });
    });
    jQuery(document).ajaxError(function (e, request, settings) {
        ga('send', 'exception', {
            exDescription: 'Ajax Error ' + settings.url + ' ' + e.result
        });
    });
</script>

window.addEventListener('error', function (e) {

ga('send', 'exception', {

exDescription: 'JavaScript Error ' + e.message + ' ' + e.filename + ': ' + e.lineno

});

jQuery(document).ajaxError(function (e, request, settings) {

ga('send', 'exception', {

exDescription: 'Ajax Error ' + settings.url + ' ' + e.result

});

</script>

jQuery is used here to track AJAX errors from your frontend. It’s optional but highly recommended. I’m used to using the explicit jQuery instead of $.

The next part is to add a custom Dashboard to be able to actually see these errors. You can ‘import from gallery’ and search ‘exception’, or alternatively you should be able to get the dashboard here.

The end result

Errors are tracked in Google Analytics

By the way, the big error you see was caused by Sentry, and it’s a pretty standard AngularJS type error. Hopefully this is of some use to you!

Comments

Max
October 14, 2016 at 1:32 pm
Thank you very much for this post.

Adding the JS tracking code for the errors is easy – but finding that right report to display them is the hard part which your description makes very easy.

Brian
August 11, 2017 at 2:07 am
Hi. Is the jQuery ajax error tracking specific to jQuery implementation of XMLHttpRequest? Is there a vanilla js version.
How have you been finding this error tracking system btw. Any updates for us?