当我们谈业务稳定性的时候, 通常是指后端工程师从架构的角度来看的, 例如限流和降级, 流量调度, 业务开关, 容量压测等, 但监控也是整个业务稳定性建设中不可或缺的一环, 例如对业务和前端的监控, 以保证出现问题的时候, 可以第一时间找到根因所在. 今天, 我们就结合小程序的场景, 来看看如何做好小程序的监控.
本文转载至 InfoQ 大前端技术号「前端之巅」, 作者慕扉, 阿里巴巴高级前端工程师.
小程序与 H5 的不同
小程序和 H5 都属于移动端场景下的技术选择方案, 那么这里介绍一下小程序与 H5 的不同.
1. 运行环境的不同
传统的 H5 的运行环境是浏览器, 包括 webview, 其中浏览器提供 Windows,document 等 BOM 对象;
小程序的逻辑层和渲染层是分开的, 逻辑层运行在 JSCore 中, 并没有一个完整的浏览器对象, 所以缺少相关的 DOM API 和 BOM API.
2. 开发成本的不同
H5 的开发, 涉及到开发工具, 前端框架, 模块管理工具, 任务管理工具, UI 库的选择, 接口调用工具及浏览器兼容性等;
小程序的开发, 指定环境的小程序会提供开发者工具, API 及规范的开发标准. 由于小程序是跑在指定的环境下的, 同时 API 是指定环境下提供的, 所以不用考虑浏览器的兼容性.
在 H5 开发中, 前端常用的 html/CSS 在不同的小程序中都有指定的文件标准. 例如:
在微信小程序中使用 WXML/WXSS;
在支付宝小程序, 钉钉 E 应用中使用 AXML/ACSS;
在百度智能小程序中使用 SWAN/CSS;
......
开发规范在指定的官方文档中都会有明确的使用介绍, 使用方法与原来 H5 的开发大同小异, 所以上手开发相对容易.
3. 使用体验的不同
H5 页面需要在浏览器中渲染, 在复杂的业务逻辑或者丰富的页面交互时会有卡顿情况;
小程序除首次使用略慢, 页面切换及跳转等非常顺滑, 接近 Native.
通过以上几点小程序和 H5 的不同的介绍, 我们可以发现原来针对 H5 页面的监控无法直接监控小程序; 同时由于小程序封闭性较强, 不同的小程序在标准上也略有不同, 如微信小程序, 支付宝小程序及钉钉 E 应用等等小程序在使用标准及开放的 API 方面也会有一些差异, 所以针对小程序的监控与针对 Web 应用的监控会有所不同.
小程序监控的现状
现在针对小程序监控的大概分为以下几类:
1. 小程序的数据统计分析, 助力小程序运营
相关产品: 微信小程序助手, 阿拉丁小程序统计平台等;
特点: 大部分是针对微信小程序提供相应的数据统计分析能力, 从多维度分析小程序相关用户数据, 适用于小程序运营, 但缺乏对于用户体验, 小程序性能的监控.
2. 小程序错误监控
相关产品: FunDebug 等;
特点: 监控小程序使用户出现的错误, 帮助开发者发现并解决小程序错误, 但缺乏对于小程序全局性能的监控, 对于缓慢请求, 缓慢页面没法监测.
3. 小程序性能监控
相关产品: FrontJS, 听云小程序监控等;
特点: 主要提供性能相关数据, 包括 JS 错误, 网络请求响应情况等. 但是只支持微信小程序, 而且没有办法把小程序的性能与后台应用的性能关联起来, 没法形成端到端的监控.
通过上面对现有的小程序监控产品分析, 存在以下问题:
无法支持所有的小程序监控, 主要支持微信小程序;
支持多类小程序监控的产品, 提供的小程序相关数据较少, 主要集中在错误监控;
没有后台应用服务的性能监控, 无法从小程序上的性能问题追溯到后台应用代码和数据库, 无法形成端到端的监控.
基于以上情况, 阿里云 ARMS 前端监控重磅推出小程序监控, 旨在帮助端到端的快速定位小程序问题, 提升小程序的用户体验.
小程序监控提供的能力
阿里云 ARMS 前端监控此次重点推出的小程序监控有以下特点:
1. 覆盖各类符合标准规范的小程序
首先解释一下这里所说的 "标准规范的小程序", 即包含 App 和 Page 两层:
App 用来描述整体程序, 包含: onError 事件;
Page 用来描述各个页面, 包含: onShow,onHide,onUnload 事件.
小程序的运行环境依赖于对应的客户端, 各类小程序的 DSL 设计看起来很像, 但细节上的差别还是比较多, 并且已有了分化的趋势. 在这种情况下, 阿里云 ARMS 前端监控为了更好的支持小程序的监控诉求, 提供以下小程序监控的场景:
微信小程序
支付宝小程序
钉钉 E 应用
其他类别小程序
由于小程序发展迅速, 现在无法针对各类小程序都提供对应的监控 SDK, 所以不属于微信小程序, 支付宝小程序和钉钉 E 应用的小程序可选择其他类别小程序的场景接入进行监控, 但要满足上面说的 "标准规范的小程序" 前提, 同时支持 NPM 包.
2. 完善的性能监控指标
基础业务指标, 帮助了解小程序应用的使用情况:
应用总 PV/UV
页面维度的 PV/UV
小程序各维度指标:
手机型号
操作系统版本
微信 / 支付宝等相应的 App 版本
网络等
JS 错误分析:
JS 错误率, 错误聚类, JS 错误堆栈及错误定位等
API 请求追踪:
API 请求成功率, API 请求耗时及 API 请求的链路追踪
自定义事件统计
支持业务上自定义事件 sum/avg 统计
3. 可通过配置选择上报方式
由于业务方使用监控的诉求不同, 我们不仅支持优雅的静默数据上报, 也支持使用开放的统计能力进行自定义上报. 具体可查看官网的前端监控接入概述中的小程序场景相关文档:
https://help.aliyun.com/document_detail/106086.html
总结
小程序作为各大互联网公司重磅加持的方向, 未来小程序的应用数量会越来越多, 那么对于用户体验方面的关注与提升诉求也会不断增加, 阿里云 ARMS 前端监控提供的小程序监控可帮助客户实时监控发现质量问题, 为企业的小程序的稳定运行提供坚实的保障.
附录:
业务实时监控服务 ARMS:
https://arms.console.aliyun.com/#/home
业务实时监控服务 ARMS 前端监控:
https://arms.console.aliyun.com/#/retcode
小程序监控接入文档:
https://help.aliyun.com/document_detail/106086.html
来源: https://juejin.im/post/5c77ab516fb9a049ba424413