front-behavior-logger

前端日志收集

项目结构介绍

.
├── 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)
}