Custom Exception Handler in Angular2

Question

In angular2 the exceptions are logged in the console by default. I heard that we can inherit the Angular ExceptionHandler and create our own exception handler so that we can

Answer 1

It looks like you need to create your own class to handle exceptions, and then bind it in your app at bootstrap time, something like this:

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

class MyExceptionHandler implements ExceptionHandler {
    call(error, stackTrace = null, reason = null) {
       // do something with the exception
    }
 }

And then at bootstrap time, bind this new implementation as the ExceptionHandler:

bootstrap(MyApp, 
    [provide(ExceptionHandler, {useClass: MyExceptionHandler})])

See here for reference.

Plunker example

Answer 2

As of version 2.0.1, the current way of creating a custom error handler is the ErrorHandler interface found in @angular/core.

From the docs:

https://angular.io/docs/ts/latest/api/core/index/ErrorHandler-class.html

import { NgModule, ErrorHandler } from '@angular/core';

class MyErrorHandler implements ErrorHandler {
  handleError(error) {
    // do something with the exception
  }
}
@NgModule({
  providers: [{ provide: ErrorHandler, useClass: MyErrorHandler }]
})
class MyModule {}

When applying this on the root module, all children modules will receive the same error handler (unless they have another one specified in their provider list).

Answer 3

Here's an exception handler that works in alpha .46

import {ExceptionHandler} from 'angular2/angular2';

export class ERISExceptionHandler extends ExceptionHandler {

    call(error, stackTrace = null, reason = null) {
        alert('error:' + error + ' stackTrace: ' + stackTrace + ' reason: ' + reason);
    }
}