Angular处理未可知异常错误的方法详解
写在前面
代码写得再好，始终都无法完整的处理所有可能产生异常，特别是生产环境中的应用，很大一部分是数据来自用户、远程，很难保证所有数据都按程序规定的产生。事实上，除非测试人员发现或者客户报告，否则都无法得知。因此，将应用产生的未可知异常进而上报是非常重要的环节。
Angular默认情况下也提供了全局的异常管理，当发生异常时，会把它扔到Console控制台上。如果你在使用 NG-ZORRO时，可能经常就会遇到ICON未加载的异常消息，这也是异常消息的一种：
core.js:5980ERRORError:[@ant-design/icons-angular]:theiconsetting-odoesnotexistorisnotregistered. atIconNotFoundError(ant-design-icons-angular.js:94) atMapSubscriber.project(ant-design-icons-angular.js:222) atMapSubscriber._next(map.js:29) atMapSubscriber.next(Subscriber.js:49) atRefCountSubscriber._next(Subscriber.js:72) atRefCountSubscriber.next(Subscriber.js:49) atSubject.next(Subject.js:39) atConnectableSubscriber._next(Subscriber.js:72) atConnectableSubscriber.next(Subscriber.js:49) atCatchSubscriber.notifyNext(innerSubscribe.js:42)
而Angular是通过 ErrorHandler统一管理异常消息，而且只需要覆盖其中的 handleError方法并重新处理异常消息即可。
ErrorHandler
首先创建一个 custom-error-handler.ts文件：
import{ErrorHandler,Injectable}from'@angular/core';
@Injectable()
exportclassCustomErrorHandlerextendsErrorHandler{
handleError(error:any):void{
super.handleError(error);
}
}
CustomErrorHandler可以完整的获取当前用户数据、当前异常消息对象等，并允许通过 HttpClient上报给后端。
以下是 NG-ALAIN的文档站，由于是使用GoogleAnalytics来分析，只需要将异常消息转给 onerror即可：
import{DOCUMENT}from'@angular/common';
import{ErrorHandler,Inject,Injectable}from'@angular/core';
@Injectable()
exportclassCustomErrorHandlerextendsErrorHandler{
constructor(@Inject(DOCUMENT)privatedoc:any){
super();
}
handleError(error:any):void{
try{
super.handleError(error);
}catch(e){
this.reportError(e);
}
this.reportError(error);
}
privatereportError(error:string|Error):void{
constwin=this.doc.defaultViewasany;
if(win&&win.onerror){
if(typeoferror==='string'){
win.onerror(error);
}else{
win.onerror(error.message,undefined,undefined,undefined,error);
}
}
}
}
最后，在 AppModule模块内注册 CustomErrorHandler：
@NgModule({
providers:[
{provide:ErrorHandler,useClass:CustomErrorHandler},
]
})
exportclassAppModule{}
结论
事实上还有一项非常重要的工作，生产环境中都是打包压缩过后的，换言之所产生的异常消息也是无法与实际代码行数相同的数字，这就需要SourceMap的支持，当然正常的生产环境是不会发布这份文件的，所以如果想要得到正确的行列数，还是需要借助一层中间层，在后端利用 source-map模块来解析出真正的行列数值。
Angular的依赖注入（DI）系统可以使我们快速替换一些Angular内置模块，从而实现在不修改业务层面时快速解决一些特殊需求。
总结
到此这篇关于Angular如何处理未可知异常错误的文章就介绍到这了,更多相关Angular处理未可知异常错误内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！