为你的前端页面量身打造一套实时监控指标

背景

今年年初，我进入一个基于React开发的新项目，负责整个前端的开发工做。为了保证总体的质量和用户体验，咱们须要在项目上线时对应用进行稳定性和性能监控，确保线上发现异常时可以被第一时间发现和解决。css

工欲善其事，必先利其器，这时候咱们须要一个好轮子。对于前端页面的监控，一般包括页面的访问性能、页面JS错误、资源加载错误，以及后端API的请求状况。前端

UC研发效能团队有一个叫作【岳鹰】的WEB高可用监控产品，支持H五、小程序、Flutter监控，监控指标比较齐全，并且支持线上海量访问的实时监控，因而决定试用一把。vue

下面我就讲讲我怎么在新项目里面设定业务的性能/体验指标，而且经过监控工具来分析、优化最终达成目标。web

Step01，一行代码搞定前端监控

体验【岳鹰】的Demo项目，大概了解岳鹰提供的监控和分析功能，我比较关心的功能都具有：算法

页面性能监控，并且支持性能趋势 + 性能数据样本分布，对于分析长尾的慢访问比较有帮助
JS错误监控，而且支持source map还原，查看线上混淆的错误代码很方便
API错误监控，不少时候接口错误也会致使前端报错，支持API错误码、响应内容很重要

而且，接入也很简单，一行代码就能够完成。下面是岳鹰的前端监控功能截图，有兴趣能够看看。小程序

Step02，发现线上性能问题

接入【岳鹰】以后，能够随时查看项目的线上访问性能，JS错误之类也会实时报警，真的是心中有数啊；内心只有一个字，【稳】。后端

可是项目上线一周以后，开始收到客服反馈的问题，有很多用户反馈页面打开页面比较慢、裂图（因为我这个项目是海外的活动运营业务，页面内容包含一些运营和动画图片，看不了图片是很致命的体验问题）。缓存

收到问题反馈以后，第一时间就想要看看线上的实际状况，看可否找到问题根因。而从岳鹰平台展现的实际页面性能，页面的加载速度其实并不差，页面加载耗时均值在1S左右（作过海外应用的同窗应该知道这个性能不差了）。markdown

研究了【岳鹰】页面性能指标的采集算法，发现页面性能的统计是 loadEventStart - fetchStart ，对于我使用React的这个项目，页面主流程基本都是在 load 以前以后，所以并不能很好的反映真实性能状况。app

本身动手丰衣足食，这时候就须要本身来作页面加载流程的耗时统计了。那岳鹰支持用户本身上报埋点吗？一看还真支持。

Step03，自定义监控解决问题

【自定义监控】按照自定义监控协议上报便可实现一个新的监控指标，可用于业务错误、业务关键节点等监控场景。

这是自定义监控的官方介绍，恰好知足个人监控需求。简单看下岳鹰自定义监控能力，支持如下几大类。

"次数"型监控

如：xx包下载失败次数、xxsdk初始化次数、xx按钮点击次数、xx签到异常次数...

"平均值"型的监控

如：xx文件加载耗时、xx业务页面初始化耗时、xx小程序启动耗时、xx组件包大小...

"率"型的监控

如：包下载成功\失败率、缓存命中率、页面唤起客户端成率...

分组归类

如：监控多个包时，按包统计数据、小程序启动耗时、按小程序id统计数据...

自定义区间分布

如：启动耗时在1-2s、2-5s的分布...

业务自定义字段

上报一些用于辅助业务分析的字段，如：requestId、fileName...

支持上报，还要平台支持统计分析才行。和其余监控功能(如：JS异常、页面性能)同样，自定义监控也提供了趋势分析、维度分析、高级查询、报警等功能（心里一阵窃喜）。

监控项设计

这里结合咱们的页面流程讲一下，对于用户访问页面有哪些关键的事件。

页面加载的第一步，会有一个过渡的 loading svg 动画，核心是首屏的3个模块，完成渲染即一个完整周期；也就是说，只有保证首屏3个模块成功加载，才能让用户体验到完整、流畅的页面。

页面流程示意以下。

基于这个页面流程，我设计了数据加载成功率、加载耗时这2个指标。利用岳鹰的自定义监控，我能够建立一个叫作「体感加载时长」的监控项，经过JS探针把这2个指标数据上报到平台去。在肯定数据采集时机以后，使用以下代码上报一条自定义数据。嗯，又是一行代码搞定，妥妥的。

category: 100,
  msg: '体感加载时长',
  w_succ: 1,// 初始化数据成功,不成功是为0
  wl_avg1: 94 // end - start （ms）
})
复制代码

监控效果

每次版本迭代后，均可以在平台观察实时数据与汇总状况，实时了解用户对当前页面的直观等待感觉及做为页面优化依据。对比上线初版的页面性能数据，我经过自定义监控项把用户的真实访问耗时统计出来了，发现用户体感耗时3S+（我滴神。。）。

基于线上真实数据，才得以进一步优化把用户体感耗时降到1S左右。具体作的事情包括把一些不属于主流程的module放到首屏以后加载、大图片优化、JS裁剪等等（具体内容这里不展开了，有兴趣之后再发文介绍）。

体感耗时趋势

数据成功率趋势

除了上述监控指标，咱们还利用自定义打点来记录script with module、vw css unit、intersectionObserver等特性的支持度（app是使用系统webview)，以及一些其余的业务打点。

例如，在监控一段时间后发现 IntersectionObserver 实际支持程度达到 96%，根据这个线上结论，终于能够放心的把 100k 的 polyfill 重整为降级的替代方案。相似的case还有不少，这里就不赘述了。总之，监控whatever you want！

总结：怎么为你的业务量身打造线上监控

在这个项目摸索的过程当中，沉淀了一些经验，跟你们分享下我设计自定义监控的心得，大体有如下几种场景，以及结合岳鹰的使用技巧。

场景1：纯次数监控

如：监控某个(些)sdk初始化错误次数如图5所示，建立监控项时，只须要填写监控项名称、获得监控项代码就能够了进行以下所示的打点监控了

wpk.report({
  category: 103, //平台建立时，生成的code
  msg: 'sdk1'
})
复制代码

若是同时想监控多个sdk初始化项目，那么也无需建立多个监控项，直接把sdk的名称做为msg的值进行上报便可知足你的需求
复制代码

场景2：次数 + 耗时监控

如：某个重要的页面访问次数和从路由从建立到绘制完成耗时状况监控。如图5所示，相比场景1，须要打开计算均值的开关，并给它取个别名叫页面绘制耗时，打点代码则以下所示。

wpk.report({
  category: 103, //平台建立时，生成的code
  msg: '领取红包页',
  wl_avg1: 43// 页面绘制耗时；如vue中mounted的时间减去beforeCreate的时间获得耗时
})
复制代码

使用wl_avg1上报页面绘制耗时
复制代码

场景3：次数 + 耗时 + 成功率监控

如：领取红包的次数、领取成功率、领取红包耗时的监控。

如图5所示，比起场景2，建立监控项时，须要打开计算(成功)率的开关，并为其起个别名好比就叫作领取成功率，打点代码以下所示。

// 领取红包成功
wpk.report({
  category: 103, //平台建立时，生成的code
  msg: '领取5元红包',
  wl_avg1: 43,// 领取红包接口耗时
  w_succ: 1
})
// 领取红包失败
wpk.report({
  category: 103, //平台建立时，生成的code
  msg: '领取5元红包',
  wl_avg1: 43,// 领取红包接口耗时
  w_succ: 0
})
复制代码

若是还有 ”10元红包“、”15元红包“等多种分类，msg的值直接填写红包分类便可；若是想监控的是失败率，把监控项中 ”领取成功率“改成”领取失败率“，上报日志时领取成功w_succ的值设为0，而领取失败w_succ的值设为1便可

场景4：次数 + 耗时 + 成功率 + 自定义字段

仍是以领取红包为例，当领取失败时，不必定是接口错误，多是业务上的错误，好比：已经领取过、没有资格、已被送到小黑屋等。

如图5所示，相对于场景3，须要在c1~c5中（按需）填上相应的别名，打点代码以下所示。

// 领取红包成功
wpk.report({
  category: 103, //平台建立时，生成的code
  msg: '领取5元红包',
  wl_avg1: 43,// 领取红包接口耗时
  w_succ: 1,
  c1: 'success'
})
// 领取红包失败
wpk.report({
  category: 103, //平台建立时，生成的code
  msg: '领取5元红包',
  wl_avg1: 43,// 领取红包接口耗时
  w_succ: 0,
  c1: '您已经领取过'
})
复制代码

在自定义字段中上报了你的业务信息后，须要时，既能够做为高级查询的查询条件，又能够按照自定义字段的值进行聚合（groupBy）

总结

通过一轮项目实践，总结一般应用会有两方面的监控诉求（技术），一方面是通用的技术指标，例如性能、JS异常等；另外一方面是结合业务场景的监控项（在个人这个项目里面，有图片加载耗时、活动环节的监控等）。在有了清晰的监控需求，明确监控指标以后，基本均可以经过岳鹰快速实现，真正作到事半功倍，对线上业务的运行状况了然于胸。

访问岳鹰全景监控平台