pv实现前趋图_阿里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出品的 岳鹰全景监控平台 ，支持移动H5、PC站点、微信小程序以及支付宝小程序等各家小程序，PV、JS异常、页面性能等监控指标完整，已经对外开放，欢迎免费体验试用。

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

微信号 effirst-assistant

参考资料

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