前端日志收集(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.mzph.cn/diannao/15879.shtml

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

相关文章

面向对象编程的奥秘:封装与继承

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、封装的魅力 封装的应用 封装示例 二、继承的力量 继承的应用 继承示例 三、总结 一…

清华新突破||新研究揭示多智能体协作的秘密武器

获取本文论文原文PDF&#xff0c;请在公众号【AI论文解读】留言&#xff1a;论文解读点击订阅&#xff1a;人工智能论文解读合集 引言&#xff1a;多智能体协作中的挑战与机遇 在多智能体系统中&#xff0c;智能体需要通过协作来完成复杂的任务&#xff0c;这种协作涉及到通信…

【对角线遍历】python

没啥思路 class Solution:def findDiagonalOrder(self, mat: List[List[int]]) -> List[int]:mlen(mat)nlen(mat[0])ret[]if len(mat)0:return retcount0#mn-1是对角线总数while count<mn-1:#x和y的和刚好是count数#偶数为右上走if count%20:xcount if(count<m)else (…

Linux 基本使用和 web 程序部署云端

目录 1.Linux发行版 2.Linux常用命令 ls pwd cd touch mkdir cat rm cp mv man vim grep ps netstat 绝对路径 vs 相对路径 使用 tab 键补全 使用 ctrl c 重新输入 粘贴与复制快捷键 3.Linux环境搭建 环境搭建方式 使用云服务器 4.搭建Java部署环境 …

《计算机网络微课堂》3-11 虚拟局域网 VLAN

本节课我们介绍虚拟局域网 VLAN 的基本概念。 ‍ 3.11.1 虚拟局域网 VLAN 概述 在之前课程中我们已经介绍过了以太网交换机自学习和转发帧的流程&#xff0c;‍‍以及为避免网络环路而产生的生成树协议。 以太网交换机工作在数据链路层&#xff0c;‍‍也包括物理层&#xf…

最大子矩阵+01矩阵

最大子矩阵 题目 思路 确定一个矩阵中的子矩阵&#xff0c;只需要确定矩阵对角线上两点的坐标即可&#xff0c; 在确定了子矩阵之后&#xff0c;还需要计算子矩阵中各元素之和&#xff0c;如果按照常规的循环方法来解决&#xff0c;时间复杂度是O(N^6)&#xff0c;对于本题20…

大作业爬取手机数据,实现手机推荐系统以及朋友圈手机论坛

1、功能简介 &#xff08;1&#xff09;用户注册与用户登录 &#xff08;2&#xff09;手机搜索、手机比拼、手机个性化推荐 &#xff08;3&#xff09;点击搜索的手机图片会就用户行为&#xff0c;轮播展示用户行为&#xff0c;推荐点击次数靠前的手机 &#xff08;4&#xf…

【云原生】K8s 管理工具 kubectl 详解(三)

金丝雀发布/灰度发布&#xff08;Canary Release&#xff09; 一、金丝雀发布简介 Deployment控制器支持自定义控制更新过程中的滚动节奏&#xff0c;如“暂停&#xff08;pause&#xff09;”或“继续&#xff08;resume&#xff09;”更新操作。比如等待第一批新的Pod资源创…

c语言----函数

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文主要整理c语言中函数的相关知识点 适合有编程基础的人快速掌握。。。。 函数分类 系统函数: 系统内置的函数,include包含进入之后可以直接使用 用户函数: 用户自定义的函数&#xff0c;自己写。 用户函数…

探秘NumPy的奥秘:元素级操作与广播机制

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、NumPy基础与元素级操作 元素级操作的引入 元素级操作详解 广播机制初探 二、NumPy矩…

Linux操作指令大全

目录 &#x1f349;引言 &#x1f349; 基础命令 &#x1f348;pwd &#x1f348;cd &#x1f348;ls &#x1f348;mkdir &#x1f348;rmdir &#x1f348;cp &#x1f348;mv &#x1f348;rm &#x1f349; 文件操作命令 &#x1f348;cat &#x1f348;tac …

深度神经网络——什么是混淆矩阵?

概述 混淆矩阵是一种在机器学习和数据科学中广泛使用的分析工具&#xff0c;用于评估分类模型的性能。它通过比较实际类别和模型预测的类别来提供模型性能的详细信息。以下是混淆矩阵的一些关键点&#xff1a; 结构&#xff1a;混淆矩阵是一个表格&#xff0c;通常有两行两列&…

stm32-USART串口外设

配置流程 初始化配置 1.开启时钟&#xff08;打开USART和GPIO的时钟&#xff09; void RCC_AHBPeriphClockCmd(uint32_t RCC_AHBPeriph, FunctionalState NewState); void RCC_APB2PeriphClockCmd(uint32_t RCC_APB2Periph, FunctionalState NewState); void RCC_APB1Periph…

游戏子弹类python设计与实现详解

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、子弹类设计思路 1. 属性定义 2. 方法设计 三、子弹类实现详解 1. 定义子弹…

ubuntu openvoice部署过程记录,解决python3 -m unidic download 时 unidic无法下载的问题

github给的安装顺序&#xff1a; conda create -n openvoice python3.9 conda activate openvoice git clone gitgithub.com:myshell-ai/OpenVoice.git cd OpenVoice pip install -e .安装MeloTTS: pip install githttps://github.com/myshell-ai/MeloTTS.git python -m unid…

新能源汽车的电驱热管理

前言 新能源汽车的电驱热管理是指维持电动汽车电池、电机和电控系统在适宜的工作温度范围内&#xff0c;保障车辆高效、安全、稳定运行的技术方案。随着新能源汽车的快速发展和普及&#xff0c;电驱热管理技术也日益成为关注焦点。本文将从电池、电机和电控系统三个方面介绍新…

Studio 3T 2024.3 (macOS, Linux, Windows) - MongoDB 的专业 GUI、IDE 和 客户端,支持自然语言查询

Studio 3T 2024.3 (macOS, Linux, Windows) - MongoDB 的专业 GUI、IDE 和 客户端&#xff0c;支持自然语言查询 The professional GUI, IDE and client for MongoDB 请访问原文链接&#xff1a;https://sysin.org/blog/studio-3t/&#xff0c;查看最新版。原创作品&#xff…

智能合作:多AI协同助力传统工作流

背景介绍 红杉资本2024 AI AGENT大会上吴恩达再次介绍了AI四大设计模式即&#xff1a; 反思&#xff08;Reflection)&#xff1b;工具使用&#xff08;Tool use&#xff09;&#xff1b;规划&#xff08;Planning)&#xff1b;多智能体协作(Multi-agent collaboration)&#…

基于深度学习和去卷积的盲源分离方法在旋转机械上的应用

关键词&#xff1a;预测性维护、盲源分离、振动分析、传递函数移除、二阶循环平稳性、轴承监测、机器学习 振动是旋转机械中主要的故障指示器&#xff0c;它们主要来源于两个方面&#xff1a;一个是与齿轮相关的振动&#xff08;主要源于齿轮啮合过程中的冲击和不平衡负载&…

【云原生--K8S】K8S python接口研究

文章目录 前言一、搭建ubuntu运行环境1.运行ubuntu容器2.拷贝kubeconfig文件二、python程序获取k8s信息1.获取node信息2.获取svc信息3.常用kubernetes API总结前言 在前面的文章中我们都是通过kubectl命令行来访问操作K8S,但是在实际应用中可能需要提供更方便操作的图形化界面…