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