前端监控学习笔记

现成的SDK

  • Sentry
  • Fun Debug

需要监控什么?

  • 错误统计
    记录我们代码发布到线上各种奇奇怪怪的错误

  • 行为日志埋点
    记录用户行为,比如:分析用户浏览时间比较长的页面有哪些,常常点击的有哪些,可以做 相应的推荐

  • PV/UV统计
    记录用户访问页面的次数
    PV:访问的操作的次数,UV:访问页面的用户多少

前端监控的主要流程:
在这里插入图片描述

功能拆分

在这里插入图片描述

错误监控

错误监控,即当代码发生错误时,比如,同步错误,异步错误,promise错误,资源加载错误时,我们需要捕获到错误,然后上报给后端。

上报到后端简单,发送请求即可。那如何捕获到错误,我们下面进行讨论:

错误类型

  1. 语法错误

    语法错误一般在可发阶段就可以发现,比如常见的单词拼写错误,中英文符号错误等。注意:语法错误是无法被try catch捕获的,因为在开发阶段就能发现,所以一般不会发布到线上环境。

    try {let name = 'heima; // 少一个单引号console.log(name);
    } catch (error) {console.log('----捕获到了语法错误-----');
    }
    
  2. 同步错误

    同步错误指的是在js同步执行过程中的错误,比如变量未定义,是可以被try catch给捕获到的

    try {const name = 'heima';console.log(nam);
    } catch (error) {console.log('------同步错误-------')
    }
    
  3. 异步错误

    异步错误指的是在setTimeout等函数中发生的错误,是无法被try catch捕获到的

    try {setTimeout(() => {undefined.map();}, 0);
    } catch (error) {console.log('-----异步错误-----')
    }
    

    异步错误的话我们可以用window.onerror来进行处理,这个方法比try catch要强大很多

    /*** @param {String}  msg    错误描述* @param {String}  url    报错文件* @param {Number}  row    行号* @param {Number}  col    列号* @param {Object}  error  错误Error对象*/window.onerror = function (msg, url, row, col, error) {console.log('出错了!!!');console.log(msg);console.log(url);console.log(row);console.log(col);console.log(error);
    };
    
  4. promise错误

    promise 中使用 catch 可以捕获到异步的错误,但是如果没有写 catch 去捕获错误的话 window.onerror 也捕获不到的,所以写 promise 的时候最好要写上 catch ,或者可以在全局加上 unhandledrejection 的监听,用来监听没有被捕获的promise错误。

    window.addEventListener("unhandledrejection", function(error){console.log('捕获到异常:', error);
    }, true);
    
  5. 资源加载错误

    资源加载错误指的是比如一些资源文件获取失败,可能是服务器挂掉了等原因造成的,出现这种情况就比较严重了,所以需要能够及时的处理,网路错误一般用 window.addEventListener 来捕获。

    window.addEventListener('error', (error) => {console.log(error);
    }, true);
    

用户埋点统计

埋点就是需要记录用户的某些行为,比如点击按钮,我们需要记录用户点击了哪个按钮,然后进行上报。这样做的作用是,我们得到的数据可以进行一些分析。PS:淘宝首页分类,需要知道哪个分类点击次数最多,即哪个分类最火。

手动埋点

手动埋点就是手动的去出发上报函数

// 方式1
<buttononClick={() => {// 业务代码tracker('click', '用户去支付');// tracker('visit', '访问新页面');// tracker('submit', '提交表单');}}
>手动埋点</button>
// 方式2
<button data-target="支付按钮"onClick={() => {// 业务代码}}
>手动上报</button>
  • 优点:可控性强,可以自定义上报具体的数据。
  • 缺点:对业务代码侵入性强,如果有很多地方需要埋点就得一个一个手动的去添加埋点代码。

无痕埋点

无痕埋点是为了解决手动埋点的缺点,实现一种不用侵入业务代码就能在应用中添加埋点监控的埋点方式。

<button onClick={() => {// 业务代码
}}>自动埋点</button>
// 自动埋点实现
function autoTracker () {// 添加全局click监听document.body.addEventListener('click', function (e) {const clickedDom = e.target;// 获取data-target属性值let target = clickedDom?.getAttribute('data-target');if (target) {// 如果设置data-target属性就上报对应的值--手动埋点tracker('click', target);} else {// 如果没有设置data-target属性就上报被点击元素的html路径const path = getPathTo(clickedDom);tracker('click', path);}}, false);
};
  • 优点:不用侵入务代码就能实现全局的埋点。
  • 缺点:只能上报基本的行为交互信息,无法上报自定义的数据;上报次数多,服务器性能压力大。

PV统计

  • history路由

    history路由是由window.histroy api来实现的:
    - istory.back(); // 返回上一页,和浏览器回退功能一样
    - history.forward(); // 前进一页,和浏览器前进功能一样
    - history.go(); // 跳转到历史记录中的某一页,
    - history.pushState(); // 添加新的历史记录
    - history.replaceState(); // 修改当前的记录项

/*** 重写pushState和replaceState方法* @param {*} name * @returns */
const createHistoryEvent = function (name) {// 拿到原来的处理方法const origin = window.history[name];return function(event) {if (name === 'replaceState') {const { current } = event;const pathName = location.pathname;if (current === pathName) {let res = origin.apply(this, arguments);return res;}}let res = origin.apply(this, arguments);let e = new Event(name);e.arguments = arguments;window.dispatchEvent(e);return res;};
};window.history.pushState = createHistoryEvent('pushState');
window.history.replaceState = createHistoryEvent('replaceState');function listener() {const stayTime = getStayTime(); // 停留时间const currentPage = window.location.href; // 页面路径lazyReport('visit', {stayTime,page: beforePage,})beforePage = currentPage;
}// history.go()、history.back()、history.forward() 监听
window.addEventListener('popstate', function () {listener()
});// history.pushState
window.addEventListener('pushState', function () {listener()
});// history.replaceState
window.addEventListener('replaceState', function () {listener()
});	

history路由无法监听到pushState和replaceState,所以我们冲洗了一个方法,并用windows.dispatch创建了一个自定义监听事件。

  • hash路由
    url上hash的改变会出发 hashchange 的监听,所以我们只需要在全局加上一个监听函数,在监听函数中实现采集并上报就可以了。但是在react和vue中,对于hash路由的跳转并不是通过 hashchange 的监听实现的,而是通过 pushState 实现,所以,还需要加上对 pushState 的监听才可以。
export function hashPageTrackerReport() {let beforeTime = Date.now(); // 进入页面的时间let beforePage = ''; // 上一个页面// 上报function listener() {const stayTime = getStayTime();const currentPage = window.location.href;lazyReport('visit', {stayTime,page: beforePage,})beforePage = currentPage;}// hash路由监听window.addEventListener('hashchange', function () {listener()});
}

UV统计

在SDK初始化的时候,上报即可

UV统计的是一天内访问该网站的用户数

/*** 初始化配置* @param {*} options */
function init(options) {... // 加载配置report('user', '加载应用'); // uv统计
}

合并上报

对于无痕埋点来说,一次点击就进行一次上报,会对服务器造成很大的压力,所以我们需要合并一下请求

// cache.js
const cache = [];export function getCache() {return cache;
}export function addCache(data) {cache.push(data);
}// lazyReport.js
export function lazyReport(type, params) {// ....const data = getCache();if (delay === 0) { // delay=0相当于不做延迟上报report(data);return;}if (data.length > 10) { // 数据达到10条上报report(data);clearTimeout(timer);return;}clearTimeout(timer);timer = setTimeout(() => { // 合并上报report(data);}, delay);
}

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

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

相关文章

自定义类型:结构体、联合、枚举

目录 一、⾃定义类型&#xff1a;结构体 1.结构体类型 1. 1结构体类型的声明 结构体变量的创建和初始化 1.2 结构的特殊声明 1.3 结构的自引用 2. 结构体内存对齐 ①&#xff1a;对齐规则 ②&#xff1a;offsetof函数 ③&#xff1a;为什么存在内存对⻬? ④ 修改默认对⻬…

基于算能的国产AI边缘计算盒子,8核心A53丨10.6Tops算力

边缘计算盒子 8核心A53丨10.6Tops算力 ● 算力高达10.6TOPS,单芯片最高支持8路H.264 & H.265的实时解码能力。 ● 可扩展4G/5G/WIFI无线网络方式&#xff0c;为边缘化业务部署提供便利。 ● 支持RS232/RS485/USB2.0/USB3.0/HDMI OUT/双千兆以太网等。 ● 低功耗设计&a…

hls实现播放m3u8视频将视频流进行切片 HLS.js简介

github官网GitHub - video-dev/hls.js: HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.HLS.js is a JavaScript library that plays HLS in browsers with support for MSE. - GitHub - video-dev/hls.js: HLS.js is a JavaScript library …

BUUCTF-WEB-刷题记录(2)

[网鼎杯 2018]Fakebook 注册一个账户&#xff0c;进去之后查看源代码&#xff0c;感觉存在注入点 是数字型注入&#xff0c;payload&#xff1a; 1%20and(false) 1%20and(true)判断列数 1 order by 5改为4的时候则页面正常 判断显示位&#xff0c;可以看见第二列存在数据回…

智能优化算法应用:基于乌燕鸥算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于乌燕鸥算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于乌燕鸥算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.乌燕鸥算法4.实验参数设定5.算法结果6.参考文献7.…

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示功能菜单应用

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示功能菜单应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍液晶显示器LCD1602简单介绍IIC通信简单介绍掉…

Lattice-Based Blind Signatures: Short, Efficient, and Round-Optimal

目录 摘要引言 Lattice-Based Blind Signatures: Short, Efficient, and Round-Optimal CCS 2023 摘要 我们提出了一种基于随机预言机启发式和标准格问题&#xff08;环/模块SIS/LWE和NTRU&#xff09;的2轮盲签名协议&#xff0c;签名大小为22KB。该协议是全面优化的&#xf…

企业网盘在医疗行业资料管理中的应用与优势

随着企业网盘的广泛应用&#xff0c;医疗行业正逐渐实现资料安全存储和智能化管理。海量应用的推动下&#xff0c;医院管理正朝着线上化、智能化发展迈进。然而&#xff0c;医疗行业仍面临着诸多挑战。 医疗行业的痛点在于病例、档案、药品资料繁多且保存周期长。这些资料的整理…

服务注册发现 配置中心 springcloud alibaba nacos

文章目录 0100 系统环境0200 nacos安装0201 下载0202 安装 0300 工程说明0301 结构说明0302 运行效果 0400 代码说明0401 服务提供者&#xff08;Provider Service&#xff09;0402 服务消费者&#xff08;Consumer Service&#xff09;服务提供者SDK&#xff08;Provider Serv…

Mapper文件夹在resource目录下但是网页报错找不到productMapper.xml文件的解决

报错如下&#xff1a; 我的Mapper文件夹在resourse目录下但是网页报错找不到productMapper.xml。 结构如下&#xff1a;代码如下&#xff1a;<mappers><mapper resource"com/dhu/mapper/productMapper.xml" /> </mappers> 这段代码是在mybatis-co…

5G承载网和大客户承载的演进

文章目录 移动4/5G承载网联通和电信4/5G承载网M-OTN&#xff08;Metro-optimized OTN&#xff09;&#xff0c;城域型光传送网PeOTN&#xff08;packet enhanced optical transport network&#xff09;&#xff0c;分组增强型OTN板卡增强型PeOTN集中交叉型PeOTN VC-OTN&#x…

Hdoop学习笔记(HDP)-Part.11 安装Kerberos

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

ASP.NET Core 使用IIS调试出现505.24错误

最近一直再学习asp.net 相关的东西&#xff0c;主要是为前端app提供一个webapi接口。在使用iis调试程序时出现HTTP Error 500.24 - Internal Server Error错误&#xff0c;搞了好久才最终解决。 1.在项目中增加web.config配置文件 2.将配置文件改为如下内容 <?xml version…

C++模版

文章目录 C模版1、泛型编程2、函数模版2.1、函数模版概念2.2、函数模版格式2.3、函数模版原理2.4、函数模版的实例化2.5、模板参数的匹配原则 3、类模版3.1、类模版概念3.2、类模版格式3.3、类模板的实例化 C模版 1、泛型编程 泛型编程&#xff08;Generic Programming&#x…

003、应用程序框架-UIAbility

之——UIAbility 目录 之——UIAbility 杂谈 正文 1.UIAbility 2.基本使用 2.1 创建Ability工程 2.2 添加基础功能 2.3 新建页面 2.4 页面间的跳转 3.生命周期 总结 杂谈 UIAbility&#xff0c;其中的页面创建、页面间的跳转、数据传递、生命周期。 正文 1.UIAbil…

【数据结构】环形队列

环形队列 1. 定义 环形队列就是将队列在逻辑上看作环形结构、物理上仍是数组形式存储的一种数据结构。 其实现主要分为两种情况&#xff1a; 浪费空间法记录空间法 2. 实现 实现要考虑的是成员变量 2.1 记录空间法 使用used标识当前存储了多少元素&#xff0c;如果为空&a…

基于ASP.NET MVC技术的图书管理系统的设计与实现

基于ASP.NET MVC技术的图书管理系统的设计与实现 摘要&#xff1a;图书管理系统是一套高新科学技术和图书知识信息以及传统历史文化完美结合的体现。它改变了传统图书收藏的静态书本式图书服务特征&#xff0c;实现了多媒体存取、远程网络传输、智能化检索、跨库无缝链接、创造…

type-c充电器输出电压5V9V12V15V20V PD协议诱骗快充应用方案

Type-C接口的PD充电器&#xff08;如iPhone的20W充电器&#xff09;默认是没有电压输出的&#xff0c;想要让Type-C的充电器输出5V、9V、12V、15V、20V&#xff0c;只需要在产品上使用一颗快充取电芯片XSP08即可。 工作原理&#xff1a; 各类小家电产品如平板电脑、智能穿戴产…

什么是Ros(二)- 结构和通讯概述

目录 1.架构 2.通讯 参考文献 上接&#xff1a;什么是Ros&#xff08;一&#xff09;-CSDN博客 1.架构 共三层&#xff1a;OS 层&#xff0c;中间层&#xff0c;应用层。 OS 层&#xff1a;OS 层是操作系统层也就是我们现在使用的ubuntu&#xff08;linux&#xff09;&…

win10下在Qt中使用VTK(安装VS2017+安装QT5.9.9+编译配置VTK8.2.0)

目录 前言一、安装Visual Studio20171&#xff09;官网下载可执行的安装程序2&#xff09;安装3&#xff09;启动 二、安装Qt 5.9.91&#xff09;下载可执行的安装程序2&#xff09;安装3&#xff09;配置环境变量 三、安装Cmake1&#xff09;下载可执行的安装程序2&#xff09…