不可忽视的前端监控
引言：
本文是我根据项目的总体结构和业务需要，结合互联网知识共享的结果整理出的监控业务并应用到云会议系统中。
前端监控是一种网络技术实践，它涉及在网站或网络应用的前端（即用户的浏览器端）收集和分析数据，以确保应用的健康运行和优化用户体验。
一、为什么要做前端监控
在前端开发的过程，不知道大家有没有遇到这种情况：前端接收到bug，一顿猛操作之后，无法复现，基本认定跟接口有关系了，这时候就需要去查接口日志了。这时候找到忙碌的后端同学，小心翼翼的问上一句，“能帮我查个日志吗？” 后端甩了一眼道，“你自己也能查呀”。这话一听，伤害不高，但侮辱性极大，是个前端都受不了啊 。前端同学赶紧去申请了日志系统的权限，又是一番操作之后，终于查到了对应的接口日志，喜出望外，定睛一看，原来只是一层网关的请求日志，胸中顿时有千头野兽在奔腾，“***，不修了”。然后甩给测试一句，“无法复现”，测试偷偷道了一句，“垃圾”，此案了结。
于是我小心翼翼地打开谷歌百度，搜索“前端监控系统“，然后然后映入眼帘的是各大监控系统争奇斗艳，你们懂的。近年来，前端监控是越来越火，目前已经有很多成熟的产品供我们选择使用。既然这么多，那就翻几个牌子试试吧，我们先后选择了sentry，fundebug，oneApm，growingIo。刚开始使用的时候确实被他们复杂而强大的功能震惊了，页面精美，功能多样。使用一段时间以后发现，他们在各自的领域都很优秀。
二、监控系统分类
常见的监控系统可以分为一下几个类别，包括网络监控、应用性能监控（APM）、服务器监控、安全监控等。以下是一些流行的监控系统的例子，涵盖了不同的监控需求：
应用性能监控（Application Performance Monitoring，简称APM）是一种用于监测和管理软件应用程序性能和可用性的技术。APM 的目标是确保软件应用运行顺畅、高效，同时提供优秀的用户体验。在现代企业中，APM 被视为关键的IT管理工具之一，因为它帮助企业识别和解决应用程序中的性能问题，以提高业务效率和客户满意度。
2.1 APM的主要功能和特点
（1）性能监控：实时监控应用程序的运行性能，包括响应时间、事务速度和错误率。
（2）错误诊断：快速识别和定位应用程序中的问题，如代码错误、慢查询、资源瓶颈等。
（3）用户体验监控：跟踪和评估用户与应用程序的互动，如页面加载时间、点击响应时间等。
（4）基础设施监控：监控应用程序所依赖的基础设施，包括服务器、数据库、网络等。
（5）数据可视化：提供直观的界面，使管理员能够轻松查看性能数据和趋势。
（6）智能警报：根据预设的性能标准，发出实时警报，以便快速响应潜在问题。
（7）业务影响分析：分析性能问题对业务操作和客户体验的影响。
（8）集成和扩展性：与其他IT管理工具和系统集成，提供扩展性以适应不同的监控需求。
APM工具示例：
（1）New Relic：提供全面的应用性能监控，包括服务器、应用程序和浏览器级别的监控。
（2）Dynatrace：使用人工智能来自动检测和诊断性能问题。
（3）AppDynamics：专注于复杂应用架构的性能监控，适合企业级应用。
（4）Datadog：强调云规模监控，支持广泛的服务和平台。
（5）Prometheus：开源监控解决方案，适用于时间序列数据的收集和处理。
(这是一个描述应用程序性能监视(APM)概念的插图。它展示了一个现代化的控制室，专业人员分析各种性能指标。)
APM的实施可以大大提高应用程序的性能和稳定性，同时减少业务中断的风险，对于任何依赖软件应用程序运行的组织都至关重要。随着云计算和微服务架构的流行，APM在现代IT运营中的作用变得更加重要。
网络监控是一种用于管理和监视计算机网络的技术。它使网络管理员能够维持网络系统的健康运行，确保网络和服务的高效可靠性。网络监控涉及到多个方面，包括流量监控、性能监控、安全监控等。
2.2 网络监控的关键方面
（1）流量监控：追踪网络中的数据流量，包括各种设备（如路由器、交换机、终端设备）的入口和出口流量。
（2）性能监控：确保网络性能符合预期标准。这包括监控延迟、带宽使用率、错误率等指标。
（3）设备监控：监控网络中所有设备的状态，包括硬件性能、设备可用性及其故障时间。
（4）安全监控：检测网络中的安全威胁，如未授权访问、异常流量模式、网络攻击等。
（5）配置管理：监控网络配置的变化，确保配置的一致性和合规性。
（6）故障诊断和管理：快速识别和解决网络故障，减少网络停机时间。
常用的网络监控工具：
（1）Nagios: 开源工具，提供包括网络监控在内的全面IT基础设施监控。
（2）Zabbix: 同样是开源解决方案，提供灵活的网络监控功能。
（3）SolarWinds Network Performance Monitor: 易于使用的网络性能监控工具，适合各种规模的网络。
（4）Wireshark: 网络协议分析工具，用于网络故障诊断和通信协议开发。
（5）PRTG Network Monitor: 提供全面的网络监控功能，包括流量分析、性能监控等。
(这是一张描绘高科技网络监控仪表板的图像，其中包含各种图形、图表和有关网络流量、服务器状态和网络安全威胁的实时数据。)
网络监控对于确保网络的稳定性、高效性和安全性至关重要，特别是在今天这个依赖于网络通信的时代。良好的网络监控策略可以帮助组织提前发现问题，减少业务中断的风险，保障关键业务的连续性。
2.3 服务器监控
服务器监控是一个关键的IT管理活动，旨在确保服务器的健康、性能和安全。这种监控通常涉及多个方面，例如：
1. 性能监控：
（1）CPU使用率：监控处理器的使用情况，确保没有过度的负载。
（2）内存使用：追踪内存消耗，以防止内存泄漏或不足。
（3）磁盘使用和I/O：检查磁盘空间使用情况和输入/输出操作，以避免磁盘满或I/O瓶颈。
（4）网络流量：监视网络接口的流量，包括上传和下载速度。
2. 系统监控监控
（1）温度和硬件健康：监控服务器硬件的温度和状态，比如风扇速度、电源状态。
（2）系统日志：审查系统日志文件，寻找错误或异常活动的迹象。
3. 应用和服务监控
（1）服务状态：确保关键服务（如数据库、Web服务器等）运行正常。
（2）应用性能：监控服务器上运行的应用程序的性能，确保响应时间在可接受范围内。
4. 安全监控
（1）入侵检测：检测未授权访问和可疑活动。
（2）漏洞扫描：定期检查系统漏洞和缺陷。
5. 备份和恢复监控
（1）备份完成情况：确保数据定期并成功备份。
（2）恢复能力测试：定期测试数据恢复流程的有效性。
6. 环境监控
（1）房间温度和湿度：监控服务器所在环境的温度和湿度，以防止设备过热。
（图中显示了服务器监控界面，其中包含服务器管理员正在分析的各种指标和统计数据。）
为了有效地进行服务器监控，通常会使用专门的监控软件和工具。这些工具可以提供实时数据、历史趋势分析、警报通知和报告功能。常见的服务器监控工具包括Nagios、Zabbix、PRTG Network Monitor、SolarWinds Server & Application Monitor等。
服务器监控不仅有助于及时发现和解决问题，还能帮助企业规划未来的资源需求和优化现有的系统配置。
2.4 安全监控
安全监控是信息技术（IT）和网络安全领域的一个重要组成部分，旨在保护信息系统免受各种威胁和攻击。这种监控通常包括以下几个关键方面：
1. 入侵检测系统（IDS）和入侵防御系统（IPS）
（1）IDS用于监测和分析网络或系统的异常活动和安全违规事件。
（2）IPS则不仅检测这些事件，还能自动采取措施来阻止或缓解这些攻击。
2. 网络流量分析：监控网络流量以识别可疑模式或行为，例如异常的数据传输量、未知来源的流量或端口扫描活动。
3. 日志管理和分析：收集和分析来自服务器、网络设备、应用程序等的日志文件，以识别潜在的安全事件。
4. 恶意软件防护：使用防病毒软件和其他工具来检测和隔离恶意软件。
5. 安全信息和事件管理（SIEM）系统
结合日志管理和事件管理功能，提供实时分析安全警报和事件。
6. 漏洞扫描和管理：定期扫描系统和应用程序以识别和修复安全漏洞。
7. 物理安全监控：监控数据中心和服务器房的物理入口，使用视频监控和访问控制系统。
8. 用户行为分析（UBA）：分析用户活动，寻找异常行为，这可能表明安全威胁或内部威胁。
9. 合规性监控：确保组织遵守相关的法规和标准，如GDPR、HIPAA或PCI-DSS。
（这张图片描绘了一个复杂的网络安全监控装置，一个安全分析师在多个计算机屏幕上分析各种类型的安全数据。）
三、前端监控系统
前端监控系统通常归类于应用监控系统（Application Performance Management, APM）的一个子类，尤其关注于用户体验监控系统的领域。这类系统专注于监控和分析用户在网页或移动应用上的交互体验，以确保前端应用的性能和可用性。
（这是一个前端系统监控仪表板的图像，展示了各种性能监控指标，如页面加载时间、用户行为跟踪、错误跟踪和用户体验分析。你可以看到这个现代化的界面包含了图表、图形和表格，显示了实时数据、性能趋势和分析结果）
前端监控系统的关键功能
1. 页面性能监控：跟踪页面加载时间、渲染时间等，以确保快速响应。
页面性能监控是一个关键的领域，涉及到多个性能指标的收集和分析。以下是前端页面性能监控的一些核心方面：
（1）关键性能指标：包括TTFB（Time To First Byte，首字节时间）、FP（First Paint，首次绘制）、FCP（First Contentful Paint，首次内容绘制）、LCP（Largest Contentful Paint，最大内容渲染）、TTI（Time to Interactive，可交互时间）、DCL（DOMContentLoaded，DOM加载完成时间）等。这些指标可通过Performance API或PerformanceObserver等方法获取。
用户行为跟踪：记录用户在应用中的点击、滚动等行为，帮助理解用户交互模式。
错误跟踪和日志记录：自动检测前端错误，如JavaScript错误，并记录详细的错误信息。
（2）错误和功能监控：监控不只是关于性能，还包括错误和功能方面的监控。这包括了诸如API拒绝连接、HTTPS请求问题等错误，以及JavaScript错误、网络故障等。使用日志管理工具，如Sematext Logs，可以帮助识别和修复这些问题。
（3）SPA（单页应用）性能监控：随着SPA模式的流行，页面内容渲染的时机发生了变化，因此传统的W3C标准可能不完全适用。在SPA应用中，重要的是监控每个子页面的渲染时间。
（4）数据上报：监控数据需要在不影响页面性能的前提下进行上报。常用的方法包括使用img标签进行GET请求，或使用navigator.sendBeacon()方法来异步发送数据，这样不会延迟页面的卸载或影响下一导航的载入性能。
（5）性能数据采集：可以通过web-vitals库来简化对于LCP、FID（First Input Delay，首次输入延迟）、CLS（Cumulative Layout Shift，累积布局偏移）等数据的采集。这个库提供了一个简单的接口来获取这些关键指标。
（6）用户体验的可用性监控：真实用户监控工具可以跟踪用户在整个应用程序中的进程，提供关于他们如何与应用程序交互以及他们将得到何种响应的信息。
2. 错误监控：前端错误监控是web开发和维护的一个关键方面。它侧重于识别、捕获和分析发生在web应用程序前端的错误。以下是前端错误监控的一些关键方面：
（1）JavaScript错误跟踪:前端错误监控的主要焦点之一是捕获JavaScript错误。这包括在浏览器中出现的语法错误、运行时错误和逻辑错误。诸如Sentry、Rollbar等工具提供了有效跟踪这些错误的功能。
（2）资源加载错误:前端监控还包括检测加载资源(如CSS文件、JavaScript文件、图像等)的失败。可以使用窗口或文档对象上的错误事件的事件侦听器捕获这些错误。
（3）AJAX和Fetch API监控:现代web应用程序严重依赖AJAX和Fetch API进行服务器通信。监视这些api有助于跟踪网络请求中的错误和失败，这对于调试与数据获取或服务器通信相关的问题至关重要。
（4）用户界面问题:除了JavaScript错误，前端监控还可以帮助识别UI问题，如无响应的按钮或破碎的布局。这对于确保流畅的用户体验尤其有用。
（5）错误报告和分析:一旦捕获了错误，就需要报告和分析它们。这包括聚合错误数据、对错误进行分类，以及经常使用指示板和分析来了解错误的频率、严重程度和模式。
（6）自定义错误处理和报告:除了自动错误检测之外，前端应用程序通常还包括自定义错误处理逻辑，以捕获和报告特定类型的错误，或者以符合应用程序需求的方式处理错误。
3. 用户体验分析：分析用户的使用习惯和体验痛点，帮助改善界面设计和用户流程。
（1）识别性能瓶颈:前端监控工具可以识别性能问题，如缓慢的页面加载时间、低效的JavaScript执行和资源加载问题。通过精确定位这些瓶颈，开发人员可以优化代码，减少资源大小，并实现更好的缓存策略，从而提高web应用程序的速度和响应能力。
（2）优化用户旅程:通过分析用户交互模式(如点击、导航路径和表单提交)，前端监控工具可以突出显示应用程序中可能导致用户困惑或困难的区域。然后可以对应用程序的用户界面和流程进行改进，以创建更直观、更愉快的用户体验。
（3）适应用户行为:持续监控允许对随时间变化的用户行为进行分析。这使应用程序能够适应新的趋势和用户期望，保持应用程序的相关性和用户友好性。
4. 响应式和适配性测试：确保应用在不同设备和浏览器上的兼容性和性能。
（1）单元测试:测试代码库中的单个功能和模块。
（2）功能测试:通过使用模拟数据的手动用户界面测试应用程序的功能。
（3）集成测试:确保前端组件与后端服务的正确集成。
（4）系统/UI测试:使用后端服务测试集成的用户界面，以进行自动化测试和分析。
（5）性能/负载测试:验证应用程序可以处理预期的负载和规模。
（6）压力/安全测试:确保应用程序处理意外负载并评估压力下的响应。
四、前端监控系统搭建
1. 自研监控平台解决了哪些痛点？实现了什么亮点功能？
某⼀天用户：xx会议听不到声音！
⼜⼀天运营：xx会议手机端打开不了！
大家反馈的 bug，怎么都复现不出来，尴尬的要死！
如何记录项目的错误，并将错误还原出来，这是监控平台要解决的痛点之一。
总结下来就是用户的线上访问异常(B 端用户，可用性稳定性是刚需)无从跟踪如整个质量体系监控没有抓手，前端报错后端报错，全靠经验，人肉日志和用户主动反馈。
用户的访问行为/设备特征/应用性能信息完全无感知如活跃时间点（避开做发布），软 硬件系统和比例（做兼容），慢页面做优化等都无从做起。业务数据的效果无从跟踪等。
其实痛点是比较多的，为了不让自己变成瞎子，我决定借助社区方案，无论是付费，还是自研，还是实验，一定要做出一套前端产品埋点监控的工具产品来进行试用。
我最终选择社区开源方案+完全自研，几乎不用任何付费产品，进行实验性研发。
2. 相比sentry等监控方案，自研监控优势有哪些？
为什么不直接用 sentry 私有化部署，而选择自研前端监控？
这是优先要思考的问题，sentry 作为前端监控的行业标杆，有很多可以借鉴的地方，相比 sentry，自研监控平台的优势在于：
（1）可以将公司的SDk统一成一个，包括但不限于：监控SDk，埋点SDK，录屏SDK，广告SDK等。
（2）提供了更多的错误还原方式，同时错误信息可以和埋点信息联动，便可拿到更细致的用户行为栈，更快的排查线上错误。
（3）监控自定义的个性化指标：如longtask、memory 页面内存、首屏加载时间等。过多的长任务会造成页面丢帧、卡顿；过大的内存可能会造成低端机器的卡死、崩溃。
（4）统计资源缓存率，来判断项目的缓存策略是否合理，提升缓存率可以减少服务器压力，也可以提升页面的打开速度。
（5）提供了采样对比加轮询修正机制的白屏检测方案，用于检测页面是否一直处于白屏状态，让开发者知道页面什么时候白了。
3. 前端监控方案设计
3.1一个完整的前端监控平台包括三个部分：数据采集与上报、数据分析和存储、数据展示示例：
3.2监控的目的
（1）事前预警：当监控的数据达到阈值时，通知开发人员，避免大面积的错误。
（2）事后分析：通过监控信息，分析故障原因和故障发生点，防止类似情况再次发生。
（3）性能分析：采集页面关键性能指标，帮助开发者了解页面性能情况，为页面优化提供方向。
（4）提供决策：通过监控平台采集各个项目的PV、UV、健康状况、性能指标等数据，帮助决策者了解页面整体运行情况，为决策者提供数据支持。
3.3异常分析
按照5W1H 法则来分析前端异常，需要知道以下信息
（1）What，发⽣了什么错误：JS 错误、异步错误、资源加载、接口错误等。
（2）When，出现的时间段，如时间戳。
（3）Who，影响了多少用户，包括报错事件数、IP。
（4）Where，出现的页面是哪些，包括页面、对应的设备信息。
（5）Why，错误的原因是为什么，包括错误堆栈、⾏列、SourceMap、异常录屏。
（6）How，如何定位还原问题，如何异常报警，避免类似的错误发生。
3.4错误数据采集
错误信息是最基础也是最重要的数据，错误信息主要分为下面几类：
JS代码运行错误，语法错误。
异步错误等。
静态资源加载错误。
接口请求报错。
3.5错误捕获方式
1. try/catch只能捕获代码常规的运行错误，语法错误和异步错误不能捕获。
// 示例1：常规运行时错误，可以捕获 ✅
try {
let a = undefined;
if(a.length) {
console.log('111');
}
} catch (e) {
console.log('捕获到异常：', e);
}
// 示例2：语法错误，不能捕获 ❌
try {
const notdefined,
} catch (e) {
console.log('捕获不到异常：', 'Uncaught SyntaxError');
}
// 示例3：异步错误，不能捕获 ❌
try {
setTimeout(() => {
console.log(notdefined);
}, 0)
} catch (e) {
console.log('捕获不到异常：', 'Uncaught ReferenceError');
}
2. window.onerror可以捕获常规错误、异步错误，但不能捕获资源错误。
/**
* @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);
};
// 示例1：常规运行时错误，可以捕获 ✅
console.log(notdefined);
// 示例2：语法错误，不能捕获 ❌
const notdefined;
// 示例3：异步错误，可以捕获 ✅
setTimeout(() => {
console.log(notdefined);
}, 0);
// 示例4：资源错误，不能捕获 ❌
let script = document.createElement("script");
script.type = "text/javascript";
script.src = "www.test.com/index.js";
document.body.appendChild(script);
3. window.addEventListener当静态资源加载失败时，会触发 error 事件， 此时 window.onerror 不能捕获到。
<html lang="en">
<meta charset="UTF-8" />
window.addEventListener(
"error",
(error) => {
console.log("捕获到异常：", error);
},
true
);
<img src="test.cn/×××.png" />
<script src="test.cn/×××.js">
<link href="test.cn/×××.css" re…
// new Image错误，不能捕获 ❌
// new Image运用的比较少，可以自己单独处理
new Image().src = "test.cn/×××.png";
4. Promise错误Promise中抛出的错误，无法被 window.onerror、try/catch、 error 事件捕获到，可通过 unhandledrejection 事件来处理。
try {
new Promise((resolve, reject) => {
JSON.parse('');
resolve();
});
} catch (err) {
// try/catch 不能捕获Promise中错误 ❌
console.error('in try catch', err);
}
// error事件 不能捕获Promise中错误 ❌
window.addEventListener(
'error',
(error) => {
console.log('捕获到异常：', error);
},
true
);
// window.onerror 不能捕获Promise中错误 ❌
window.onerror = function (message, source, lineno, colno, error) {
console.log('捕获到异常：', { message, source, lineno, colno, error });
};
// unhandledrejection 可以捕获Promise中的错误 ✅
window.addEventListener('unhandledrejection', function (e) {
console.log('捕获到异常', e);
// preventDefault阻止传播，不会在控制台打印
e.preventDefault();
});
5. Vue错误，window.onerror 和 error 事件不能捕获到常规的代码错误
6. errorHandler 源码分析在src/core/util目录下，error.js文件
通过源码我们可以看到，vue 使用 try/catch 来捕获常规代码的报错，被捕获的错误会通过 console.error 输出而避免应用崩溃。
可以在 Vue.config.errorHandler 中将捕获的错误上报。
Vue.config.errorHandler = function (err, vm, info) {
// handleError方法用来处理错误并上报
handleError(err);
};
7. 跨域问题如果当前页面中，引入了其他域名的JS资源，如果资源出现错误，error事件只会监测到一个script error的异常。
window.addEventListener(
'error',
(error) => {
console.log('捕获到异常：', error);
},
true
);
// 当前页面加载其他域的资源，如www.test.com/index.js
;// 加载的www.test.com/index.js的代码
function fn() {
JSON.parse('');
}
fn();
只能捕获到script error的原因：
是由于浏览器基于安全考虑，故意隐藏了其它域JS文件抛出的具体错误信息，这样可以有效避免敏感信息无意中被第三方(不受控制的)脚本捕获到，因此，浏览器只允许同域下的脚本捕获具体的错误信息
解决方法：
前端script加crossorigin，后端配置 Access-Control-Allow-Origin。如果不能修改服务端的请求头，可以考虑通过使用 try/catch 绕过，将错误抛出。
8. 接口错误，接口监控的实现原理：针对浏览器内置的 XMLHttpRequest、fetch 对象，利用 AOP 切片编程重写该方法，实现对请求的接口拦截，从而获取接口报错的情况并上报。
9. 性能数据采集，谈到性能数据采集，就会提及加载过程模型图
以spa页面来说，页面的加载过程大致是这样的
包括 dns 查询、建立 tcp 连接、发送 http 请求、返回 html 文档、html 文档解析等阶段。最初，可以通过window.performance.timing来获取加载过程模型中各个阶段的耗时数据。后来 window.performance.timing 被废弃，通过PerformanceObserver来获取。旧的 api，返回的是一个 UNIX 类型的绝对时间，和用户的系统时间相关，分析的时候需要再次计算。而新的 api，返回的是一个相对时间，可以直接用来分析。
现在 chrome 开发团队提供了 web-vitals 库，方便来计算各性能数据（注意：web-vitals 不支持 safari 浏览器）
关于 FP、FCP、LCP、CLS、TTFB、FID 等性能指标的含义和计算方式，后续会解释，这里不再赘述。
10. 用户行为数据采集
用户行为包括：页面路由变化、鼠标点击、资源加载、接口调用、代码报错等行为。
设计思路：
1. 通过 Breadcrumb 类来创建用户行为的对象，来存储和管理所有的用户行为；
2. 通过重写或添加相应的事件，完成用户行为数据的采集。
3. 通过重写 pushState、replaceState 事件来监听路由变化。
4. 用户点击操作：给 document 对象添加 click 事件，并上报。
一个真实的页面中，资源加载大多数是逐步进行的，有些资源本身就做了延迟加载，有些是需要用户发生交互后才会去请求一些资源，如果我们只关注首页资源，可以在 window.onload 事件中去收集，如果要收集所有的资源，需要通过定时器反复地去收集，并且在一轮收集结束后，通过调用clearResourceTimings将 performance entries 里的信息清空，避免在下一轮收集时取到重复的资源。
3.6设计开发一个完整的监控SDK
整体架构使用发布-订阅设计模式，这样设计的好处是便于后续扩展与维护，如果想添加新的hook或事件，在该回调中添加对应的函数即可。
1. 通过添加监听事件来捕获错误，利用AOP切片编程，重写接口请求、路由监听等功能，从而获取对应的数据。
2. 创建用户行为类，stack 用来存储用户行为，当长度超过限制时，最早的一条数据会被覆盖掉，在上报错误时，对应的用户行为会添加到该错误信息中。
3. 支持图片打点上报和fetch请求上报两种方式。
4. 优先使用 requestIdleCallback，利用浏览器空闲时间上报，其次使用微任务上报。
3.7云会议监控后台演示示例
