前端日志收集（monitor-report v1）
鲤小圈 2024-08-08 14:03:01 阅读 54
为什么
为什么自己封装而不是使用三方 类似 Sentry 这种比较全面的
因为 Sentry 很大我没安装成功，所有才自己去封装的
为什么使用 可以帮助你简单解决前端收集错误日志、收集当前页面访问量，网站日活跃，页面访问次数，用户行为分析等
介绍
自己开发的一个插件，并且用持续性维护下去（目前支持原生html， 以及react, vue 等前端框架）
主要解决前端生产痛点的
痛点1： 前端报错后，开发人员无法收集到错误
痛点2：前端收集当前页面访问量，网站日活跃，页面访问次数，用户行为分析等
注 ： 我很贴心提供一套完整的体系， 插件+后端（nodejs） github 地址，麻烦大家点点小星星
源码地址 v1.0.1 初始化版本
后端源码地址-使用nodejs 编写。默认mysql
使用
安装
<code>npm i monitor-report / yarn add monitor-report
原生html（目前没有csdn）
<script src="../../dist/monitor.report.iife.min.js"></script>code>
<script>
monitorReport({
errorOptions: {
url: "http://127.0.0.1:8888/monitor/error/report"
},
mode: "History",
log: true,//
isReport: true
})
</script>
框架中使用
例如vue3( react 也是在跟目录引入即可)
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import monitorReport from 'monitor-report'
monitorReport({
errorOptions: {
url: "http://127.0.0.1:8888/monitor/error/report"
},
mode: "History",
log: true,//
isReport: true
})
const app = createApp(App)
app.use(router)
app.mount('#app')
成功标识
失败
基础使用
基本配置
<code>import monitorReport from 'monitor-report'
monitorReport({
mode: "History",
log: true
})
| 字段 | 默认值 | 类型 | 可选值 | 作用 |
| mode
| History | string | 'Hash' | 'History' | 路由模式 |
| log | true | boolean | 是否打印日志 | |
| isReport
| false | boolean | 是否上报数据 | |
| errorOptions
| {} | ErrorOptions | false
| 错误配置 | |
| behaviorOptions
| {} | BehaviorOptions | false | 操作配置 | |
| pvUvOptions
| {} | PvUvOptions | false
| PV UV 配置
| |
| customFields | {} | object | 自定义配置，可以加参数上传给后端 |
errorOptions （错误上报）
<code>import monitorReport from 'monitor-report'
monitorReport({
errorOptions: {
url: "http://127.0.0.1:8888/monitor/error/report",
},
mode: "History",
log: true
})
| 字段 | 默认值 | 类型 | 可选值 | 作用 |
| url | srring | 错误上报后端地址 |
behaviorOptions （行为上报）
<code>import monitorReport from 'monitor-report'
monitorReport({
behaviorOptions: {
url: "http://127.0.0.1:8888/monitor/behavior/report",
},
mode: "History",
log: true
})
| 字段 | 默认值 | 类型 | 可选值 | 作用 |
| url | srring | 操作上报后端地址 |
PvUvOption（pvuv 上报）
<code>import monitorReport from 'monitor-report'
monitorReport({
PvUvOptions: {
url: "http://127.0.0.1:8888/monitor/puvu/report",
},
mode: "History",
log: true
})
| 字段 | 默认值 | 类型 | 可选值 | 作用 |
| url | srring | pu，vu上报后端地址 |
上报内容
公共数据
| 属性 | 说明 | 默认值 | 备注 |
|---|---|---|---|
| host | 上报设备 主机 | ||
| hostname | 上报设备 主机名 | ||
| port | 上报设备 端口 | ||
| protocol | 上报设备协议 | ||
| requestURL | 上报设备请求地址 |
错误上报
| 属性 | 说明 | 默认值 | 备注 |
|---|---|---|---|
| message | 错误信息 | ||
| name | 错误名称 | ||
| rank | 错误分类 | <code>"001" （ 普通）|"002" (一般) |"003" (严重 )|"101" 内部错误 101：internalError 001： resourcError, asyncError 002: promisError 003: requestError | |
| type | 错误类型 | internalError（内部异常）| resourcError（资源错误） | promisError（promise 的错误） | requestError （请求错误） | asyncError（普通错误） | |
| url | 错误地址 | 错误地址根据类型来看， 如果是 async, promise 错误 就是当前页面地址， 若 resourcError 和 requestError 则是错误地址 |
实例
import monitorReport from 'monitor-report'
monitorReport({
errorOptions: {
url: "http://127.0.0.1:8888/monitor/error/report",
},
mode: "History",
log: true
})
操作上报
| 属性 | 说明 | 默认值 | 备注 |
|---|---|---|---|
| tag | 操作标签地址 | ||
| name | 名字 | ||
| type | 类型 | onclick | |
| text | 操作按钮名称 | 这个有时候获取不到， 因为我这边只去了button的操作名称，当然你也可以给标签加个自定义属性 data-info 最后这个值最后就给text |
注：
提供了两个自定义标签属性 no-use（不触发上报） 、data-info（上报的数据）
实例
import monitorReport from 'monitor-report'
monitorReport({
behaviorOptions: {
url: "http://127.0.0.1:8888/monitor/error/report",
},
mode: "History",
log: true
})
pv uv 上报
| 属性 | 说明 | 默认值 | 备注 |
|---|---|---|---|
| stayTime | 停留时长 | ||
| currentPath | 当前页面 | ||
| prePath | 从哪来 | ||
| type | 跳转类型 | 'pushState' | 'replaceState' | 'load' | 'unload' | 'popstate' |
实例
import monitorReport from 'monitor-report'
monitorReport({
pvUvOptions: {
url: "http://127.0.0.1:8888/monitor/error/report",
},
mode: "History",
log: true
})
自定义上报
实例
import monitorReport from 'monitor-report'
const {errorReporting, behaviorReporting,pvUvReporting }= monitorReport({
pvUvOptions: {
url: "http://127.0.0.1:8888/monitor/error/report",
},
mode: "History",
log: true
})
errorReporting： 错误上报， 参数同上
behaviorReporting： 操作上报 参数同上
pvUvReporting： pvuv上报 参数同上
如有问题欢迎大家指出来。谢谢
好了，大概就这样有新的动心我再补充
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。