前端日志收集（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	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上报 参数同上

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

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