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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/331239.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

海外仓储管理系统:提升效率,标准化海外仓管理,科技赋能业务

海外仓作为跨境物流的关键一环&#xff0c;完全可以说海外仓的效率直接决定了后续物流的整体运作效率。 对于海外仓而言&#xff0c;一套高效&#xff0c;易用的海外仓储系统&#xff0c;无疑将成为提升企业竞争力的重要工具&#xff0c;帮助海外仓实现从野蛮生长到标准化管理…

pytorch-13_2 模型结构选择策略:层数、激活函数、神经元个数

一、拟合度概念 在所有的模型优化问题中&#xff0c;最基础的也是最核心的问题&#xff0c;就是关于模型拟合程度的探讨与优化。根据此前的讨论&#xff0c;模型如果能很好的捕捉总体规律&#xff0c;就能够有较好的未知数据的预测效果。但限制模型捕捉总体规律的原因主要有两点…

02_前端三大件HTML

文章目录 HTML用于网页结构搭建1. 标签2. 客户端服务器交互流程3. 专业词汇4. html语法细节5. 安装VSCODE安装插件6. Live Server插件使用7. 标题&段落&换行&列表8. 超链接标签使用9. 图片10. 表格的写法11. 表单标签*(重点)12. 下拉框13. 页面布局标签14. 块元素和…

java —— 封装、继承、接口和多态

一、封装 封装是将数据和操作这些数据的方法整合成一个类。在这个类中&#xff0c;用 private 修饰符将某些数据隐藏起来&#xff0c;只通过特定的方法实现这些数据的访问和修改&#xff0c;以此实现数据的完整和安全性。 封装的步骤&#xff1a; 二、继承 继承是指把子类共有…

韵搜坊 -- Elastic Stack快速入门

文章目录 现有问题Elastic Stack介绍&#xff08;一套技术栈&#xff09;安装ES安装KibanaElasticsearch概念倒排索引Mapping分词器IK分词器&#xff08;ES插件&#xff09;打分机制 ES的几种调用方式restful api调用&#xff08;http 请求&#xff09;kibana devtools客户端调…

Creating Server TCP listening socket *:6379: listen: Unknown error

错误&#xff1a; 解决方法&#xff1a; 在redis安装路径中打开cmd命令行窗口&#xff0c;输入 E:\Redis-x64-3.2.100>redis-server ./redis.windows.conf结果&#xff1a;

Jenkins 构建 Web 项目:构建服务器和部署服务器分离的情况

构建命令 #!/bin/bash node -v pnpm -v pnpm install pnpm build:prod # 将dist打包成dist.zip zip -r dist.zip dist

微软密谋超级AI大模型!LangChain带你轻松玩转大模型开发

此前&#xff0c;据相关媒体报道&#xff0c;微软正在研发一款名为MAI-1的最新AI大模型&#xff0c;其参数规模或将达5000亿以上&#xff0c;远超此前微软推出的相关开源模型&#xff0c;其性能或能与谷歌的Gemini 1.5、Anthropic的Claude 3和OpenAI的GPT-4等知名大模型相匹敌。…

Android 自定义图片进度条

用系统的Progressbar&#xff0c;设置图片drawable作为进度条会出现图片长度不好控制&#xff0c;容易被截断&#xff0c;或者变形的问题。而我有个需求&#xff0c;使用图片背景&#xff0c;和图片进度&#xff0c;而且在进度条头部有个闪光点效果。 如下图&#xff1a; 找了…

深入探索:移动云服务器的强大之处

文章目录 一 什么是移动云二 移动云服务器的使用三 移动云服务器的优点四 在移动云上部署node.js项目五 移动云服务器的应用场景六 移动云服务器的使用体验总结 一 什么是移动云 移动云是指用户可以通过移动设备访问云端的数据和应用&#xff0c;无需在本地设备上进行存储和处…

并发编程笔记7--并发编程基础

1、线程简介 1.1、什么是线程 现代操作系统中运行一个程序&#xff0c;会为他创建一个进程。而每一个进程中又可以创建许多个线程。现代操作系统中线程是最小的调度单元。 两者关系&#xff1a;一个线程只属于一个进程&#xff0c;而一个进程可以拥有多个线程。线程是一个轻量…

SQL面试题练习 —— 计算次日留存率

题目 现有用户登录记录表&#xff0c;已经按照用户日期进行去重处理。以用户登录的最早日期作为新增日期&#xff0c;请计算次日留存率是多少。 样例数据 ----------------------- | user_id | login_date | ----------------------- | aaa | 2023-12-01 | | bbb …

ATmega328P加硬件看门狗MAX824L看门狗

void Reversewdt(){ //硬件喂狗&#xff0c;11PIN接MAX824L芯片WDIif (digitalRead(11) HIGH) {digitalWrite(11, LOW); //低电平} else {digitalWrite(11, HIGH); //高电平 }loop增加喂狗调用 void loop() { …… Reversewdt();//喂狗 }

【活动】开源与闭源大模型:探索未来趋势的双轨道路

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 开源与闭源大模型&#xff1a;探索未来趋势的双轨道路引言一、开源大模型&#…

设计模式使用(成本扣除)

前言 名词解释 基础名词 订单金额&#xff1a;用户下单时支付的金额&#xff0c;这个最好理解 产品分成&#xff1a;也就是跟其他人合做以后我方能分到的金额&#xff0c;举个例子&#xff0c;比如用户订单金额是 100 块&#xff0c;我方的分成是 80%&#xff0c;那么也就是…

【cocos creator 】生成六边形地图

想要生成一个六边形组成的地图 完整代码示例 以下是完整的代码示例&#xff0c;包含了注释来解释每一步&#xff1a; cc.Class({extends: cc.Component,properties: {hexPrefab: {default: null,type: cc.Prefab},mapWidth: 10, // 网格的宽度&#xff08;六边形的数量&am…

探索微软Edge开发者工具:优化前端开发的艺术与科学

探索微软Edge开发者工具&#xff1a;优化前端开发的艺术与科学 引言&#xff1a;Edge开发者工具概览一、基础操作&#xff1a;步入DevTools的大门1.1 启动与界面布局1.2 快速导航与定制 二、元素审查与样式调整2.1 精准元素选取2.2 实时CSS编辑2.3 自动完成与内联文档 三、Java…

【Linux网络】端口及UDP协议

文章目录 1.再看四层2.端口号2.1引入linux端口号和进程pid的区别端口号是如何生成的传输层有了pid还设置端口号端口号划分 2.2问题2.3netstat 3.UDP协议3.0每学一个协议 都要讨论一下问题3.1UDP协议3.2谈udp/tcp实际上是在讨论什么&#xff1f; 1.再看四层 2.端口号 端口号(Po…

基于51单片机的数字频率计(电路图+pcb+论文+仿真+源码)

于51单片机的数字频率计 设计的频率计范围能够达到1HZ-1MHZ(实际上51单片机达不到这个范围&#xff0c;不要在实验环境下进行)&#xff0c;这个是课设来着&#xff0c;用Proteus仿真实现的&#xff0c;给有需要的同学参考一下 仿真原理图如下&#xff08;proteus仿真工程文件可…

基于移动多媒体信源与信道编码调研

前言 移动多媒体是指在移动通信环境下&#xff0c;通过无线网络传输的音频、视频、图像等多种媒体信息。移动多媒体的特点是数据量大、传输速率高、服务质量要求高&#xff0c;因此对信源编码和信道编码的性能提出了更高的要求。 本文对进3年的移动多媒体信源与信道编码的研究…