Application becomes unresponsive after encountering an exception

Question

How to tell Angular 2 to not block the whole application when it encounters an exception?

I\'m not sure if it\'s even possible, because Google didn\'t enlighten me o

Answer 1

I think the issue might occur when you're using RxJS Observables, which unsubscribe when they encounter any error. If that's the case for you, you might need to:

1. Catch the exception within the .subscribe's onNext handler with try...catch instead of inside onError handler.
2. Re-subscribe in .subscribe's onError handler.

Answer 2

UPDATE:

2.0.0 RC.6 changed the name from ExceptionHandler to ErrorHandler and call to handleError:

@Injectable()
class MyErrorHandler implements ErrorHandler {

  handleError(error) {
    // do something with the exception
  }
}


@NgModule({
  directives: [MyApp],
  providers: [
    {provide: ErrorHandler, useClass: MyErrorHandler}
  ]
})
export class AppModule {}

See also this.

ORIGINAL:

Implement a custom exception handler:

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


@NgModule({
  directives: [MyApp],
  providers: [
    {provide: ExceptionHandler, useClass: MyExceptionHandler}
  ]
})
export class AppModule {}

See also this and this.

I haven't tried myself if this allows the application to continue after an exception, but I think it's worth a try. At least reloading the page automatically should be possible.

Generally, an exception should be handled as close as possible to the cause when there is a way to recover.

Answer 3

On angular 2 final version, you can implement custom ErrorHandler (Angular 2 docs example):

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 {}

Answer 4

I tried to implement Custom Exception Handler as directed by @GünterZöchbauer

and this worked for me

---

Bootstrap your application with CustomExceptionHandler.

import {ExceptionHandler} from 'angular2/core';

class _ArrayLogger {
  res = [];

  log(s:any):void {
    this.res.push(s);
  }
  logError(s:any):void {
    this.res.push(s);
  }
  logGroup(s:any):void {
    this.res.push(s);
  }
  logGroupEnd() {
    if(this.res.length) {

      //this section executes if any error is logged by angular. 

      //do your stuff here

      /*e.g

        if(location.pathname !== 'dashboard') {
           window.location.href = '/dashboard'; // condition is required to prevent infinite loop
        }

        */
     }
  };
}

export class CustomExceptionHandler extends ExceptionHandler {
  constructor() {
    super(new _ArrayLogger(), true);
  }

  call(error, stackTrace = null, reason = null) {
    super.call(error, stackTrace, reason);
  }
}

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