前端日志收集

项目结构介绍

.
├── core
│   ├── CustomXMLHttpRequest.ts // 重写XMLHttpRequest 监听页面接口请求
│   ├── ajax.ts // 上报日志服务器
│   ├── clickEvent.ts // 处理点击事件
│   ├── collect.ts   // 收集基类
│   ├── collectError.ts // 收集前端错误信息
│   ├── customEvent.ts  // 自定义事件
│   ├── noninvasiveFirstScreen.ts // 获取页面加载性能
│   ├── report.ts // 上报信息
│   └── urlChange.ts // 监听url变化上次信息
├── main.ts // 主文件
└── types.ts // 类型文件

安装方法

npm install collect-front-logger -S

使用方法

import CollectErrors from 'collect-front-logger';

const co = new CollectErrors({
  appId: 'appid', // 必填
  reportUri: '', // 必填：  默认：
  reportToDecrypt: false // 选填是否需要加密
});

参数

| 参数 | 解释 | 是否必填 | 默认值 | ---- | ---- | ---- | ---- | | appId | 每个项目的标识 | true | -- | | reportUri | 需要上传到哪个接口里 | false | 接口 | | reportToDecrypt | 是否需要加密 | false | true | | ignoreApi | 需要过滤的api | false | 需要写正则 | | reportEncrypt | 需要加密的公钥 | false | -- |

ignoreApi 过滤正则示例： /api/collect|api.ipify.org/g

内置hook

clickEventHook: ((target: IError, e: any) => IError | undefined) | undefined
collectErrorHook: ((target: IError, e: any) => IError | undefined) | undefined
customXMLHttpRequestHook: ((target: IError, e: any) => IError | undefined) | undefined
noninvasiveFirstScreenHook: ((target: IError, e: any) => IError | undefined) | undefined
urlChangeHook: ((target: IError, e: any) => IError | undefined) | undefined

自定义订阅

on(key: string, backCall: () => IError){
    this.customEvent.addSubscribe(key, backCall)
  }
emit(key: string, params: Object) {
  this.customEvent.run(key, params)
}