How to Integrate Opbeat Into an Angular 2 App

Opbeat is a paid service for select performance monitoring and reporting runtime errors in Javascript applications. While they do support an Angular 1 integration, Angular 2 will not be supported until its API stabilizes (ref).

Until that magical day occurs, a hard coded solution is available (as shown below).

import {
  ExceptionHandler,
  Injectable
} from '@angular/core';

// cant import the source  directly using webpack, so we have to
// include the built source file on the page to expose _opbeat
// on the window
declare let _opbeat;

// Firefox tracking protection will block the opbeat script from loading,
// so sub it out
if (!(<any>window)._opbeat) {
  (<any>window)._opbeat = function noop() { };
}

/**
 * maintain default error logging BUT also send errors off to opbeat
 */
@Injectable()
export class OpBeatErrorHandler extends ExceptionHandler {
  private static opBeatStarted = false;
  call(error, stackTrace = null, reason = null) {
    if (!OpBeatErrorHandler.opBeatStarted) {
      startOpbeat();
      OpBeatErrorHandler.opBeatStarted = true;
    }
    sendErrorToOpbeat(error);
    console.error('ERROR', error);
    if (stackTrace) {
      console.error('STACK TRACE', stackTrace);
    }
    if (reason) {
      console.error('REASON', stackTrace);
    }
  }
}

@NgModule({
  providers: [
    { provide: ExceptionHandler, useClass: OpBeatErrorHandler }
  ]
})
export class OpBeatErrorHandlerModule { }

/**
 * internal helper functions
 */

function startOpbeat() {
  _opbeat('config', {
    orgId: 'your orgId',
    appId: 'your appId'
  });
}

function sendErrorToOpbeat(e) {
  _opbeat('captureException', e);
}

now all that remains, is to add OpBeatErrorHandlerModule to the imports of the main module.

Update 1 ( sept 12 2016 )

Since RC 6, ExceptionHandler was renamed to ErrorHandler