Send exceptions to Analytics for tracking errors like in angular.io

Author: devversion

src/app/app-module.ts

@@ -1,16 +1,17 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {NgModule} from '@angular/core';
+import {ErrorHandler, NgModule} from '@angular/core';
 import {LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {RouterModule} from '@angular/router';
 
 import {MaterialDocsApp} from './material-docs-app';
 import {MATERIAL_DOCS_ROUTES} from './routes';
 import {NavBarModule} from './shared/navbar';
 import {CookiePopupModule} from './shared/cookie-popup/cookie-popup-module';
+import {AnalyticsErrorReportHandler} from './shared/analytics/error-report-handler';
 
-const prefersReducedMotion = typeof matchMedia === 'function' ?
-  matchMedia('(prefers-reduced-motion)').matches : false;
+const prefersReducedMotion =
+  typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion)').matches : false;
 
 @NgModule({
   imports: [
@@ -19,13 +20,16 @@ const prefersReducedMotion = typeof matchMedia === 'function' ?
     RouterModule.forRoot(MATERIAL_DOCS_ROUTES, {
       scrollPositionRestoration: 'enabled',
       anchorScrolling: 'enabled',
-      relativeLinkResolution: 'corrected'
+      relativeLinkResolution: 'corrected',
     }),
     NavBarModule,
     CookiePopupModule,
   ],
   declarations: [MaterialDocsApp],
-  providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],
+  providers: [
+    {provide: LocationStrategy, useClass: PathLocationStrategy},
+    {provide: ErrorHandler, useClass: AnalyticsErrorReportHandler},
+  ],
   bootstrap: [MaterialDocsApp],
 })
 export class AppModule {}

src/app/shared/analytics/analytics.ts

@@ -1,6 +1,7 @@
 import {Injectable} from '@angular/core';
 
 import {environment} from '../../../environments/environment';
+import {formatErrorEventForAnalytics} from './format-error';
 
 /** Extension of `Window` with potential Google Analytics fields. */
 declare global {
@@ -28,12 +29,22 @@ export class AnalyticsService {
 
   constructor() {
     this._installGlobalSiteTag();
+    this._installWindowErrorHandler();
 
     // TODO: Remove this when we fully switch to Google Analytics 4+.
     this._legacyGa('create', environment.legacyUniversalAnalyticsMaterialId, 'auto', 'mat');
     this._legacyGa('create', environment.legacyUniversalAnalyticsMainId, 'auto', 'ng');
   }
 
+  reportError(description: string, fatal = true) {
+    // Limit descriptions to maximum of 150 characters.
+    // See: https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#exd.
+    description = description.substring(0, 150);
+
+    this._legacyGa('send', 'exception', {exDescription: description, exFatal: fatal});
+    this._gtag('event', 'exception', {description: description, fatal});
+  }
+
   locationChanged(url: string) {
     this._sendPage(url);
   }
@@ -56,6 +67,12 @@ export class AnalyticsService {
     }
   }
 
+  private _gtag(...args: any[]) {
+    if (window.gtag) {
+      window.gtag(...args);
+    }
+  }
+
   private _installGlobalSiteTag() {
     const url =
       `https://www.googletagmanager.com/gtag/js?id=${environment.googleAnalyticsMaterialId}`;
@@ -85,4 +102,10 @@ export class AnalyticsService {
     el.src = url;
     window.document.head.appendChild(el);
   }
+
+  private _installWindowErrorHandler() {
+    window.addEventListener('error', event =>
+      this.reportError(formatErrorEventForAnalytics(event), true)
+    );
+  }
 }

src/app/shared/analytics/error-report-handler.ts

@@ -0,0 +1,21 @@
+import {ErrorHandler, Injectable} from '@angular/core';
+import {AnalyticsService} from './analytics';
+import {formatErrorForAnalytics} from './format-error';
+
+@Injectable()
+export class AnalyticsErrorReportHandler extends ErrorHandler {
+  constructor(private _analytics: AnalyticsService) {
+    super();
+  }
+
+  handleError(error: any): void {
+    super.handleError(error);
+
+    // Report the error in Google Analytics.
+    if (error instanceof Error) {
+      this._analytics.reportError(formatErrorForAnalytics(error));
+    } else {
+      this._analytics.reportError(error.toString());
+    }
+  }
+}

src/app/shared/analytics/format-error.ts

@@ -0,0 +1,42 @@
+/**
+ * Formats an `ErrorEvent` to a human-readable string that can
+ * be sent to Google Analytics.
+ */
+export function formatErrorEventForAnalytics(event: ErrorEvent): string {
+  const {message, filename, colno, lineno, error} = event;
+
+  if (error instanceof Error) {
+    return formatErrorForAnalytics(error);
+  }
+
+  return `${stripErrorMessagePrefix(message)}\n${filename}:${lineno || '?'}:${colno || '?'}`;
+}
+
+/**
+ * Formats an `Error` to a human-readable string that can be sent
+ * to Google Analytics.
+ */
+export function formatErrorForAnalytics(error: Error): string {
+  let stack = '<no-stack>';
+
+  if (error.stack) {
+    stack = stripErrorMessagePrefix(error.stack)
+      // strip the message from the stack trace, if present
+      .replace(error.message + '\n', '')
+      // strip leading spaces
+      .replace(/^ +/gm, '')
+      // strip all leading "at " for each frame
+      .replace(/^at /gm, '')
+      // replace long urls with just the last segment: `filename:line:column`
+      .replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm, '@$1\n')
+      // replace "eval code" in Edge
+      .replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm, '@???$1\n');
+  }
+
+  return `${error.message}\n${stack}`;
+}
+
+/** Strips the error message prefix from a message or stack trace. */
+function stripErrorMessagePrefix(input: string): string {
+  return input.replace(/^(Uncaught )?Error: /, '');
+}