1，为什么要有前端监控？

一个很现实的原因是bug是不可能被全部测试出来的，由于成本和上线档期的考虑，测试无法做到“面面俱到”，即使时间充裕也总会有这样或那样的bug埋藏在某个角落。

一个稳健的前端监控系统可以帮助我们从被动转为主动，不再等待客服来寻求帮助，而是在问题出现时开发人员可以第一时间得知并解决。通过监控系统，我们还可以获取用户行为数据，追踪产品在用户端的使用情况，并以监控数据为基础，明确产品优化的方向。

2，前端监控的目标

提升用户体验
更快的发现发现异常、定位异常、解决异常
了解业务数据，指导产品升级——数据驱动的思想：获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化的方向。

3，前端监控的分类

前端监控系统大体可以分为四部分

用户数据监控
性能监控
异常监控
异常报警

用户数据监控

数据监控，就是监听用户的行为，可以帮助我们评估和改进用户在使用网站时的体验：

常见的数据监控包括：

指标名称	定义或说明
PV (Page View)	用户访问特定页面的次数，即页面的浏览量或点击量。
PV上报	用于业务分析，可设置告警以及时发现问题。
PV波动告警	当PV的波动轨迹出现异于正常的波动时触发告警，适用于波动变化具有一定规律性的页面。
PV最小值阈值告警	当PV值低于某个阈值时触发告警。
UV (Unique Visitor)	访问网站的不同个体或设备数量。
新独立访客	当日的独立访客中，历史上首次访问网站的访客。
跳出次数	仅浏览了1个页面就离开网站的访问（会话）行为。跳出次数越多，可能表示访客对网站兴趣较低或站内入口质量较差。
来访次数	由该来源进入网站的访问（会话）次数。
用户在每一个页面的停留时间	衡量用户在页面上的停留时长。
用户通过什么入口来访问该网页	分析用户是通过什么途径或方式找到并访问网页。
用户在相应的页面中触发的行为	分析用户在页面上的行为模式。
网站的转化率	衡量网站用户完成特定目标（如购买、注册等）的比率。
导航路径分析	分析用户在网站上的行动路径，了解用户行为和偏好。

统计这些数据是有意义的，比如我们知道了用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面，增加广告推送等等。

对于用户数据监控的方案设计

前端埋点是一种用于收集和监控网站数据的常见方法

代码埋点

手动埋点也称为代码埋点，是通过手动在代码中插入埋点代码（SDK 的函数）的方式来实现数据收集。像腾讯分析（Tencent Analytics）、百度统计（Baidu Tongji）、诸葛IO（ZhugeIO）等第三方数据统计服务商大都采用这种方案，这种方法的优点是：

灵活：开发人员可以根据需要自定义属性和事件，以捕获特定的用户行为和数据。
精确：可以精确控制埋点位置，以确保收集到关键数据。

然而，手动埋点的缺点包括：

工作量大：需要在代码中多次插入埋点代码，工程量较大。
沟通成本高：需要开发、产品和运营之间的频繁沟通，容易导致误差和延迟。
更新迭代成本高：每次有埋点更新或漏埋点都需要重新发布应用程序，成本较高。

可视化埋点

可视化埋点通过提供可视化界面，允许用户在不编写代码的情况下进行添加埋点。这种方法的优点是：

简单方便：非技术人员也可以使用可视化工具添加埋点，减少了对技术团队的依赖。
实时更新：可以实时更新埋点配置，无需重新上传网站。

然而，可视化埋点的缺点包括：

可定制性受限：可视化工具通常只支持有限的埋点事件和属性，无法满足所有需求。
对控件有限制：可视化埋点通常只适用于特定的UI控件和事件类型。

无痕埋点（全埋点或者无侵入式埋点）

无埋点是一种自动收集所有用户行为和事件的方法，然后通过后端过滤和分析以提取有用的数据。这种方法的优点是：

全自动：无需手动埋点，数据自动收集，降低了工程量，而且不会出现漏埋和误埋等现象。
全面性：捕获了所有用户行为，提供了完整的数据集。

然而，无埋点的缺点包括：

数据量大：数据量庞大，需要后端过滤和处理，可能增加服务器性能压力。
数据处理复杂：需要处理大量原始数据，提取有用的信息可能需要复杂的算法和逻辑。

无痕埋点主要通过以下几种方法和技术实现：

事件监听：通过监听全局事件（如点击、输入、滚动等），捕获用户在页面上的所有操作。事件监听可以使用事件冒泡或事件捕获模式，以确保能够捕获到所有事件。

事件代理：在全局范围内（例如 document 或 window 对象）设置事件代理，捕获所有目标元素的事件。这样可以避免为每个元素单独设置事件监听器，降低性能开销。

DOM 节点信息收集：在事件处理函数中，收集触发事件的元素信息（如标签名、ID、类名等），以及用户操作的相关信息（如点击位置、输入内容等）。

用户信息收集：通过浏览器的 API（如 navigator 对象）或者第三方库，收集用户的设备信息、操作系统、浏览器版本等。

页面信息收集：收集页面的 URL、标题、加载时间等信息，用于分析用户在不同页面的行为。

数据上报：将收集到的事件信息、用户信息、页面信息等数据上报给服务器，进行数据存储和分析。

数据处理与分析：对上报的数据进行清洗、筛选、聚合等处理，以便进行数据分析和挖掘。

通过以上方法和技术，无痕埋点可以自动捕获页面上的所有用户行为事件，无需手动插入埋点代码。这样可以降低开发成本，提高数据收集的全面性和准确性。然而，无痕埋点也存在一定的局限性，如数据量较大、可能包含冗余信息等，需要根据具体需求进行权衡。

2，性能监控

性能监控是一种用于追踪和评估网站和性能的方法。它专注于用户在浏览器中与网站互时的性能体验

指标名称	定义或说明
首次绘制（FP）	浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点。
首次内容绘制（FCP）	浏览器渲染来自 DOM 的第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 `<canvas>` 元素。
首次有效绘制（FMP）	页面主要内容绘制的时间点，例如视频应用的视频组件、天气应用的天气信息、新闻应用中的新闻条目。
最大内容绘制（LCP）	可视区“内容”最大的可见元素开始绘制在屏幕上的时间点。
白屏时间	页面从完全空白到开始渲染内容的时间。
HTTP 请求的响应时间	HTTP 请求从发起到接收到第一个字节的时间。
静态资源整体下载时间	页面所有静态资源（如图片、CSS、JavaScript 文件）下载完成的时间。
页面渲染时间	页面从开始加载到完全渲染完成的时间。
页面交互动画完成时间	页面交互动画从开始到完成的时间。

通过捕获和报告异常，开发团队可以快速响应问题，提供更好的用户体验，减少客户端问题对业务的不利影响更多可以参考：前端性能监控及优化方案

3，异常监控

异常监控是确保网站或应用稳定性的关键环节，它涉及对浏览器执行JavaScript代码时可能遇到的各种错误进行监控。以下是对异常监控策略的优化描述：

1. JavaScript运行时错误

使用 window.onerror 来拦截大部分错误，它能捕获详细的错误信息。

/**
 * @param {String}  errorMessage   错误信息
 * @param {String}  scriptURI      出错的文件
 * @param {Long}    lineNumber     出错代码的行号
 * @param {Long}    columnNumber   出错代码的列号
 * @param {Object}  errorObj       错误的详细信息，Anything
 */
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
    // code..
}

对于跨域错误，添加 crossorigin 属性到 <script> 标签以获取更多信息。

image 和 script 标签都有 crossorigin 参数，它的作用就是告诉浏览器，我要加载一个外域的资源，并且我信任这个资源。
<script src="http://localhost/test.js" crossorigin></script>

对于不显示调用栈的浏览器，可以通过 arguments.callee.caller 递归获取栈信息。

2. 异步代码错误

对于Promise，使用 .catch() 方法捕获错误。
对于 async/await，使用 try/catch 结构来捕获错误。

3. 压缩代码调试

线上代码通常是压缩的，因此在打包时应生成 sourceMap 文件以便于调试。

SourceMap 是一个信息文件，存储着源文件的信息及源文件与处理后文件的映射关系。在定位压缩代码的报错时，可以通过错误信息的行列数与对应的 SourceMap 文件，处理后得到源文件的具体错误信息。

4. 错误上报

捕获的错误需要上传到服务器，通常通过设置 <img> 标签的 src 属性来发起一个请求。

5. 接口信息错误

接口异常相对简单，通过监控特定的错误状态码来实现。
接口异常上报可以帮助开发人员迅速定位并修复问题。

6. 事件监听器

使用 window.addEventListener('error', () => {}) 来捕获资源加载错误。
同时，它也能捕获JS运行时错误，但为避免重复上报，只有在 event.srcElement 是 HTMLScriptElement、HTMLLinkElement 或 HTMLImageElement 的实例时才进行数据采集。

7. 错误处理体会

onerror 主要用于捕获意料之外的错误。
try-catch 适用于监控预知情况下的错误，结合使用这两种方法可以更高效地处理错误。

4，异常报警

前端异常报警是指在网站中检测和捕获异常、错误以及问题，并通过各种通知方式通知开发人员或团队，以便他们能够快速诊断、分析和解决问题。

常见的异常报警方式

邮件通知：通过邮件将异常信息发送给相关人员，通常用于低优先级的问题。
短信或电话通知：通过短信或电话自动通知相关人员，通常用于紧急问题或需要立即处理的问题。
即时消息：使用即时通讯工具如企业微信飞书或钉钉发送异常通知，以便团队及时协作。
日志和事件记录：将异常信息记录到中央日志，或者监控中台系统，以供后续分析和审计。

报警级别和策略：异常报警通常有不同的级别和策略，根据问题的紧急性和重要性来确定通知的方式和频率。例如，可以定义以下报警级别：

紧急报警：用于严重的问题，需要立即处理，通常通过短信或电话通知。
警告报警：用于中等级别的问题，需要在短时间内处理，可以通过即时消息或邮件通知。
信息报警：用于一般信息和低优先级问题，通过邮件或即时消息通知。
静默报警：用于临时性问题或不需要立即处理的问题，可以记录到日志而不发送通知。

异常报警是确保系统稳定性和可用性的重要机制。它能够帮助组织及时发现和解决问题，减少停机时间，提高系统的可靠性和性能，从而支持业务运营。异常报警有助于快速识别和响应问题，减少停机时间，提高系统的可用性和性能

深入理解前端监控，全网最全介绍前端监控的文章