阿里UC百亿PV的前端监控平台:（1）概述

本文首发于知乎 《阿里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 分钟。

为何要打造前端监控系统？

前端的开发环境比较复杂，页面在不一样浏览器、微信等APP均可能展示不一样，用户的网络网速、手机性能等，也会影响页面访问速度。在移动端可能更为明显，移动端用户对页面响应延迟、页面没法使用的容忍度更低。

这些都有可能影响用户体验，从而致使业务访问量降低、用户流失等问题。

前端页面对用户体验和业务收益的重要性不言而喻。这也是咱们打造前端监控系统的初衷，但愿达到如下3点效果。

• 获取用户的使用产品的相关数据和体验
• 当前端页面出现异常时，能第一时间通知到研发负责人，定位和解决问题，及时止损
• 获取用户使用产品的真实体验，并以监控数据为基础，指导页面的优化方向。

前端监控包括哪些内容，如何打造？

通常而言，一个监控系统大体包括四个阶段：日志采集上报、日志存储、统计与分析、数据展现。 后续会从这 4个阶段展开阐述岳鹰前端监控平台的实践过程。

• 采集上报

收集性能和异常日志，在本地作必定的处理过滤等，将数据上报到服务器。

• 日志存储

后端接收前端上报日志后会鉴权、过滤、清洗后存储入库，用于用户查看分析问题；通常选择搜索数据库和时序数据库。

• 统计分析

经过预设的条件和规则，对存储的日志信息进行统计和筛选，用于用户进一步的分析规律找到问题根因。

• 数据展现

经过提供一个可视化的数据面板，让用户能够看到统计趋势数据和具体日志信息，提供丰富的分析、对比、OLAP，更快速的定位和解决问题。

岳鹰-WEB前端监控

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

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

参考资料

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