前端日志收集（monitor-report v1）

为什么

为什么自己封装而不是使用三方 类似 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
Historystring 'Hash' | 'History'路由模式logtrueboolean是否打印日志
isReport
falseboolean是否上报数据
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 
})

字段默认值类型可选值作用urlsrring错误上报后端地址

behaviorOptions （行为上报）

import monitorReport from 'monitor-report'
monitorReport({
  behaviorOptions: {
    url: "http://127.0.0.1:8888/monitor/behavior/report",
  },
  mode: "History",
  log: true 
})

字段默认值类型可选值作用urlsrring操作上报后端地址

PvUvOption（pvuv 上报）

import monitorReport from 'monitor-report'
monitorReport({
  PvUvOptions: {
    url: "http://127.0.0.1:8888/monitor/puvu/report",
  },
  mode: "History",
  log: true 
})

字段默认值类型可选值作用urlsrringpu，vu上报后端地址

上报内容

公共数据

属性说明默认值备注host上报设备 主机hostname上报设备 主机名port上报设备 端口protocol上报设备协议requestURL上报设备请求地址

错误上报

属性说明默认值备注message错误信息name错误名称rank错误分类

"001" （ 普通）|"002" (一般) |"003" (严重 )|"101" 内部错误

101：internalError 001： resourcError, asyncError 002: promisError 003: requestErrortype错误类型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类型onclicktext操作按钮名称这个有时候获取不到， 因为我这边只去了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上报 参数同上

如有问题欢迎大家指出来。谢谢

好了，大概就这样有新的动心我再补充