ionic4-GlobalErrorHandler(全局异常捕捉与处理)

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

下一篇开始常用插件的使用。