让前端监控数据采集更高效

随着业务的快速发展，我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层，前端的表现是否可靠、稳定、好用，很大程度上决定着用户对整个产品的体验和感受。因此，对于前端的监控不容忽视。

搭建一套前端监控平台需要考虑的方面很多，比如数据采集、埋点模式、数据处理和分析、报警以及监控平台在具体业务中的应用等等。在这所有环节中，准确、完整、全面的数据采集是一切的前提，也为后续的用户精细化运营提供基础。

前端技术的日新月异给数据采集也带来了变化和挑战，传统的手工打点模式已经不能满足需求。如何在新的技术背景下让前端数据采集工作更加完善、高效，是本文讨论的重点。

前端监控数据采集

在采集数据之前，首先要考虑采集什么样的数据。我们重点关注两类数据，一类是与用户体验相关的，如首屏时间、文件加载时间、页面性能等；另外是帮助我们及时感知产品上线后是否出现异常的，比如资源错误、API 响应时间等。具体来说，我们对前端的数据采集具体主要分为：

• 路由切换 (href、hashchange、pushState)

• JsError

• 性能 (performance)

• 资源错误

• API

• 日志上报

路由切换

Vue、React、Angular 等前端技术的快速发展使单页面应用盛行。我们都知道，传统的页面应用是用一些超链接来实现页面切换和跳转的，而单页面应用是使用各自的路由系统来管理前端的每一个页面切换，例如 vue-router、react-router 等，跳转时仅刷新局部资源 ，js、css 等公共资源只需要加载一次，这就使传统网页进入离开的方式只有第一次打开能被记录。单页应用后续所有路由切换的方式有两种，一种是 Hash，一种是 HTML5 推出的 History API。

1. href

href 为页面初始化的第一次进入，这里只需要单纯上报「进入页面」事件即可。

2. hashchange

Hash 路由一个明显的标志是带有「 # 」。Hash 的优势是兼容性更好，但问题在于 URL 中一直存在「 # 」并不美观。我们主要通过监听 URL 中的 hashchange 来捕获具体的 hash 值进行检测。

window.addEventListener('hashchange', function() {
    // 上报【进入页面】事件
}, true)

需要注意的是，在新版 vue-router 中如果浏览器支持 history，即使 mode 选择 hash 也会优先选择 history 模式，虽然表现形式暂时还是 # 号，但实际上是模拟的，所以千万不要认为自己在 mode 选择了hash 就一定会是 hash。

3. History API

History 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法进行路由切换，是目前主流的无刷新切换路由方式。与 hashchange 只能改变 # 后面的代码片段相比，History API （pushState、replaceState） 给了前端完全的自由。

PopState 是浏览器返回事件的回调，但是更新路由的 pushState、replaceState 并没有回调事件，因此，还需要分别在 history.pushState() 和 history.replaceState() 方法里处理 URL 的变化。在这里，我们运用到了一种类似 Java 的 AOP 编程思想，对 pushState 和 replaceState 进行改造。

AOP （Aspect-