AngularJS front-end error logging with Google Analytics

AngularJS is the most popular programming language of the web. With this growing Javascript libraries every day, developers are demonstrating that almost everything is possible inside browsers. In this tutorial, we’ll walk you through the process of setting up AngularJS error logging in Google Analytics.

There are a couple of reasons why client-side errors have become more and more important to log than ever before,

  • When a website is rolled out to the world, if any error occurs to the customers, it is hard to reproduce the same scenario for the developers without knowing anything about it. In such scenarios, think if we have information like the details of the error, the browser/device used, browser version, etc., it will be much easier, isn’t it?

For achieving this , lets split up our goal,

  •  To catch all exceptions and errors in AngularJs, including HTTP calls.
  •  Intro about Google Analytics and choosing the tracking type
  •  Integrated Google Analytics in Angular JS Codebase

To catch all errors and exceptions in Angular JS :

Generic way to catch all exceptions

For capturing all errors in angular js, we can use decorator , which provides a consistent way to handle uncaught exceptions in AngularJS exceptions, which also gives an advantage to keep the default behavior and extend it.

Generic way to catch all HTTP errors

For capturing all HTTP respond errors in Angular JS , we have $http interceptors. AngularJS interceptors offer a convenient way to modify request/response made by the $http service both before/after they are sent and after they return.

We are going to use “responseError”  method for capturing all failed http methods. This object is then registered as an interceptor with the $httpProvider in a config() block.

$httpProvider.interceptors.push('RequestsErrorHandler');

Introduction to Google Analytics and choosing the tracking type:

Google Analytics is a popular freemium web analytics service provided by Google. It has the capability of tracking website, like page tracking, event tracking, e-commerce tracking, user timing tracking and multiple other features. For capturing our error logs, we are going to use the event tracking feature of Google Analytics.

Event Tracking, any event from application front-end can be sent to google analytics This can been done through setting values for event tracking parameters.

Event Tracking Parameters:

  • Event Action
  • Event Label
  • Event Category
  • Event Value

We can make use of those event parameters, by customizing it  for error logging in google analytics.

Integrating Google analytics with Angular JScodebase:

  • Copy the analytics.js code from google analytics and paste it in angularjs codebase 
    • (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-91404655-1', 'auto');
// ga('send', 'pageview'); remove this default pageview code
  • Download Angulartics and the Angulartics plugin for GA.  Note: All plugins list Angulartics as a dependency, so they will be downloaded together. Install them using bower install command, 
    • bower install angulartics-google-analytics --save
  • Load the relevant files in your applications html
  • inject Angulartics and the angulartics.google.analytics plugin in the respective module 
    • angular.module('myApp', ['angulartics', 'angulartics.google.analytics']
  • Use this analytics provider in the exception handler, for sending events to google analytics

After running the code base, you could see the errors in console, those errors are reported into Google Analytics.

To view the events reported in Google Analytics , go to GA Dashboard-> RealTime Tracking

For further drill down, navigate to Dashboard –> Behaviour –> Events Overview

Here are some of the best practices listed for error logging,

  • Log Timestamp in every error log.
  • Log UserAgent.
  • Log the userId.

To Summarize, client-side logging is often overlooked, but it’s arguably just as important as logging server-side errors. However, there’s no doubt it’s more difficult to setup. There are plenty of options, however, a number of which we’ve looked at during the course of this article. Hope this article helps you to log AngularJS client-side AngularJS errors in Google Analytics.