Error reporting from browser side applications can be tricky. Unlike backend systems, your code is running in an environment that you have very little control of, and as a result is much harder to manage. Regardless of how valuable your product is to potential customers, your frontend is their window into the quality and reliability of your product. An unresponsive page or broken button might seem like minor glitches, but to potential customers these issues can be show stoppers.

Why trust a company to serve a critical part of your user experience when their own user experience is broken?

Being notified of problems as they happen is the first step in finding and fixing problems that have slipped through into production.

Google Analytics based error tracking

We already had Google Analytics (GA) installed on our sites, so we first experimented with the built-in exception tracking. Integrating the code via JavaScript was easy, though viewing the data in the GA console required the creation of a new custom dashboard. The main downside of this approach is the limited information available, in particular the lack of a stack trace, making it difficult to track down and debug issues.

Only surface level information is available in GA.

Although it’s possible to generate alerts in GA, most of the data points don’t appear in real-time and so there is significant lag between an error occurring and an alert being sent.

GA exception tracking: not supported as first class citizen, can’t drill down into error or send custom data, not real-time.

Enter Stackdriver!

We already use Stackdriver to monitor and report on errors in our backend Kubernetes clusters, and have a full workflow designed to handle issues as they occur. Push notifications alert engineers to problems as they arise, setting off internal processes to track issues through to a resolution. With this process in place it made perfect sense to also include frontend issues.

The stackdriver-errors-js library was quick and painless to integrate. This library hooks into unhandled errors as they occur on the page. There are also methods that allow you to submit your own custom error events.

The main advantages were:

• Stack traces: the full call tree of functions that lead to the error, with source code links.
• Attach custom data to reports: user ID, last action, application version, etc.
• Real-time reporting: receive alerts within seconds of them occurring.

Stackdriver dashboard lays out errors in a clean and manageable way.

In conclusion using Stackdriver for our JavaScript error reporting has been a big win. Errors are no longer hidden in a Google Analytics report that never gets viewed. They are available in a dedicated dashboard front and centre as well as through real-time alerts via push notification, SMS, and Slack. These alerts allow us to get in touch with users immediately following the error to handle the situation, turning a loss into a win!

‍