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

作者：媒体转发时间：2019-04-19 21:15

字号

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

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

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

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

前端监控数据采集

在采集数据之前，首先要考虑采集什么样的数据。我们重点关注两类数据，一类是与用户体验相关的，如首屏时间、文件加载时间、页面性能等；另外是帮助我们及时感知产品上线后是否出现异常的，比如资源错误、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-oriented programming）即面向切面编程，提倡针对同一类问题进行统一处理。AOP 的核心思想是让某个模块能够重用，它采用横向抽取机制，将功能代码从业务逻辑代码中分离出来，扩展功能而不修改源代码，相比封装来说隔离得更加彻底。

下面介绍我们的具体改造方式：

// 第一阶段：我们对原生方法进行包装，调用前执行 dispatchEvent 了一个同样的事件

function aop (type) {

var source = window.history[type];

return function () {

var event = new Event(type);

event.arguments = arguments;

window.dispatchEvent(event);

var rewrite = source.apply(this, arguments);

return rewrite;

};