关于前端:Angular-如何处理未可知异常错误

写在后面

代码写得再好，始终都无奈残缺的解决所有可能产生异样，特地是生产环境中的利用，很大一部分是数据来自用户、近程，很难保障所有数据都按程序规定的产生。事实上，除非测试人员发现或者客户报告，否则都无奈得悉。因而，将利用产生的未可知异样进而上报是十分重要的环节。

Angular 默认状况下也提供了全局的异样治理，当产生异样时，会把它扔到 Console 管制台上。如果你在应用 NG-ZORRO 时，可能常常就会遇到 ICON 未加载的异样音讯，这也是异样音讯的一种：

core.js:5980 ERROR Error: [@ant-design/icons-angular]:the icon setting-o does not exist or is not registered.
    at IconNotFoundError (ant-design-icons-angular.js:94)
    at MapSubscriber.project (ant-design-icons-angular.js:222)
    at MapSubscriber._next (map.js:29)
    at MapSubscriber.next (Subscriber.js:49)
    at RefCountSubscriber._next (Subscriber.js:72)
    at RefCountSubscriber.next (Subscriber.js:49)
    at Subject.next (Subject.js:39)
    at ConnectableSubscriber._next (Subscriber.js:72)
    at ConnectableSubscriber.next (Subscriber.js:49)
    at CatchSubscriber.notifyNext (innerSubscribe.js:42)

而 Angular 是通过 ErrorHandler 对立治理异样音讯，而且只须要笼罩其中的 handleError 办法并重新处理异样音讯即可。

ErrorHandler

首先创立一个 custom-error-handler.ts 文件：

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

@Injectable()
export class CustomErrorHandler extends ErrorHandler {handleError(error: any): void {super.handleError(error);
  }
}

CustomErrorHandler 能够残缺的获取以后用户数据、以后异样音讯对象等，并容许通过 HttpClient 上报给后端。

以下是 NG-ALAIN 的文档站，因为是应用 Google Analytics 来剖析，只须要将异样音讯转给 onerror 即可：

import {DOCUMENT} from '@angular/common';
import {ErrorHandler, Inject, Injectable} from '@angular/core';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {constructor(@Inject(DOCUMENT) private doc: any) {super();
  }

  handleError(error: any): void {
    try {super.handleError(error);
    } catch (e) {this.reportError(e);
    }
    this.reportError(error);
  }

  private reportError(error: string | Error): void {
    const win = this.doc.defaultView as any;
    if (win && win.onerror) {if (typeof error === 'string') {win.onerror(error);
      } else {win.onerror(error.message, undefined, undefined, undefined, error);
      }
    }
  }
}

最初，在 AppModule 模块内注册 CustomErrorHandler：

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

论断

事实上还有一项十分重要的工作，生产环境中都是打包压缩过后的，换言之所产生的异样音讯也是无奈与理论代码行数雷同的数字，这就须要 SourceMap 的反对，当然失常的生产环境是不会公布这份文件的，所以如果想要失去正确的行列数，还是须要借助一层中间层，在后端利用 source-map 模块来解析出真正的行列数值。

Angular 的依赖注入（DI）零碎能够使咱们疾速替换一些 Angular 内置模块，从而实现在不批改业务层面时疾速解决一些非凡需要。

（完）