Integrating with Angular

Angular exposes an ErrorHandler class that we can extend.

import { ErrorHandler, Injectable } from "@angular/core";
import { TrackJS } from "trackjs"

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

    handleError(error: any): void {
        // Add the error message to the telemetry timeline.
        // It can occasionally have useful additional context.
        console.warn(error);
        TrackJS.track(error.originalError || error);
    }
}

app/trackjs-error-handler.ts

Then, we need to tell Angular about the new error handler. When you specify an @NGModule you can list overrides for various providers.

import { ApplicationConfig, ErrorHandler } from '@angular/core';
import { provideRouter, withHashLocation } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';
import { TrackJsErrorHandler } from "./trackJs-error-handler";

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withHashLocation()),
    provideHttpClient(),
    {
      provide: ErrorHandler,
      useClass: TrackJsErrorHandler
    }
  ]
};

app/app.config.ts

TrackJS itself needs to be configured and installed. This should be done as early as possible during app initialization. We recommend doing it in your main.ts before bootstrapping the Angular application.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { TrackJS } from "trackjs";

TrackJS.install({
  token: "angular-example"
});

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

main.ts