Ionic 自定义ErrorHandler

本人第一次翻译国外的文章，如有错误请多多指教

原文 PRODUCTION ERROR HANDLING IN IONIC

如何处理线上Errors且保证用户体验

没人喜欢经常crash或者停止工作的app。因此，解决errors、从errors中恢复使用是一项灰常重要的任务。我们万万不能认为代码写完就万事大吉了。

Ionic中未处理的Errors

ionic缺乏线上的errors处理。js code中一个未处理的异常或者promise rejection往往会使你的应用陷入未知状态(undefined state). 也许看起来没有任何问题，但是用户将会觉得app使用起来很怪异，有些错误会让人不明所以.

实现一个 ErrorHandler

实现Ionic/Angular 错误处理的最好方式是—实现你自己的 ErrorHandler类

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

export class MyErrorHandler implements ErrorHandler {
  constructor() {}

  handleError(error) {
    console.error(error);
  }
}

Angular 将会在异常抛出时自动调用 handleError 。

只需要简单的在启动时provide自定义ErrorHandler就可以将它与程序连接起来。也许你想在开发环境中保留 ionic自带的 ErrorHandler，在发布版本中切换成自定义ErrorHandler。那么可以用如下代码来实现：

const ERROR_HANDLER = environment.production ? MyErrorHandler : IonicErrorHandler;

@NgModule({
  // the rest of your module bootstrapping
  providers: [
    { provide: ErrorHandler, useClass: ERROR_HANDLER }
  ]
});

出现异常时我们需要做什么

具体的需求取决于你的项目，推荐一个好的方式就是弹出一个弹窗，表示对歉意，并请用户重新加载APP。

代码示例：

import { ErrorHandler, Inject } from '@angular/core';
import { AlertController } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';

export class MyErrorHandler implements ErrorHandler {
  constructor(
    @Inject(AlertController) private alerts: AlertController,
    @Inject(SplashScreen) public splashScreen: SplashScreen
  ) {}

  async handleError(error) {
    const alert = this.alerts.create({
      title: 'An Error Has Occurred',
      subTitle: 'Unfortunately, the app needs to be restarted',
      enableBackdropDismiss: false,
      buttons: [
        {
          text: 'Restart',
          handler: () => {
            this.splashScreen.show();
            window.location.reload();
          }
        }
      ]
    });
    alert.present();
  }
}

重载APP对用户是很不友好的，请记住，除了我们的常规错误处理，这是我们最后才会采取的手段。