摘要

本文围绕前端监控体系搭建展开，阐述了做前端监控的原因、监控目标、流程、埋点方案，还详细介绍了采集脚本编写涉及的错误监控、接口异常采集、白屏检测、性能指标等多方面内容，并探讨了性能监控指标、线上错误监控、内存泄漏相关问题以及 Node 的性能监控。

一、前端监控的必要性

做前端监控有诸多好处。首先能够更快地发现问题和解决问题，这有助于提升开发效率。其次可以作为做产品的决策依据，使产品决策更具科学性。还能为业务扩展提供更多可能性，拓宽业务发展方向。最后，对前端工程师来说，能提升技术深度和广度，打造简历亮点。

二、前端监控目标

（一）稳定性（stability）

1. js 错误
   • 包括 js 执行错误、promise 异常。
   • 在代码中，对于 js 运行时错误使用window.onerror捕获处理，例如：

window.addEventListener(
  "error",
  function (event) {
    // 处理逻辑
  },
  true
);

• 对于 promise 异常，当 Promise 被 reject 且没有 reject 处理器的时候，会触发unhandledrejection事件，通过window.addEventListener来监听并处理。

2. 资源错误
   • 指 js、css 资源加载异常，通过监听error事件来捕获。
3. 接口错误
   • 像 ajax、fetch 请求接口异常。
4. 白屏
   • 即页面空白，通过检测页面元素等方式来判断白屏情况。

（二）用户体验（experience）

• 包含如页面的加载时间（如 PerformanceTiming 相关指标）、性能指标（如 FP、FCP、LCP 等）、卡顿响应等方面的监控，以提升用户体验。

（三）业务（business）

• 主要涉及 pv（页面浏览量）、uv（访问某个站点的不同 ip 的人数）以及用户在每一个页面的停留时间等数据的统计和监控。

三、前端监控流程

1. 前端埋点
   • 这是数据采集的起点。
2. 数据上报
   • 将采集到的数据发送到相应的接收端，例如各公司自己的日志系统（如阿里云）。
3. 加工汇总
   • 对上报的数据进行处理，如进行分类、统计等操作。
4. 可视化展示
   • 将处理后的数据以直观的图表等形式展示出来，方便查看和分析。
5. 监控报警
   • 当数据出现异常情况时，触发报警机制，及时通知相关人员。

四、常见的埋点方案

（一）代码埋点

1. 优点
   • 精确，可以在任意时刻进行埋点，数据量全面。
2. 缺点
   • 代码工作量大，需要在代码中嵌入大量的埋点代码。

（二）可视化埋点

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

（三）无痕埋点

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

五、采集脚本编写

（一）接入日志系统

• 各公司一般都有自己的日志系统（如阿里云），用于接收数据上报。

（二）监控错误

1. 错误分类
   • 包括 js 错误（js 执行错误，promise 异常）、资源加载异常等。
2. 数据结构分析
   • 针对不同类型的错误（如 jsError、promiseError、resourceError），定义了详细的数据结构，包含标题、URL、时间戳、用户浏览器类型、错误类型、错误详情、堆栈信息等内容。
3. 实现
   • 对于资源加载错误 + js 执行错误，使用window.onerror捕获处理；对于 promise 异常，监听unhandledrejection事件进行处理。

（三）接口异常采集脚本

1. 数据设计
   • 定义了包含标题、url、时间戳、用户 Agent、大类、小类、事件类型、路径、状态码、持续时间、响应内容、参数等内容的数据结构。
2. 实现
   • 通过重写xhr的open、send方法，监听load、error、abort事件来实现接口异常的采集。

（四）白屏

1. 数据设计
   • 包含标题、url、时间戳、用户 Agent、大类、小类、空白点、分辨率、视口、选择器等内容的数据结构。
2. 实现
   • 利用elementsFromPoint方法获取屏幕水平中线和竖直中线所在的元素，根据相关逻辑判断是否为白屏并进行数据上报。

（五）加载时间（PerformanceTiming）

1. 阶段含义
   • 详细解释了如navigationStart、redirectStart、fetchStart等众多性能相关字段的含义。
2. 阶段计算
   • 针对不同阶段（如 unload、redirect、appCache 等），给出了计算方式和意义，例如 unload 耗时为unloadEventEnd - unloadEventStart。
3. 数据结构
   • 定义了包含标题、url、时间戳、用户 Agent、大类、小类、连接时间、首字节到达时间、响应时间、DOM 解析时间等内容的数据结构。
4. 实现
   • 通过performance.timing获取相关时间节点数据，并进行计算和上报。

（六）性能指标

1. 性能指标介绍
   • 包括FP（First Paint）、FCP（First Content Paint）、LCP（Largest Contentful Paint）等众多性能指标的含义和作用。
2. 数据结构设计
   • 针对不同性能指标（如 paint、firstInputDelay）定义了相应的数据结构。
3. 实现
   • 通过PerformanceObserver.observe方法观察性能条目类型的集合，获取相关性能指标数据并进行上报。

（七）卡顿响应

1. 数据设计
   • 定义了包含标题、url、时间戳、用户 Agent、大类、小类、事件类型、开始时间、持续时间、选择器等内容的数据结构。
2. 实现
   • 通过new PerformanceObserver监听longtask类型，判断entry.duration > 100来认定为长任务，使用requestIdleCallback上报数据。

（八）PV、UV、用户停留时间

1. 数据设计
   • 针对业务相关的数据（如 PV）定义了包含标题、url、时间戳、用户 Agent、大类、小类、有效类型、往返时间、屏幕等内容的数据结构。
2. 实现
   • PV 的统计通过每次进入页面上报一次数据，UV 的统计放在服务端，通过分析上报数据得出；用户停留时间通过window.addEventListener监听beforeunload事件来计算上报。

六、扩展问题

（一）性能监控指标

• 详细介绍了如FP（First - Paint 首次渲染）、FCP（First - Contentful - Paint 首次内容渲染）等众多性能监控指标的含义。

（二）前端怎么做性能监控

• 例如FP、FCP、LCP、CLS、FID、FMP可通过PerformanceObserver获取，TCP连接耗时、首字节到达时间等可通过performance.timing获取。

（三）线上错误监控怎么做

• 资源加载错误通过window.addEventListener('error')判断e.target.src || href；js 运行时错误通过window.addEventListener('error')；promise 异常通过window.addEventListener('unhandledrejection')；接口异常通过重写xhr的open、send方法，监控load、error、abort并上报。

（四）导致内存泄漏的方法，怎么监控内存泄漏

• 导致内存泄漏的方法有全局变量被遗忘、定时器脱离 Dom 的引用、闭包等。监控内存泄漏可以通过window.performance.memory（开发阶段浏览器的Performance，移动端可使用PerformanceDog）。

（五）Node 怎么做性能监控

1. 日志监控
   • 可以通过监控异常日志的变动，反映新增的异常类型和数量，还能实现pv和uv的监控。
2. 响应时间
   • 可在nginx一类的反向代理上监控，也可通过应用自己产生访问日志来监控。
3. 进程监控
   • 监控操作系统中运行的应用进程数，对于多进程架构的 web 应用，检查工作进程数。
4. 磁盘监控
   • 主要监控磁盘的用量，设置磁盘使用量上限，超过警戒值时整理日志或清理磁盘。
5. 内存监控
   • 监控服务器的内存使用情况，判断是否存在内存泄漏。
6. cpu 占用监控
   • 监控cpu的使用情况（用户态、内核态、IOWait 等），合理设置监控阈值预警。
7. cpu load 监控
   • 监控cpu平均负载，防止进程数量过多等意外情况。
8. I/O 负载
   • 主要是磁盘I/O，对于node编写的应用，虽不太可能出现I/O负载过高情况，但也应监控。
9. 网络监控
   • 对流量进行监控并设置流量上限值，关注流入流量和流出流量。
10. 应用状态监控

• 应用提供反馈自身状态信息的机制，外部监控调用反馈接口检查健康状态。

11. dns 监控

• 监控域名dns状态，避免dns故障影响产品稳定性。