Cla-web NPM | npm.io

CLA-WEB-SDK

CLA-WEB-SDK 为前端监控SDK，涵盖错误监控、CGI上报、性能监控。接入SDK简单配置即可完成自动上报，无侵入代码。

使用文档

功能点

获取cgi日志
获取错误日志
获取异常日志
获取console日志
hook常用的ajax库(重载XMLHttpRequest)
提供主动上报的接口（分级别info/debug/error）
为用户分配uuid（如果配合node sdk使用，由node sdk分配）
防止死循环造成的重复上报，做频率限制
大包体压缩，不能造成日志请求失败

发布指引

构建包npm run build
发布npm run release

使用方法

一、下载 cla-web-sdk

  npm install cla-web -s
  # 或者
  yarn add cla-web

二、引入SDK

内联引入（注意：务必在项目头部<head></head>引入）

可在 cla-web 包目录下找到 /lab/cla.min.js 然后自行复制即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CLA-WEB-SDK</title>
  <script src="/libs/cla.min.js"></script>
</head>
<body>

</body>
</html>

VUE项目中引入（注意：记得要先执行 npm install cla-sdk）
```
import Cla from 'cla-web'
```

三、实例化SDK

引入SDK后，需实例化SDK

注意：appname baseUrl 为必传参数，为空会导致初始化SDK失败，无法正常上报

const claIns = new Cla({
  appname: 'fca-wechat-help', // 项目名称
  baseUrl: '' // 上报地址，申请后邮件提供
})

三、查询数据

登陆kibana，查询对应的 appname 即可。

参数说明

名称	类型	必填	默认值	说明
appname	String	是	无	项目名称
baseUrl	String	是	无	上报地址
repeat	Number	否	5	相同错误最大重复次数
off	Boolean	否	true	是否开启 cgi 异常返回码上报
delay	Number	否	2000	上报延迟时间(ms)
sampling	Number	否	1	错误抽样率
timeout	Number	否	20000	ajax 请求最大延迟时间(ms)
performance	Boolean	否	false	是否自动上报页面性能加载数据
blacklist	Array	否	[]	cgi类上报地址黑名单列表

API

claIns 的实例方法实例化SDK后调用

自定义上报

claIns.report(customLog)
自定义上报 customLog 格式可以为 Error 对象或者自定义对象。

自定义对象建议格式如下：

const customLog = {
    msg: 'custom message',
    stack: 'custom report error',
    level: 'INFO'
}
// level： INFO/DEBUG/ERROR

手动上报性能数据

claIns.reportPerformance()
可配置开启自动上报性能数据，也可以在合适的时候手动上报。

其他

在VUE项目中接入SDK后若定义 Vue.config.errorHandler 方法，建议实例化SDK后调用。claIns.report()方法手动上报，SDK会自动解析报错信息并上报，若未定义无需额外配置。
```
  Vue.config.errorHandler = function (err, vm, info) {
    claIns.report(err)
  }
```
SDK支持通过url参数，获取用户uuid，便于查询特定用户的日志。
- 用户输入 http://a.com?cla=1 时，页面弹出提示框，显示用户uuid。

@everything-registry/sub-chunk-1331

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago