腾讯医疗健康高级工程师一线分享：鹅厂人都在用的小程序监控“神器”

微信邦

腾讯医疗健康高级前端开发工程师，腾讯前端监控 Oteam PMC 成员，主要负责小程序监控系统的设计和开发。

微信小程序现状发展

在今年的微信公开课 PRO 上，微信小程序负责人曾鸣披露了2021年小程序的大盘数据。数据显示，2021年微信小程序 DAU（日活） 达到了 4.5亿+ 的规模，小程序开发者超过了 300 万。

随着小程序的高速发展，越来越多的重点业务以小程序的产品形态展示在用户面前。前端作为用户访问业务的直接途径，对用户体验的重要性不言而喻，若出现页面出错、卡顿、崩溃、损坏等页面异常情况，会直接影响用户体验，从而可能会影响企业品牌形象和经济收入。因此做好微信小程序监控显得如此重要。

前端监控的必要性

页面异常监测的必要性

• 前端用户环境复杂多变: 网络、浏览器、平台、机型、版本、ISP 等多个维度，导致定位问题难。
• 业务报错时无处可查，线上问题复现困难。
• 无法定位 API 或静态资源报错导致页面不可用。
  
  

页面性能监控的必要性

• 无法掌握用户访问前端页面整个过程的性能。
• 无法从不同维度对前端页面性能进行分析统计，以及数据支撑。
• 无法获取用户访问接口的性能和耗时 - 据统计，页面相应慢 1s，用户转化率下降 7%，用户访问量下降 11%，客户满意度下降 16%，打开一个页面超过 3s ，57% 的用户会放弃浏览。
  
  
  
  

用户体验分析

• 无法很好的量化用户体验数据。
• 需要获取用户行为数据，支撑运营策略以及产品优化方向。
  
  

小程序监控价值

小程序监控背景

小程序开发和 Web 端有一个比较明显的不同就是小程序相对于 Web 端来说更加的 “黑盒”，很多监控的 API 和 Web 端的区别是很大的，所以 Web 端的很多监控方式在小程序里面是不通用的（比如小程序一些特有的性能指标：启动耗时、JS 注入耗时、SetData 性能等），所以更加需要一套独立的全方位的监控体系。

小程序监控有哪些价值？页面异常监控相关：

• 业务报错时随时可查，线上问题可根据信息快速复现，并解决。
• 小程序所有网络请求 API 报错自主上报，随时查询定位问题。
• 网络、浏览器、平台、ISP 等多个维度分析。
  
  

页面性能体验相关：

• 小程序启动相关性能一目了然。
• 小程序运行时性能数据一查便知。
• 网络请求耗时数据自动上报，可查询哪些接口耗时较长，针对性优化。
• 图片加载等静态资源耗时自动上报。
• 包下载耗时可以知道每个包的下载耗时。
  
  

用户体验分析相关：

• PV、UV 数据自动上报。
• 量化用户体验数据。
  
  

告警相关：

• 随时监测线上问题，发现问题及时解决，减少影响范围。
• 保证线上运行稳定。
  
  
  

RUM 小程序监控功能介绍

腾讯云前端性能监控（RUM）是基于真实用户的前端性能监测平台，一站式前端监控解决方案，专注于 Web、小程序等前端场景监控，主要关注页面错误和性能监控。RUM 由腾讯云内部研发，对微信小程序监控有着天然优势，更专注于小程序的性能监控与优化，并能更快速、精准地定位小程序性能问题，提升用户体验。用户只需要安装 SDK 到自己的项目中，通过简单的配置，即可实现对用户页面的全方位守护，真正做到了低成本和无侵入式监控。

腾讯云 RUM 有哪些优势？

[color=rgba(0, 0, 0, 0.75)]1. 微信小程序基础架构团队和 RUM 开发团队联系密切，非常清楚小程序相关的最新动向，在小程序监控领域会引领潮流。[color=rgba(0, 0, 0, 0.75)]2.[color=rgba(0, 0, 0, 0.75)] RU[color=rgba(0, 0, 0, 0.75)]M 小程序对开发者非常友好，对定位线上问题、性能优化、告警等方面更[color=rgba(0, 0, 0, 0.75)]是相当完善，更好的保障业务稳定[color=rgba(0, 0, 0, 0.75)]。[color=rgba(0, 0, 0, 0.75)]3. RUM 前端监控已在腾讯内部打磨多年，是一个非常成熟的产品，在应对流量突增，持续大流量等有非常多的实践经验，日均PV 10亿+ 的项目。

目前 RUM 小程序监控相对完善：

       错误监控

错误监控包括了 JS 错误、Ajax 错误（request、downloadFile、uploadFile、云函数 callFunction、callContainer）、Promise 错误、PageNotFound、Websocket 错误、Retcode 异常等。

RUM  SDK 会自动收集小程序中发生的各类错误，基本涵盖了小程序内的各类错误收集，随时在开发者平台查询，方便排查问题。

还支持网络、平台、ISP、地区、机型、浏览器、版本多个维度数据进行分析。

开发者可以快速的在平台查看每天的错误信息、 Top 错误排行，可针对性的对频繁发生的错误进行优先解决，可快速降低错误发生率。

也可以在日志查询中按照各种筛选条件（项目、日志类型、时间段、用户 UIN、SessionID、AID、关键词、屏蔽词等）进行精准快速的查询。         

性能监控

一、页面性能指标

目前 RUM 小程序监控涵盖了小程序启动性能和小程序运行时的性能的监控指标上报。性能优化就有了数据支撑，再也不用靠感觉来判断性能好不好了，可以直接对优化前后的数据进行对比，可以量化成果。

如上图，通过路径进行页面的筛选，可以通过筛选优先处理小程序重点页面的性能。

也可以通过选择平均数、中位数、75分位、90分位、95分位、99分位等查看各个性能数据，也可以通过各个指标的 top 表，进行排序等，各个页面各个指标都一目了然，根据数据即可制定小程序优化方向。

二、SetData 性能

SetData 是小程序开发中使用最频繁、也是最容易引发性能问题的接口。

SetData 的过程，大致可以分成几个阶段：

一阶段：逻辑层虚拟 DOM 树的遍历和更新，触发组件生命周期和 observer 等；

二阶段：将 data 从逻辑层传输到视图层；

三阶段：视图层虚拟 DOM 树的更新、真实 DOM 元素的更新并触发页面渲染更新。

对于第 二阶段，由于小程序的逻辑层和视图层是两个独立的运行环境、分属不同的线程或进程，不能直接进行数据共享，需要进行数据的序列化、跨线程/进程的数据传输、数据的反序列化，因此数据传输过程是异步的、非实时的。

数据传输的耗时与数据量的大小正相关，如果对端线程处于繁忙状态，数据会在消息队列中等待。所以 setData 数据大小是小程序运行时性能非常重要的一个指标。

评估小程序运行时的性能 setData 的性能是不可忽视的指标之一。

RUM 小程序上报了 setData 耗时，setData 数据大小的数据，以页面为维度，可以通过平均数，中位数等来评估各个页面 setData 的整体性能，然后制定 setData 的优化方向，且有数据支撑，量化优化成果。

三、包下载耗时

分包在小程序中使用非常常见，因为小程序的机制原因，运行小程序需要先下载包，然后进行代码注入等操作，所以如果打开一个分包中的页面，包下载是前提，所以包下载耗时就成为了一个重要的性能指标，其重要性不言而喻。

RUM 小程序监控包下载耗时上报了包名、包下载耗时、包大小等数据。一般来说包下载耗时和包大小是成正比的，所以优化包大小即可优化包下载耗时。

四、静态资源耗时

1、在小程序中，往往需要使用图片作为页面中重点的信息展示模块，所以小程序主要考虑图片的加载耗时。

2、正常来说，我们为了减小包体积，往往会将图片上传至 CDN 上，在小程序中使用 image 标签或者 background 去进行加载，这个时候加载的耗时直接影响用户的体验；所以小程序静态资源加载耗时往往也是体现在一个页面重要信息加载出来的耗时。

我们可以通过查看静态资源的 top 视图，来精确定位加载耗时过长的静态资源，一般来说加载耗时和静态资源的大小有关，可通过减小大小来制定针对性优化策略。

接口（API）监控

RUM 包括了小程序请求的接口耗时，接口返回状态码异常，Retcode 等上报，在开发者平台还可以直观的看到每天接口请求的成功率以及访问 top 视图。

可以每天关注前一天的接口成功率，如果前一天接口成功率过低，可以进行日志查询排查问题原因直至解决。

API 监控视图中还有 status Top 异常，可以用来查看每天的 Http 请求中状态码的情况。

页面分析 tab 中，可以看到每个小程序页面的接口调用情况（耗时、数量等），可以针对每个页面进行数据分析，对页面中耗时较高的接口，可以结合监控数据前后端一起排查问题，减少接口耗时，提升用户体验。

智能告警

RUM 的告警功能十分强大，它支持如下类型的告警：

• 可配置所有类型（Js Error、Promise Error、Ajax、接口异常码等等）的错误日志的告警，可以在线上出现问题时及时发现，快速解决，避免影响范围的扩大；
• 可配置页面性能相关告警，线上性能问题告警可采取相关优化策略进行性能优化；
• 可配置静态资源加载耗时告警，可以当线上静态资源加载出现问题时，快速应对；
• 可配置 API 接口耗时，错误码等各类型告警，全方位应对接口错误等问题；
• 可配置自定义事件，自定义测速等告警，可针对不同的业务定制化各种告警需求；
• 可配置上报数据量，访问量等相关告警，防止流量突增时没有应对，可保障线上稳定运行。
  
  

自定义上报

在不满足 SDK 主动上报的数据时，支持自定义日志、自定义事件、自定义测速上报。

自定义日志：主动上报用户日志，包括 info、report、error、retcode 等，方便排查问题。

自定义事件：上报页面自定义事件，并提供强大的检索能力和多维分析能力。

自定义测速：SDK 的测速不满足需求，支持自定义测速，提供多维分析能力。

离线日志

通过离线日志功能，不需要全量上报日志数据，可通过白名单系统将需要的日志进行上报，未上报的日志存储在用户本地，当需要排查客户问题时，再将日志数据拉取上来。

用户行为回溯

（隐藏技能）当有些棘手的问题非常难以找到原因，或者小程序有非常重要的用户时，可以配置白名单，配置白名单之后，SDK 会上报更多的日志，比如用户的点击，页面跳转，页面加载，tab 切换，接口请求等，这些行为都会被记录下来，最终就会形成关键行为回溯的路径，可以完全呈现错误发生的环境以及各个关键行为，从而更好的复现错误，帮助开发者解决疑难杂症问题。  

     

可选择发生错误前的 10s、30s、1min 内的关键操作，以及接口请求完整的复现整个行为。

未来展望

腾讯云前端性能监控（RUM） 作为一站式前端监控体系，专注于 Web、小程序等场景监控，目前已经逐步完善对小程序的全方位监控。

未来 RUM 小程序监控将持续优化，跟随微信官方 API 的更新丰富 SDK 上报指标，开发者平台功能的完善，可以更好地帮助开发者发现问题、解决问题、提升质量，更好地保障小程序业务的稳定运行。您可以点击文末[阅读原文]免费体验腾讯云前端性能监控（RUM）。