前端监控究竟有多重要？
为什么要有前端监控？
一个很现实的原因是bug是不可能被全部测试出来的，由于成本和上线档期的考虑，测试无法做到“面面俱到”，即使时间充裕也总会有这样或那样的bug埋藏在某个角落。
所以一个可靠的前端监控系统可以帮助我们化被动为主动，不再被动的等待客服来找，而是在问题出现时开发人员可以第一时间知道并解决。并且我们还可以通过监控系统获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化的方向。
常见的前端监控
前端监控系统大体可以分为四部分
- 异常监控
- 用户数据监控
- 性能监控
- 异常报警
用户数据监控
数据监控，就是监听用户的行为，可以帮助我们评估和改进用户在使用网站时的体验：
- PV:PV(page view)：即用户访问特定页面的次数，也可以说是页面的浏览量或点击量，
- UV：访问网站的不同个体或设备数量，而不是页面访问次数
- 新独立访客：当日的独立访客中，历史上首次访问网站的访客为新独立访客。
- 跳出次数：跳出指仅浏览了1个页面就离开网站的访问(会话)行为。跳出次数越多则访客对网站兴趣越低或站内入口质量越差。
- 来访次数：由该来源进入网站的访问（会话）次数。
- 用户在每一个页面的停留时间
- 用户通过什么入口来访问该网页
- 用户在相应的页面中触发的行为
- 网站的转化率
- 导航路径分析
统计这些数据是有意义的，我们可以清晰展示前端性能的表现，并依据这些监控结果来进一步优化前端性能。例如，我们可以改善动画效果以在低版本浏览器上兼容，或者采取措施加快首屏加载时间等。这些优化措施不仅可以提高转化率，因为快速加载的网站通常具有更高的转化率，还可以确保我们的网站在多种设备和浏览器上都表现一致，以满足不同用户的需求。最终达到，改善用户体验，提供更快的页面加载时间和更高的性能，增强用户满意度，降低跳出率的目的。
性能监控
性能监控是一种用于追踪和评估网站和性能的方法。它专注于用户在浏览器中与网站互时的性能体验
- 首次绘制（FP）： 全称 First Paint，标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点
- 首次内容绘制（FCP）：全称 First Contentful Paint，标记的是浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至
<canvas>元素。 - 首次有效绘制（FMP）：全称 First Meaningful Paint，标记的是页面主要内容绘制的时间点，例如视频应用的视频组件、天气应用的天气信息、新闻应用中的新闻条目。
- 最大内容绘制（LCP）：全称 Largest Contentful Paint，标记在可视区“内容”最大的可见元素开始绘制在屏幕上的时间点。
- 白屏时间
- http 等请求的响应时间
- 静态资源整体下载时间
- 页面渲染时间
- 页面交互动画完成时间
异常监控
由于产品的前端代码在客户端的执行过程中也会发生异常，因此需要引入异常监控。及时的上报异常情况，这样可以避免线上故障的发生。虽然大部分异常可以通过
try catch的方式捕获，但是比如内存泄漏以及其他偶现的异常难以捕获。
常见的需要监控的异常包括：
- Javascript 的异常监控：捕获并报告JavaScript代码中的错误，如未定义的变量、空指针引用、语法错误等
- 数据请求异常监控：监控Ajax请求和其他网络请求，以便识别网络问题、服务器错误和超时等。
- 资源加载错误：捕获CSS、JavaScript、图像和其他资源加载失败的情况，以减少页面加载问题。
- 跨域问题：识别跨域请求导致的问题，如CORS（跨源资源共享）错误。
- 用户界面问题：监控用户界面交互时的错误，如用户界面组件的不正常行为或交互问题
通过捕获和报告异常，开发团队可以快速响应问题，提供更好的用户体验，减少客户端问题对业务的不利影响
异常报警
前端异常报警是指在网站中检测和捕获异常、错误以及问题，并通过各种通知方式通知开发人员或团队，以便他们能够快速诊断、分析和解决问题。
常见的异常报警方式
邮件通知：通过邮件将异常信息发送给相关人员，通常用于低优先级的问题。
短信或电话通知：通过短信或电话自动通知相关人员，通常用于紧急问题或需要立即处理的问题。
即时消息：使用即时通讯工具如企业微信 飞书或钉钉发送异常通知，以便团队及时协作。
日志和事件记录：将异常信息记录到中央日志，或者监控中台系统，以供后续分析和审计。
报警级别和策略：
异常报警通常有不同的级别和策略，根据问题的紧急性和重要性来确定通知的方式和频率。例如，可以定义以下报警级别：
紧急报警：用于严重的问题，需要立即处理，通常通过短信或电话通知。
警告报警：用于中等级别的问题，需要在短时间内处理，可以通过即时消息或邮件通知。
信息报警：用于一般信息和低优先级问题，通过邮件或即时消息通知。
静默报警：用于临时性问题或不需要立即处理的问题，可以记录到日志而不发送通知。
异常报警是确保系统稳定性和可用性的重要机制。它能够帮助组织及时发现和解决问题，减少停机时间，提高系统的可靠性和性能，从而支持业务运营。异常报警有助于快速识别和响应问题，减少停机时间，提高系统的可用性和性能
介绍完了前端监控的四大部分，现在就来聊聊前端监控常见的几种监控方式。
SDK设计（埋点方案）
前端埋点是一种用于收集和监控网站数据的常见方法
手动埋点：
手动埋点也称为代码埋点，是通过手动在代码中插入埋点代码（SDK 的函数）的方式来实现数据收集。像腾讯分析（Tencent Analytics）、百度统计（Baidu Tongji）、诸葛IO（ZhugeIO）等第三方数据统计服务商大都采用这种方案，这种方法的优点是：
- 灵活：开发人员可以根据需要自定义属性和事件，以捕获特定的用户行为和数据。
- 精确：可以精确控制埋点位置，以确保收集到关键数据。
然而，手动埋点的缺点包括：
- 工作量大：需要在代码中多次插入埋点代码，工程量较大。
- 沟通成本高：需要开发、产品和运营之间的频繁沟通，容易导致误差和延迟。
- 更新迭代成本高：每次有埋点更新或漏埋点都需要重新发布应用程序，成本较高。
可视化埋点：
可视化埋点通过提供可视化界面，允许用户在不编写代码的情况下进行添加埋点。这种方法的优点是：
- 简单方便：非技术人员也可以使用可视化工具添加埋点，减少了对技术团队的依赖。
- 实时更新：可以实时更新埋点配置，无需重新上传网站。
然而，可视化埋点的缺点包括：
- 可定制性受限：可视化工具通常只支持有限的埋点事件和属性，无法满足所有需求。
- 对控件有限制：可视化埋点通常只适用于特定的UI控件和事件类型。
无埋点：
无埋点是一种自动收集所有用户行为和事件的方法，然后通过后端过滤和分析以提取有用的数据。这种方法的优点是：
- 全自动：无需手动埋点，数据自动收集，降低了工程量，而且不会出现漏埋和误埋等现象。
- 全面性：捕获了所有用户行为，提供了完整的数据集。
然而，无埋点的缺点包括：
- 数据量大：数据量庞大，需要后端过滤和处理，可能增加服务器性能压力。
- 数据处理复杂：需要处理大量原始数据，提取有用的信息可能需要复杂的算法和逻辑。
来源：juejin.cn/post/7280430881964638262
