从前端程序员的视角看小程序的稳定性保障

当我们谈业务稳定性的时候,通常是指后端工程师从架构的角度来看的,例如限流和降级、流量调度、业务开关、容量压测等,但监控也是整个业务稳定性建设中不可或缺的一环,例如对业务和前端的监控,以保证出现问题的时候,可以第一时间找到根因所在。今天,我们就结合小程序的场景,来看看如何做好小程序的监控。

本文转载至InfoQ大前端技术号「前端之巅」,作者慕扉,阿里巴巴高级前端工程师。

小程序与 H5 的不同

小程序和 H5 都属于移动端场景下的技术选择方案,那么这里介绍一下小程序与 H5 的不同。

1. 运行环境的不同

  • 传统的 H5 的运行环境是浏览器,包括 webview,其中浏览器提供 window、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

作者:阿里巴巴中间件

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容

  • 参考份量:50个左右 准备食材 展艺棉花糖 180g 黄油 40g 奶粉 110g 展艺...
    莱客优购烘培阅读 211评论 0 0
  • 在热腾腾的火锅里过完了2017年的最后一秒 这是人生中很重要的一年。 毕业工作的第一年,不断调整适应学校和社会之间...
    Molly_zhang阅读 144评论 0 0
  • 要想让身体从「葡萄糖供能模式」转换到「脂肪供能模式」,并达到减肥及获得其他各种好处并不是难事,只要稍微改变生活中的...
    酮人部落阅读 4,033评论 0 2
  • 随着React服务端渲染越来越流行,笔者也想尝尝鲜,经过半个月的折腾,笔者把原先的客户端渲染项目,通过结合 nex...
    梁相辉阅读 1,737评论 4 14
  • 夜里做了个梦,哭醒了。 是在一所类似大学校园的地方。住学生楼,吃集体饭。 晚上,我准备关电脑睡觉时发现同住的人都睡...
    十七君阅读 331评论 0 0