node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0
前言
Angular2+使用TypeScript语言，经编译器转换后生成的代码基本无可读性，所以如果需要查看详细错误信息，还需要在打包时配置source-map
"prod": "ng build --aot=true --prod --source-map=true"
# 或者 angular.json
configurations -> production -> sourceMap : true
为什么需要捕捉全局异常？
在实际应用场景中，当程序发生错误时，我们需要第一时间知道，而不是由客户发现，这样就需要一个日志上报功能（其他日志不在本文讨论范围内）；那我们只需在全局捕捉到错误，然后将一些必要信息上传到后端，最后进行分析排查，解决问题。
如何捕捉？
定义GlobalErrorHandler类
import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';
import { NGXLogger } from 'ngx-logger';
import * as StackTrace from 'stacktrace-js';
/**
* 全局异常处理
*/
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
constructor(private injector: Injector) { }
handleError(error) {
const loggingService = this.injector.get(NGXLogger);
const location = this.injector.get(LocationStrategy);
const message = error.message ? error.message : error.toString();
const url = location instanceof PathLocationStrategy ? location.path() : '';
// get the stack trace, lets grab the last 10 stacks only
StackTrace.fromError(error).then(stackframes => {
const stackString = stackframes
.splice(0, 20)
.map(function(sf) {
return sf.toString();
}).join('\n');
console.log(stackString);
loggingService.error('error', {message: message, stack: stackString});
});
throw error;
}
}
第三方库：
- stacktrace-js 堆栈追踪
- ngx-logger 日志(支持发送到服务器)
第一步
实现ErrorHandler的handleError方法
第二步
堆栈追踪，利用stacktrace-js提供的StackTrace.fromError(error)方法进行堆栈信息追踪
第三步
发送错误日志，此处使用了ngx-logger
第四步
app.moudle.ts
{provide: ErrorHandler, useClass: GlobalErrorHandler}
测试
模拟错误
errorTest = [];
let a = this.errorTest[0]['name'];
结果
image.png
下一篇开始常用插件的使用。
