Integrating with Angular

Angular exposes an ErrorHandler class that we can extend.

import { ErrorHandler, Injectable } from "@angular/core";
declare var TrackJS: any;

@Injectable()
export class TrackJsErrorHandler implements ErrorHandler {
    handleError(error:any) {
        // Add the error message to the telemetry timeline.
        // It can occasionally have useful additional context.
        console.warn(error.message);

        // Assumes we have already loaded and configured TrackJS*
        window.TrackJS && TrackJS.track(error.originalError || error);
    }
}

trackjs.handler.ts

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

@Injectable()
export class TrackJsErrorHandler implements ErrorHandler {
    handleError(error:any) {
        // Add the error message to the telemetry timeline.
        // It can occasionally have useful additional context.
        console.warn(error.message);

        // Assumes we have already loaded and configured TrackJS*
        TrackJS.track(error.originalError || error);
    }
}

trackjs.handler.ts

import { ErrorHandler, Injectable } from "@angular/core";
declare var trackJs: any;

@Injectable()
export class TrackJsErrorHandler implements ErrorHandler {
    handleError(error:any) {
        // Add the error message to the telemetry timeline.
        // It can occasionally have useful additional context.
        console.warn(error.message);

        // Assumes we have already loaded and configured TrackJS*
        window.trackJs && trackJs.track(error.originalError || error);
    }
}

trackjs.handler.ts

TIP You could conceivably configure and load TrackJS within the trackJs.handler.ts file, but you’ll miss any errors that occur before module initialization. Therefore we recommend loading TrackJS before module/application init, preferably as the first script on the page.

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

import { AppComponent }  from "./app.component";
import { ErrorHandler } from "@angular/core";
import { TrackJsErrorHandler } from "./trackJs.handler";

@NgModule({
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    // Tell Angular about our custom exception handler here
    providers: [{ provide: ErrorHandler, useClass: TrackJsErrorHandler }]
})
export class AppModule { }

app.module.ts