前言

通用前端监控工具,arms寓意为武器。

阿里arms的api未能自动上报前端js错误，不带js错误分析集成(自行解析错误堆栈)，不能自动上传souceMap，需要对接上传和解析

本工具定义为前端监控工具包，目的为多项目公用和后续可扩展为多个错误收集源等。功能包括:

1. 捕获拦截【全局错误自定义追踪】
2. 功能扩展【open api封装扩展】
3. 错误自定义上报【区分环境版本，错误堆栈解析和主动上报】
4. 分析对接【sourceMap自动上传和分析接入】

特性

1. 前端js错误捕获追踪自动上报（全局错误拦截）
2. 堆栈解析上报（借助error-stack-parser）
3. sourceMap自动上传（配合@xccjh/rt-cli或@xccjh/rt-core）

目前错误上报源只有阿里arms

安装

$ yarn add @xccjh/arms

配置arms默认实例

创建一个管理类做单例管理

// @/utils/alife.js
import store from '@/store'
import envProcess from '@/utils/env'
import { AliArmsManager } from '@xccjh/arms'
import packageJson from '/package.json'

export class AliArms {
  static #getAliArms
  static initAliArms() {
    this.#getAliArms = new AliArmsManager({
      uid: store.getters?.curUser?.uid,
      pid: 'xxxx', // 👈 这是应用pid
      appType: 'web',
      imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
      sendResource: true,
      enableLinkTrace: true,
      behavior: true,
      useFmp: true,
      enableSPA: true,
      release: packageJson.version,
      environment: {
        sit: 'local',
        test: 'daily',
        prod: 'prod',
        gray: 'gray'
      }[envProcess.env.ENV_CONFIG]
    })
    return this.#getAliArms
  }
  static getAliArms() {
    return this.#getAliArms ?? this.initAliArms()
  }
  static errReport(err) {
    AliArms.getAliArms().errReport(err)
  }
}

初始化全局错误监听

// @/main.js
import { AliArms } from '@/utils/alife'

AliArms.initAliArms() // 👈 全局js错误自动上报

在框架全局错误钩子或抛错处自行上报

// @/errorLog.js
import { AliArms } from '@/utils/alife'

Vue.config.errorHandler = function(err, vm, info, a) {
  AliArms.errReport(err) // 👈 手动上报
}

后续

新增api链路追踪对接