前端日志上报SDK
npm install log-reportingpnpm run build, 之后会在根目录dist文件下看到打包的对应的文件信息; 根据不同平台引入即可;
js
`
在vue中使用,
pnpm install log-reporting 安装依赖
在main.js中引入
`js
import {logReporting} from 'log-reporting'
logReporting.init({
// 上报地址
dsn: 'http://localhost:8888/postLog',
// 是否开启调试, 控制台会打印出日志信息
debug: true,
// 上报方式:fetch sendBeacon
logMethod: 'fetch',
// 配置参数
config: {
// 是否开启录制, 可以录制报错前20s的视频
isRecord: true,
// 录制的时间(20s), 最大不能超过1分钟
recordTime: 20 * 1000,
// 页面准备好,是否就立即监听
watchReady: true,
// 监听js
watchJsError: true,
// 监听资源报错
watchSource: true,
// 监听请求报错
watchAxios: true,
}
})
`
根据自己的业务需要开启对应的配置信息;
---
注意:
1. 日志上报的方式有俩种: fetch 和 sendBeacon;
2. 如果要开启屏幕录制功能那么就不能使用sendBeacon,如果您使用sendBeacon去上报, 那么在复杂的项目目前它是上传不了的, 因为会把录制的元素信息也会上传;这里使用了开源rrweb
3. 要想使用录制视频上传, 那么请使用fetch方式进行上传
4. 视频录制的信息使用lz-string进行压缩加密, 如果您使用的情况, 请在服务端或者客户端对该数据进行解压解密;压缩可查阅代码/src/lib/send.ts 13行左右, 解压代码可查阅/example/index.html 110-118行左右
5. 如果您想要体验效果:那么可以在/example目录下进行pnpm install,之后执行app.js,之后在/example/index.html 点击按钮模拟报错报错,等上报成功之后可以点击播放按钮预览录制的视频`