阿里UC百亿PV的前端监控平台:（2）前端采集上报

本文首发于知乎 《阿里UC百亿级PV的前端监控平台实践》 ，搬运转载请注明出处，不然追究版权责任。

阿里UC百亿PV的岳鹰全景监控平台实践 系列文章：

• 阿里UC百亿PV的前端监控平台:（1）概述
• 阿里UC百亿PV的前端监控平台:（2）前端采集上报
• 阿里UC百亿PV的前端监控平台:（3）日志存储
• 阿里UC百亿PV的前端监控平台:（4）大数据分析
• 阿里UC百亿PV的前端监控平台:（5）数据可视化

前言

Web承载的业务愈来愈复杂，用户对于Web的体验要求也愈来愈高，Web性能的优劣对业务收益也有着很是直接的影响。

本文主要介绍阿里UC百亿级PV前端监控平台， 岳鹰全景监控平台 的实践历程 - 采集上报，阅读时长 10 分钟。

采集上报

日志采集

日志采集是打造前端监控系统最关键的第一步。采集日志的准确性，是平台不漏报不误报的核心；日志信息的完整性，直接影响开发者可否获取到关键错误代码来解决问题。 对于前端而言，通常的监控指标都会包含 页面性能、JS异常，资源加载异常；而前端页面一般还须要请求后端服务器数据，所以须要把API请求失败也监控起来，从而覆盖页面访问的全过程。

• 前端异常

前端异常包括JS异常、资源加载异常、API请求异常。 其中JS异常种类繁多，分为 JS语法错误、代码运行时异常、异步执行Promise异常、跨域 Script error等。对于这些异常问题，浏览器给开发者提供了对应的API。

下面表格总结了采集前端异常问题的常见方案和优缺点。

浏览器提供的API繁多并且面向场景各有不一样，所以使用上较为繁琐，容易踩坑。通过咱们实践，以上方案能够捕获大部分常见的前端异常，效果比较符合预期。

• 页面性能

对于页面性能的采集，常见的方案是经过 performance.timing API 获取；最新的浏览器提供了更高API等级的 performance .getEntriesByType(‘navigation’) API 。

其中，值得重点关注的是浏览器对于W3C最新标准的实现，包括FP、FMP、FCP 等指标的演进，另外就是SPA页面的监控，有兴趣能够查看咱们的这篇文章 《10分钟完全搞懂前端页面性能监控》 。

• PVUV

PVUV日志采集相对简单，关键点在于采集时机，一般选择在head执行或者onload事件回调，从前端监控的角度咱们一般选择 onload 时机；另外，须要考虑SPA页面的支持。

除了上述指标日志的采集，一般咱们还会上报更多的环境信息，有利于更快速的定位问题。具体字段有 网络环境，设备型号，操做系统版本，客户端版本，前端版本，API接口版本等。

日志上报

上报的环节分为 上报前的处理，上报请求。 最简单粗暴的作法多是直接写一个AJAX请求上报，但这种方式成功率不稳定，极易在页面切换时丢失日志；而且，对于大流量站点还须要考虑 带宽节流等诉求。完整考虑，一个相对完善的上报逻辑须要包括 数据过滤、截断、采样、合并以及加密压缩等大量细节设计。

若是你的采集上报脚本部署域名和前端页面域名不一样，极可能遇到 Script Error 的问题。具体解决办法能够参考 【前端3分钟】Script Error产生的缘由和解法 。

岳鹰-WEB前端监控

阿里UC出品的 岳鹰全景监控平台 ，支持移动H五、PC站点、微信小程序以及支付宝小程序等各家小程序，PV、JS异常、页面性能等监控指标完整，已经对外开放，欢迎免费体验试用。

技术交流、第一时间掌握产品动态，欢迎联系微信小助手～

参考资料

• 评估关键渲染路径
• 移动WEB应用路线图-性能和调优
• 前端异常处理
• 监听AJAX请求
• 【前端3分钟】Script Error产生的缘由和解法