阅读 595

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

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

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

前言

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异常、页面性能等监控指标完整,已经对外开放,欢迎免费体验试用。

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

参考资料

关注下面的标签,发现更多相似文章
评论