健康码如何通过监控提升小程序的用户体验？

背景

“您好！请出示一下您的健康码。”

从2020年疫情爆发以来，全国上下均处在疫情防控常态化期间，“健康码”已经成为各地大量人员流动场所进出的重要凭证。

全国各地的大街小巷，公共场合，随时随地都要打开健康码，如此大的请求量？如此大的用户数据？是谁在背后为健康码保驾护航呢？

真相：健康码在前扑汤蹈火，腾讯云前端性能监控（RUM）在后保驾护航。

下列我们将会详细介绍某省健康码如何使用 RUM 实现小程序监控，完成监控覆盖、处理问题和运行保障等。

图片

为什么选择 RUM?

“客户反馈小程序白屏了！”。

收到该用户反馈后。历经数小时，工程师才定位并处理了问题。这不禁让人思考，该如何提高定位问题的效率？

某省健康码小程序服务自监控，哪一个监控产品操作可覆盖这些服务自监控场景呢? 对于一个日活超千万的服务，存在一些服务异常是不可避免的。如何能快速发现并有效分析定位问题？

我们再回归问题本质，在此时需要的是一种更符合小程序场景的前端监控方案，能够以业务场景为导向的监控覆盖，保障小程序的正常运行。

我们再分析小程序一般会存在的问题：

1. 加载时间慢：小程序如果入口需要加载比较多的信息，间接导致首屏接口请求多，加载时间慢。整个小程序的首次冷启时间可能超过 5s，而加载时长又直接影响到小程序的到达率。根据《High performance iOS Apps》中用研结论，25% 的用户在应用启动时间超过 3s 时会放弃使用。
2. 卡顿/闪退：一般有历史查询类场景会遇到长列表页面查询卡顿，滚动不流畅，随着历史消息加载，小程序出现闪退等问题。

这些问题带来了极低的用户任务完成率，无法满足用户诉求，极大降低用户留存。

接下来我们再分析一下小程序启动流程图，红色框内为我们需要关注的环节，那么什么前端监控产品能覆盖这些环节的监控呢？

经过大家多轮对前端监控产品对比和商议，决定使用腾讯云前端性能监控 RUM（RUM 现已支持Web、小程序、H5，APP 在开发中），那么该健康码研发团队为什么会选择 RUM 呢？

1. 场景化：RUM 支持按照网络类型、运营商、终端类型等采集分析用户请求、操作异常和页面性能等场景；
2. 低成本：通过下载引入 SDK 即可完成接入，且错误异常、部分操作日志和性能及业务指标默认采集，即开箱即用；
3. 功能丰富：支持了日志上报、错误收集、性能监控、资源测速、接口测速和智能告警等，告警方式与腾讯云基础监控（云监控）集成统一；
4. 自定义操作：除默认操作监控外，RUM 支持客户自定义事件、自定义测速和自定义日志上报等。

确定选用 RUM 后，某省健康码项目组快速联系上了 RUM 团队，并开始安装和使用 RUM。

安装与初始化

安装与初始化仅需两步：

1. 安装：执行命令下列命令，在 npm 仓库安装 aegis-mp-sdk；

   $ npm install --save aegis-mp-sdk

2. 初始化：参考下列步骤新建一个 Aegis 实例，传入相应的配置，初始化 SDK。

import Aegis from 'aegis-mp-sdk';const aegis = new Aegis({id: "pGUVFTCZyewxxxxx", // 项目keyuin: 'xxx', // 用户唯一ID（可选）reportApiSpeed: true, // 接口测速spa: true, // 页面切换的时候上报pv});

经过简单操作后某省健康码就轻松实现了 RUM 的接入。

如何发现和处理问题？

一、白屏问题处理

接入 RUM 后，同样出现的客户反馈白屏情况，基于反馈信息并使用 RUM 日志查询功能，即刻就定位到了异常出错点。

如上图所示，RUM 默认将错误异常全量上报，经过日志上报查询，可分钟级快速定位分析到问题。

二、JS/ Ajax等问题处理

除上述客户主动反馈白屏快速定位分析问题外，也可主动分析发现一些如 JS 或 Ajax 等的问题并做处理。当服务主要依赖明细日志时，很难及时对服务异常情况有总览或主动发现效果。RUM 将异常错误全量上报，并将错误信息按类型汇总统计，使 JS、Ajax 错误问题一目了然。

针对异常还可做不同维度的占比分析，更加精准的知道异常分布情况（网络类型、地域、机型等）。

三、指标监控告警快速知道异常

已知的场景可主动通过“告警策略”快速配置告警，只要场景指标异常就可主动触发告警。

RUM 还有哪些应用场景？

RUM 提供了日志上报、错误收集、性能监控、资源测速、接口测速和智能告警等功能，聚焦不同的业务应用场景，让您快速实现前端性能监控。

一、业务主动监控

RUM 可支持的主动监控包括业务大屏观察和告警策略配置，主动监控即发现问题。业务应用性能汇总和异常信息汇总等，在服务变更或业务放量时可主动留守观察，一旦服务性能或业务指标发送突变可及时发现。

已知场景通过配置告警策略主动告警覆盖，出现异常时可及时触发并触达告警。

二、故障定位与复盘

主动监控发现问题或有客户反馈问题后，需要做的是快速有效的分析问题。RUM 默认会将所有异常错误采集上报，分析异常错误信息或日志数据来分析定位问题。

三、DevOps集成与强化

DevOps 系统用于服务的发布、变更、流程管理、流量迁移、监控报警等，如服务发版如果观察发现异常那么需做版本回滚，如广州地域活动带来请求量的上涨那可将广州的部分流量迁移到上海等其他地域。这些操作的判断都是基于量化的性能或监控数据来支撑的，因此，RUM 的监控是DevOps 有效的集成与强化。

四、性能优化

使用 RUM“页面性能”有效分析分析页面的相关性能情况，并且可按不同维度做汇总分析。

“API监控”有效真实的记录反馈前后端API性能情况，针对性做接口级质量优化。

客户也可自定义事件和测速来分析某些需具体的点，如新上一个 Button 想看下放的位置是否合理，请求 PV 是否符合预期，操作耗时是否合理等。

五、服务治理

服务版本迭代后几乎都会想做下治理，从全局分析找到服务的薄弱点，做优化提升服务成功率或减少处理耗时等。制定服务治理的前提是我们要知道整体的情况，从整体实际情况中确定服务中的“短板”项。

端到端的一体化监控解决方案

随着业务上云节奏的推进，越来越多的服务实现了云原生方式运作。业务开发聚焦于业务逻辑实现，依赖资源托管使用中无需过度关注细节，但托管不等于不管。云原生时代下资源应能有效被可观察，对于业务服务来说关心的是资源可用性以及对业务的问题影响程度等。

以往针对业务服务的监控主要是埋点打日志、上报接口指标等，出发点是服务性能的细节，单看细节没有问题，但终端客户却反馈异常。服务对客户来说是个整体的，底层细节是无感知的，服务监控也应当以终端客户使用质量为核心（立足点）。

根据以上问题，云监控团队提供了一套端到端一体化监控解决方案，客户操作一般从前端发起，请求通过网络传到后端，应用服务器接收请求并由业务逻辑服务处理，最后通过数据模型处理完成查询或增删修改等。端到端一体化监控解决方案覆盖每个环节，针对具体的环节有相应的监控场景。

图片

总结

介绍了某省健康码使用前端性能监控 RUM，以及如何实现问题发现、分析定位问题、性能优化、服务治理等等。监控方案也被不断的证明与应用优化，将更好的为业务场景赋能。让健康码更“健康”，让疫情防控更高效率。RUM 问题分析定位能力也逐渐加强，丰服务场景日益丰富，欢迎大家接入 RUM，为您的 Web 应用、小程序保驾护航（接入指引）。最后，真诚的祈祷疫情快点结束，大家能尽快以“脸”相见！

立即体验 RUM：https://cloud.tencent.com/product/rum。

联系我们

图片

如有任何问题，欢迎扫码添加云监控助手为好友，备注 RUM，入群交流。