Creating A Custom ErrorHandler In Angular 2 RC 6

// In order to get the TypeScript compiler to not complain about unknown variables,
// I'm declaring these various services as ambient values.
// --
// WARNING: I'm not so good at using TypeScript yet - I am sure there is a way to do
// this in some global declarations file; but, I don't know how to do that yet.
declare var newrelic: { noticeError( error: any ) : void; };
declare var Raygun: { send( error: any ) : void; }
declare var Rollbar: { error( error: any ) : void; }
declare var trackJs: { track( error: any ) : void; }

// Import the core angular services.
import { Http } from "@angular/http";
import { Injectable } from "@angular/core";
import { Response } from "@angular/http";

@Injectable()
export class ErrorLogService {

	private http: Http;


	// I initialize the service.
	constructor( http: Http ) {

		this.http = http;

	}


	// ---
	// PUBLIC METHODS.
	// ---


	// I log the given error to various aggregation and tracking services.
	public logError( error: any ) : void {

		// Internal tracking.
		this.sendToConsole( error );
		this.sendToServer( error );

		// Software-as-a-Service (SaaS) tracking.
		// --
		// NOTE: These are all here as an example - you wouldn't actually be using all
		// of these in the same application.
		this.sendToNewRelic( error );
		this.sendToRaygun( error );
		this.sendToRollbar( error );
		this.sendToTrackJs( error );

	}


	// ---
	// PRIVATE METHODS.
	// ---


	// I send the error the browser console (safely, if it exists).
	private sendToConsole(error: any): void {

		if ( console && console.group && console.error ) {

			console.group( "Error Log Service" );
			console.error( error );
			console.error( error.message );
			console.error( error.stack );
			console.groupEnd();

		}

	}


	// I send the error to the NewRelic error logging service.
	private sendToNewRelic( error: any ) : void {

		// Read more: https://docs.newrelic.com/docs/browser/new-relic-browser/browser-agent-apis/report-data-events-browser-agent-api
		newrelic.noticeError( error );

	}


	// I send the error to the Raygun error logging service.
	private sendToRaygun( error: any ) : void {

		// Read more: https://raygun.com/raygun-providers/javascript
		Raygun.send( error );

	}


	// I send the error to the Rollbar error logging service.
	private sendToRollbar( error: any ) : void {

		// Read more: https://rollbar.com/docs/notifier/rollbar.js/api/
		Rollbar.error( error );

	}


	// I send the error to the server-side error tracking end-point.
	private sendToServer( error: any ) : void {

		this.http
			.post(
				"./error-logging-endpoint", // Doesn't really exist in demo.
				{
					type: error.name,
					message: error.message,
					stack: error.stack,
					location: window.location.href
				}
			)
			.subscribe(
				( httpResponse: Response ) : void => {

					// ... nothing to do here.

				},
				( httpError: any ) : void => {

					// NOTE: We know this will fail in the demo since there is no
					// ability to accept POST requests on GitHub pages.
					// --
					// console.log( "Http error:", httpError );

				}
			)
		;

	}


	// I send the error to the Track.js error logging service.
	private sendToTrackJs( error: any ) : void {

		// Read more: http://docs.trackjs.com/tracker/framework-integrations#angular
		trackJs.track( error );

	}

}

// Import the core angular services.
import { ErrorHandler } from "@angular/core";
import { forwardRef } from "@angular/core";
import { Inject } from "@angular/core";
import { Injectable } from "@angular/core";

// Import the application components and services.
import { ErrorLogService } from "./error-log.service";

export interface LoggingErrorHandlerOptions {
	rethrowError: boolean;
	unwrapError: boolean;
}

export var LOGGING_ERROR_HANDLER_OPTIONS: LoggingErrorHandlerOptions = {
	rethrowError: false,
	unwrapError: false
};


@Injectable()
export class LoggingErrorHandler implements ErrorHandler {

	private errorLogService: ErrorLogService;
	private options: LoggingErrorHandlerOptions;


	// I initialize the service.
	// --
	// CAUTION: The core implementation of the ErrorHandler class accepts a boolean
	// parameter, `rethrowError`; however, this is not part of the interface for the
	// class. In our version, we are supporting that same concept; but, we are doing it
	// through an Options object (which is being defaulted in the providers).
	constructor(
		errorLogService: ErrorLogService,
		@Inject( LOGGING_ERROR_HANDLER_OPTIONS ) options: LoggingErrorHandlerOptions
		) {

		this.errorLogService = errorLogService;
		this.options = options;

	}


	// ---
	// PUBLIC METHODS.
	// ---


	// I handle the given error.
	public handleError( error: any ) : void {

		// Log to the console.
		try {

			console.group( "ErrorHandler" );
			console.error( error.message );
			console.error( error.stack );
			console.groupEnd();

		} catch ( handlingError ) {

			console.group( "ErrorHandler" );
			console.warn( "Error when trying to output error." );
			console.error( handlingError );
			console.groupEnd();

		}

		// Send to the error-logging service.
		try {

			this.options.unwrapError
				? this.errorLogService.logError( this.findOriginalError( error ) )
				: this.errorLogService.logError( error )
			;

		} catch ( loggingError ) {

			console.group( "ErrorHandler" );
			console.warn( "Error when trying to log error to", this.errorLogService );
			console.error( loggingError );
			console.groupEnd();

		}

		if ( this.options.rethrowError ) {

			throw( error );

		}

	}


	// ---
	// PRIVATE METHODS.
	// ---


	// I attempt to find the underlying error in the given Wrapped error.
	private findOriginalError( error: any ) : any {

		while ( error && error.originalError ) {

			error = error.originalError;

		}

		return( error );

	}

}


// I am the collection of providers used for this service at the module level.
// Notice that we are overriding the CORE ErrorHandler with our own class definition.
// --
// CAUTION: These are at the BOTTOM of the file so that we don't have to worry about
// creating futureRef() and hoisting behavior.
export var LOGGING_ERROR_HANDLER_PROVIDERS = [
	{
		provide: LOGGING_ERROR_HANDLER_OPTIONS,
		useValue: LOGGING_ERROR_HANDLER_OPTIONS
	},
	{
		provide: ErrorHandler,
		useClass: LoggingErrorHandler
	}
];

// Import the core angular services.
import { BrowserModule } from "@angular/platform-browser";
import { HttpModule } from "@angular/http";
import { NgModule } from "@angular/core";

// Import the application components and services.
import { AppComponent } from "./app.component";
import { ErrorLogService } from "./error-log.service";
import { LOGGING_ERROR_HANDLER_PROVIDERS } from "./logging-error-handler";
import { LOGGING_ERROR_HANDLER_OPTIONS } from "./logging-error-handler";

@NgModule({
	bootstrap: [ AppComponent ],
	imports: [
		BrowserModule,
		HttpModule
	],
	declarations: [ AppComponent ],
	providers: [
		ErrorLogService,

		// CAUTION: This providers collection overrides the CORE ErrorHandler with our
		// custom version of the service that logs errors to the ErrorLogService.
		LOGGING_ERROR_HANDLER_PROVIDERS,

		// OPTIONAL: By default, our custom LoggingErrorHandler has behavior around
		// rethrowing and / or unwrapping errors. In order to facilitate dependency-
		// injection instead of resorting to the use of a Factory for instantiation,
		// these options can be overridden in the providers collection.
		{
			provide: LOGGING_ERROR_HANDLER_OPTIONS,
			useValue: {
				rethrowError: false,
				unwrapError: false
			}
		}
	]
})
export class AppModule {
	// ... nothing to do here.
}

// NOTE: I'm just declaring the non-existing function so that TypeScript doesn't
// yell at me.
declare var promoteSynergy: any;

// Import the core angular services.
import { Component } from "@angular/core";

@Component({
	selector: "my-app",
	template:
	`
		<p>
			<a (click)="trigger()">Trigger an Error</a>, like a boss.
		</p>
	`
})
export class AppComponent {

	// I initialize the component.
	constructor() {

	}


	// ---
	// PUBLIC METHODS.
	// ---


	// I trigger an error (to test the custom ErrorHandler).
	public trigger() : void {

		// CAUTION: This method does NOT exist.
		promoteSynergy();

	}

}