【前端】前端监控⊆埋点

文章目录

  • 前端监控分为三个方面
  • 前端监控流程
  • 异常监控
    • 常见的错误捕获方法主要是 try / catch 、window.onerror 和window.addEventListener 等。
    • Promise 错误
    • Vue 错误
    • React 错误
  • 性能监控
  • 用户行为监控
  • 常见的埋点方案
  • 来源

前端监控分为三个方面

  1. 异常监控（监控前端页面的报错）
  2. 性能监控（监控页面的性能）
  3. 用户行为监控（监控用户的行为，计算PV、UV、在线时间等、数据监控即我们常说的埋点

前端监控流程

  1. 前端埋点
  2. 数据上报
  3. 加工汇总
  4. 可视化展示
  5. 监控报警

异常监控

  • JS 代码运行错误、语法错误等；
  • AJAX 请求错误；
  • 静态资源加载错误；
  • Promise 异步函数错误；

错误信息监控简单来说就是要搜集报错信息的发生的位置，以及报错的类型，进行上报，便于我们能够更好的掌握错误信息，从而能够对症下药。按照 5W1H 的法则来说，我们需要关注以下的几项信息：

  • What ，发生了什么错误：语法错误、类型错误、数据错误、逻辑错误等；
  • When ，什么时间发生的错误，可带上时间戳进行上报；
  • Who ，哪个用户或者哪一类用户发生了错误，包括用户 ID 、设备信息、IP 信息等；
  • Where ，哪个项目、哪些页面发生错误，可以上报页面的 URL 以及代码报错行数等信息；
  • Why ，为什么会发生错误，也就是用户在什么样的场景下发生的错误，便于问题复现；
  • How ，根据以上的信息如何进行问题的定位，然后怎么处理并解决问题；

常见的错误捕获方法主要是 try / catch 、window.onerror 和window.addEventListener 等。

try / catch

这是我们在代码调试的过程中最常用的一个方式，但它只能捕获代码常规的运行错误，语法错误和异步错误并能捕获到。

// 常规运行时错误，可以捕获 ✅
try {console.log(notdefined);
} catch(e) {console.log('捕获到异常：', 'ReferenceError');}// 语法错误，不能捕获 ❌
try {const notdefined,
} catch(e) {console.log('捕获不到异常：', 'Uncaught SyntaxError');
}// 异步错误，不能捕获 ❌
try {setTimeout(() => {console.log(notdefined);}, 0)
} catch(e) {console.log('捕获不到异常：', 'Uncaught ReferenceError');
}

window.onerror
当 JS 运行时错误发生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror() 。

加载一个全局的 error 事件处理函数可用于自动收集错误报告。

最后需要补充的是：window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生，控制台还是会显示 Uncaught Error 。

 
```javascript
/*** @param { string } message 错误信息
* @param { string } source 发生错误的脚本URL
* @param { number } lineno 发生错误的行号
* @param { number } colno 发生错误的列号
* @param { object } error Error对象*/window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到的错误信息是：', message, source, lineno, colno, error )
}// 常规运行时错误，可以捕获 ✅
window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到异常：',{message, source, lineno, colno, error});
}
console.log(notdefined);
// message: "Uncaught ReferenceError: notdefined is not defined"
// source: "file:///C:/Users/qinzq42866/Desktop/error.html"
// lineno: 14
// colno: 19
// error: ReferenceError: notdefined is not defined at file
// 语法错误，不能捕获 ❌
window.onerror = function(message, source, lineno, colno, error) {console.log('未捕获到异常：',{message, source, lineno, colno, error});
}
const notdefined,
// Uncaught SyntaxError: Missing initializer in const declaration// 异步错误，可以捕获 ✅
window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到异常：',{message, source, lineno, colno, error});
}
setTimeout(() => {console.log(notdefined);
}, 0)// message: "Uncaught ReferenceError: notdefined is not defined"// source: "file:///C:/Users/qinzq42866/Desktop/error.html"// lineno: 15// colno: 21// error: ReferenceError: notdefined is not defined at file// 资源错误，不能捕获 ❌
<script>
window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到异常：',{message, source, lineno, colno, error});
}</script>// GET https://yun.tuia.cn/image/kkk.png 404 (Not Found)

window.addEventListener
当一项静态资源加载失败时，加载资源的元素会触发一个 Event 接口的 Error 事件，这些 Error 事件不会向上冒泡到 window ，但能被捕获。而 window.onerror 不能检测捕获。

// 图片、script、css加载错误，都能被捕获 ✅<script>window.addEventListener('error', (error) => {console.log('捕获到异常：', error);}, true)</script>// fetch错误，不能捕获 ❌<script>window.addEventListener('error', (error) => {console.log('未捕获到异常：', error);}, true)</script<script>fetch('https://tuia.cn/test')</script>

由于网络请求异常不会发生事件冒泡，因此必须在事件捕获的阶段将其捕捉到才行，这种方式虽然能够捕捉到网络请求的异常，但是却无法判断 HTTP 的状态，因此仍然需要配合服务端的日志进行配合分析。

需要注意的是：不同浏览器下返回的 Error 对象是不一样的，需要做兼容处理。

Promise 错误

没有写 catch 的 Promise 中抛出的错误是无法被 onerror 或 try / catch 捕获到的，这也是为什么我们一定要在 Promise 后面加上 catch 去捕获和处理异常。

为了防止有漏掉的 Promise 异常信息，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听 Uncaught Promise Error 。

说明：当 Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；这可能发生在 window 下，但也可能发生在 Worker 中。 这对于调试回退错误处理非常有用。

window.addEventListener("unhandledrejection", event => {console.warn('UNHANDLED PROMISE REJECTION:', ${event.reason});});window.onunhandledrejection = event => {console.warn('UNHANDLED PROMISE REJECTION:', ${event.reason});};window.addEventListener("unhandledrejection", function(e){e.preventDefault()console.log('捕获到异常：', e);});Promise.reject('promise error');

说明：如果去掉控制台的异常显示，需要加上 event.preventDefault() ；

Vue 错误

由于 Vue 会捕获到所有 Vue 单文件组件或者 Vue.extend 继承的代码，所以在 Vue 里面出现的错误并不会直接抛给 window.onerror ，而是会被 Vue 自身的 Vue.config.errorHandler 捕获。

Vue.config.errorHandler = (err, vm, info) => {console.error('通过vue errorHandler捕获的错误');console.error(err);console.error(vm);console.error(info);}

React 错误

React 16 提供了一个内置函数 componentDidCatch ，使用它可以轻松的捕获到 React 组件内部抛出的错误信息。

 
class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}componentDidCatch(error, errorInfo) {console.log('捕获到错误：', error, errorInfo);}render() {if (this.state.hasError) {return `Something went wrong.`;}return this.props.children; }
}

性能监控

  • 不同用户和不同设备下的首屏加载时间，包括白屏时间；
  • HTTP 接口的响应时间；
  • 静态资源、包括图片的下载时间；

根据W3C性能小组引入的新的API(目前IE9以上的浏览器)–window.performance，实现前端性能监控
在这里插入图片描述

(function () {handleAddListener('load', getTiming)function handleAddListener(type, fn) {if (window.addEventListener) {window.addEventListener(type, fn)} else {window.attachEvent('on' + type, fn)}}function getTiming() {try {var time = performance.timing;var timingObj = {};var loadTime = (time.loadEventEnd - time.loadEventStart);if (loadTime < 0) {setTimeout(function () {getTiming();}, 200);return;}// 阶段耗时timingObj['DNS解析耗时'] = (time.domainLookupEnd - time.domainLookupStart);timingObj['TCP连接耗时'] = (time.connectEnd - time.connectStart);timingObj['SSL安全连接耗时'] = (time.connectEnd - time.secureConnectionStart);//针对httpstimingObj['网络请求耗时'] = (time.responseStart - time.requestStart);timingObj['数据传输耗时'] = (time.responseEnd - time.responseStart);timingObj['DOM解析耗时'] = (time.domInteractive - time.responseEnd);timingObj['资源加载耗时, 表示页面中的同步加载资源'] = (time.loadEventStart - time.domContentLoadedEventEnd);timingObj['前端onload执行时间'] = (time.loadEventEnd - time.loadEventStart);//性能指标(上报字段名)timingObj["首次渲染"] = time.responseEnd - time.fetchStart// timingObj["首屏时间"] =  first meaningful painttimingObj["首次可交互"] = time.domInteractive - time.fetchStarttimingObj["DOMReady"] = time.domContentLoadedEventEnd - time.fetchStarttimingObj["页面完全加载"] = time.loadEventStart - time.fetchStarttimingObj["首包时间"] = time.responseStart - time.domainLookupStartfor (item in timingObj) {console.log(item + ":" + timingObj[item] + '毫秒(ms)');}console.log(performance.timing);console.log(performance);} catch (e) {console.log(timingObj)console.log(performance.timing);}}
})();

用户行为监控

  • PV / UV：PV 即 Page View ，也就是页面的浏览数量，没打开页面一次就会统计一次；UV 即 User View
    ，也就是不同用户访问的次数，在 PV 的基础上根据 User 信息的不同做了去重操作；
  • 用户在每个页面停留的时间信息。即从用户打开该页面到用户离开该页面的时间差，用于表示该页面对用户的留存程度；
  • 用户的来处。即从什么入口或什么渠道来到了当前页面，通常会在 URL 中添加查询参数来做区分统计；
  • 用户的页面操作行为。即用户在该页面点击了哪些按钮，或者从什么链接去到了某些页面等等，来分析用户的去向。
import tracker from "../util/tracker";
export function pv() {tracker.send({kind: "business",type: "pv",startTime: performance.now(),pageURL: getPageURL(),referrer: document.referrer,uuid: getUUID(),});let startTime = Date.now();window.addEventListener("beforeunload",() => {let stayTime = Date.now() - startTime;tracker.send({kind: "business",type: "stayTime",stayTime,pageURL: getPageURL(),uuid: getUUID(),});},false);
}

常见的埋点方案

代码埋点
嵌入代码的形式
优点：精确（任意时刻，数据量全面）
缺点：代码工作量点

可视化埋点
通过可视化交互的手段，代替代码埋点
将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码
用系统来代替手工插入埋点代码

无痕埋点
前端的任意一个事件被绑定一个标识，所有的事件都被记录下来
通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析
无痕埋点的优点是采集全量数据，不会出现漏埋和误埋等现象
缺点是给数据传输和服务器增加压力，也无法灵活定制数据结构

来源

前端监控指的是什么？
前端 监控

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

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

相关文章

2014年6月18日 Go生态洞察：Go 1.3 版本发布

2014年6月18日 Go生态洞察：Go 1.3 版本发布

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
linux之 服务器ping百度能通，ping其他网址不通

linux之 服务器ping百度能通，ping其他网址不通

表症问题 linux上ping域名解析出来的ip地址不正确 linux服务器ping百度能通&#xff0c;ping其他网址不通 linux上ping域名解析出来的ip地址不正确 ping 百度可以&#xff0c;说明dns解析是没问题的 但是&#xff0c;ping 其他网址不通&#xff0c;说明是 请求的其他网址的问…
阅读更多...
Android studio 迁移之后打开没反应

Android studio 迁移之后打开没反应

把Android studio由d盘迁移到c盘&#xff0c;点击没反应&#xff1b; 需要把C:\Users\xxxx\AppData\Roaming\Google\AndroidStudio2022.3 目录下的studio64.exe.vmoptions 修改为C:&#xff0c;删除该文件会导致无法安装app。 里面配置了一个
阅读更多...
改进YOLOv5 | C3模块改动篇 | 轻量化设计 |骨干引入动态卷积｜CondConv

改进YOLOv5 | C3模块改动篇 | 轻量化设计 |骨干引入动态卷积｜CondConv

🗝️YOLOv5实战宝典--星级指南：从入门到精通，您不可错过的技巧   -- 聚焦于YOLO的 最新版本， 对颈部网络改进、添加局部注意力、增加检测头部，实测涨点 💡 深入浅出YOLOv5：我的专业笔记与技术总结   -- YOLOv5轻松上手， 适用技术小白，文章代码齐全，仅需 …
阅读更多...
什么是应急演练脚本?其设计原则是什么?

什么是应急演练脚本?其设计原则是什么?

应急演练脚本是一种系统性、有计划的模拟性文件&#xff0c;旨在测试和评估组织在紧急情况下的应对能力。这种脚本提供了一系列步骤和场景&#xff0c;以确保团队能够高效、协调地应对各种紧急事件。以下将详细探讨应急演练脚本的定义、设计原则以及实施过程。 一、应急演练脚本…
阅读更多...
智慧社区建设管理方案，AI技术让小区更智能、更舒适

智慧社区建设管理方案，AI技术让小区更智能、更舒适

一、背景与需求分析 智慧社区是充分应用大数据、云计算、人工智能等信息技术手段&#xff0c;整合社区各类服务资源&#xff0c;打造基于信息化、智能化管理与服务的社区治理新形态。根据《关于深入推进智慧社区建设的意见》&#xff0c;到2025年&#xff0c;基本构建起网格化…
阅读更多...
@PropertySource适配通配符加载到Environment的一种方案

@PropertySource适配通配符加载到Environment的一种方案

PropertySource可将配置文件加载到内存&#xff0c;时间有限说干的&#xff0c;PropertySource注解有4个参数&#xff0c;其中value表示要加载文件的路径&#xff0c;这个参数不支持通配符。还有一个参数PropertySourceFactory是加载配置文件的工厂&#xff0c;这两个参数配合使…
阅读更多...
学习Opencv（蝴蝶书/C++）——3. OpenCV的数据类型

学习Opencv（蝴蝶书/C++）——3. OpenCV的数据类型

文章目录 1. 总览2. 基础类型2.0 基础类型总览2.1 cv::Vec<>类2.2 cv::Matx<>类2.3 cv::Point类（cv::Point3_< >和cv::Point_< >）2.4 cv::Scalar(cv::Scalar_)类2.5 cv::Size（cv::Size_）类、cv::Rect(cv::Rect_)类和cv::RotatedRect 类2.6 基础类型…
阅读更多...
抖音seo短视频矩阵源码开发部署与维护--开源

抖音seo短视频矩阵源码开发部署与维护--开源

一、引言 随着抖音等短视频平台的崛起&#xff0c;越来越多的企业和个人开始关注如何在这些平台上提升曝光量和用户流量。抖音SEO&#xff08;搜索引擎优化&#xff09;是一种有效的方法&#xff0c;通过优化短视频内容和关键词&#xff0c;让更多的人找到并点击你的视频。本文…
阅读更多...
基于WEB的停车场管理系统的设计和实现【附源码】

基于WEB的停车场管理系统的设计和实现【附源码】

基于WEB的停车场管理系统的设计和实现 摘 要 随着现代社会的快速发展&#xff0c;人民生活水平快速提高&#xff0c;汽车的数量飞速增加&#xff0c;与此同时停车问题也越来越受到人们的关注&#xff0c;为了实现对停车场进行有效的管理&#xff0c;结合一些停车场的模式和现状…
阅读更多...
高斯Filter 和 Bilateral Filter

高斯Filter 和 Bilateral Filter

参考链接&#xff1a; Python | Bilateral Filtering - GeeksforGeeks 高斯Filter&#xff1a; 高斯模糊后的图像中的每个像素的强度是由它周围的像素的加权平均得到的&#xff0c;这个权重就是高斯函数的值&#xff0c;它取决于像素之间的距离。具体来说&#xff1a; 通常会导…
阅读更多...
本地训练,开箱可用,Bert-VITS2 V2.0.2版本本地基于现有数据集训练(原神刻晴)

本地训练,开箱可用,Bert-VITS2 V2.0.2版本本地基于现有数据集训练(原神刻晴)

按照固有思维方式&#xff0c;深度学习的训练环节应该在云端&#xff0c;毕竟本地硬件条件有限。但事实上&#xff0c;在语音识别和自然语言处理层面&#xff0c;即使相对较少的数据量也可以训练出高性能的模型&#xff0c;对于预算有限的同学们来说&#xff0c;也没必要花冤枉…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023