遇到异常后应用程序变得无响应

Question

如何告诉 Angular 2 在遇到异常时不要阻塞整个应用程序？

我不确定这是否可能，因为 Google 并没有就此向我提供启发。 但它似乎对任何单页 Web 应用程序都至关重要。

每当 Angular 2 遇到异常并抛出错误时，整个应用程序就会变得无响应。

我知道在 JavaScript 中

try {
  doSomething();
}
catch(err) {
  handleErrors(err);
}

或许能解决问题。

但我只是想知道是否有任何 Angular 特定的解决方案或解决方法？

Answer 1

在 Angular 2 最终版本上，您可以实现自定义 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 2

更新：

2.0.0 RC.6将名称从ExceptionHandler更改为ErrorHandler和call更改为handleError：

@Injectable()
class MyErrorHandler implements ErrorHandler {

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


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

另见this。

原文：

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

另请参阅 this 和 this。

如果这允许应用程序在异常后继续，我还没有尝试过，但我认为值得一试。 至少应该可以自动重新加载页面。

一般情况下，当有恢复的方法时，应尽可能接近原因处理异常。

Answer 3

我尝试按照 @GünterZöchbauer

的指示实施自定义异常处理程序

这对我有用

---

使用 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})])

Answer 4

我认为当您使用 RxJS Observables 时可能会出现此问题，当它们遇到任何错误时会取消订阅。 如果您遇到这种情况，您可能需要：

1. 在.subscribe 的onNext 处理程序中使用try...catch 而不是在onError 处理程序中捕获异常。
2. 在.subscribe 的onError 处理程序中重新订阅。