为什么
为什么自己封装而不是使用三方 类似 Sentry 这种比较全面的
因为 Sentry 很大我没安装成功，所有才自己去封装的
为什么使用 可以帮助你简单解决前端收集错误日志、收集当前页面访问量，网站日活跃，页面访问次数，用户行为分析等
介绍
自己开发的一个插件，并且用持续性维护下去（目前支持原生html， 以及react, vue 等前端框架）
主要解决前端生产痛点的
痛点1： 前端报错后，开发人员无法收集到错误
痛点2：前端收集当前页面访问量，网站日活跃，页面访问次数，用户行为分析等
注 ： 我很贴心提供一套完整的体系， 插件+后端（nodejs） github 地址，麻烦大家点点小星星
源码地址 v1.0.1 初始化版本
后端源码地址-使用nodejs 编写。默认mysql
使用
安装
npm i monitor-report / yarn add monitor-report原生html（目前没有csdn）
<script src="../../dist/monitor.report.iife.min.js"></script>
<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')
成功标识
失败
基础使用
基本配置
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 （错误上报）
import monitorReport from 'monitor-report'
monitorReport({errorOptions: {url: "http://127.0.0.1:8888/monitor/error/report",},mode: "History",log: true
})| 字段 | 默认值 | 类型 | 可选值 | 作用 |
| url | srring | 错误上报后端地址 |
behaviorOptions （行为上报）
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 上报）
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 | 错误分类 | "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上报 参数同上
如有问题欢迎大家指出来。谢谢
好了，大概就这样有新的动心我再补充
