前端监控

前端质量监控包括：PC Web 监控、H5 监控、RN/Weex 监控、小程序监控等。本章主要围绕 Web 技术简介常用的客户端监控系统的设计与实现。

前端监控往往是承接自端到端测试，譬如合成测试监控（Synthetic Tests），所谓合成测试监控（SYN）就是在一个模拟场景里提交一个需要做质量审计的页面，通过一系列的工具、规则去运行你的页面，提取一些质量指标，并最终得出一份审计报告。最典型的合成测试监控工具就是大名鼎鼎的 Google Lighthouse。

合成测试监控可以帮助我们发现一些明显的前端质量问题（如图片未压缩、没有设置合理的静态资源缓存策略、页面是否可访问等），在分布式部署的前提下还可以将上述能力扩展到全球多个节点同时监控。由于是模拟运行环境，并不能反映用户真实的数据，因此在做前端监控时，一般还会搭配真实用户监控能力一起实现。

真实用户监控（Real User Monitoring）所谓真实用户监控（RUM），就是用户在我们的页面上访问，访问过程中就会产生各种各样的指标，我们在用户访问结束的时候，把这些指标上传到我们的日志服务器上，进行数据的提取清洗加工，最后在监控平台上进行展示的一个过程。RUM 很好的补充了合成测试监控因为模拟导致的无法还原真实场景的问题。对于访问量比较大的业务（或页面）来说，通过 RUM 获取到的指标基本可以客观反映该业务（或页面）的线上质量情况。当然，RUM 也不是完美无缺的。因为数据需要在用户访问页面的过程中采集，那数据传输在某些性能和带宽比较敏感的场景就不能采集并上传大量的数据。

监控的指标与维度

前端质量监控平台一般从页面性能（测速）、页面稳定性（JS Error）和外部服务调用成功率（API）这三个方面监测页面的健康度。

• JS 错误：错误名称、错误堆栈、JS 错误数量、JS 错误率、影响用户数、高频错误。

• 页面性能指标：首次渲染、首屏时间、首次可交互、DOM Ready、页面完全加载时间、DNS/TCP 连接等区间耗时更详细的 Web 性能指标可以参阅性能优化章节。

• API：API 名称、API 成功率、常见 API 返回码、API 请求耗时等。

通常的分布维度包括但不限于地理、设备、浏览器、网络、应用版本等。