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

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

小程序与 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

总结

小程序作为各大互联网公司重磅加持的方向,未来小程序的应用数量会越来越多,那么对于用户体验方面的关注与提升诉求也会不断增加,阿里云 ARMS 前端监控提供的小程序监控可帮助客户实时监控发现质量问题,为企业的小程序的稳定运行提供坚实的保障。

#阿里云开年Hi购季#幸运抽好礼!
点此抽奖:https://www.aliyun.com/acts/product-section-2019/yq-lottery?utm_content=g_1000042901

原文链接
本文为云栖社区原创内容,未经允许不得转载。

原文地址:https://www.cnblogs.com/yunqishequ/p/10444042.html

时间: 2024-10-08 16:14:08

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

从一个程序员的角度看——微信小应用

前言: 最近初步了解了一下微信小应用,APP端的同事也非常感兴趣,于是在公司内部做了一个小小的分享,分享的过程中有很多讨论内容,大家也是非常感兴趣和有自己的看法,当时"混乱"的场面好几次我都没有把持住.以下内容部分来自于内部分享所用ppt.文章对微信小应用的使用做了展示性介绍,并简单介绍了代码结构.后端交互方法.最后提出一些总结和疑问.文章内容比较主观,有不对的地方欢迎大家指出纠正. 前段时间微信小应用公开内测,在朋友圈火了一把,各种阐述疯狂蔓延,干掉APP之类的说法比较突出,确实达到

从一个程序员的角度看——微信小应用(含直播视频)

前言: 最近初步了解了一下微信小应用,APP端的同事也非常感兴趣,于是在公司内部做了一个小小的分享,分享的过程中有很多讨论内容,大家也是非常感兴趣和有自己的看法,当时"混乱"的场面好几次我都没有把持住.以下内容部分来自于内部分享所用ppt.文章对微信小应用的使用做了展示性介绍,并简单介绍了代码结构.后端交互方法.最后提出一些总结和疑问.文章内容比较主观,有不对的地方欢迎大家指出纠正. 前段时间微信小应用公开内测,在朋友圈火了一把,各种阐述疯狂蔓延,干掉APP之类的说法比较突出,确实达到

从一个程序员的角度看——微信小应用(第二弹 见解)

最近公司的小程序刚通过了代码审核(待发布状态),从最初对它的学习 到开发 到小程序待发布 再到28日微信公开课,也算一步步的了解了微信小程序吧. 28日微信pro公开课张小龙针对小程序进行了一些答疑,之后行业的同僚都很关注,似乎大家还是有很多疑惑.之前初学后写过博客 从一个程序员的角度看--微信小应用(第一弹 初学),今天决定再写一篇小程序的小文,所以此篇谈谈我对小程序的理解吧. 说说张小龙回答的8个问题 1.小程序的入口在哪里?张小龙给出的答案是:小程序在微信没有入口. 2.小程序会不会有类似

我看小程序系列文章:1 不一样的角度 解读微信小程序

大家好,我是Beta007. 最近一直在研究小程序,会在这里整理出一系列的文章,和大家交流. 第一篇文章首发在了知乎专栏:小楼昨夜又秋风:https://zhuanlan.zhihu.com/p/22891188 知乎ID:七月在夏天  (头像是只喵~) 不一样的角度 解读微信小程序 七月在夏天· 2 天前 前段时间看完了雨果奖中短篇获奖小说<北京折叠>.很有意思的是,张小龙最近也要把应用折叠到微信里,这些应用被他称为:小程序. 含着金钥匙的小程序,还未展现全貌,就已经成了开发界的头条大事儿.

作为一个程序员,没有看过这几部电影你就out了!

摘要:每次看科技类的电影,都感觉很酷,一直以为那是虚幻的,实际上是现实中的一些技术在电影中被无限扩大了,而并不是不存在的.其实很多时候在不同的行业领域中,都分享着一个共同的理念和思想,就像很多编程中涉及到的思想被运用到了电影里. 艺术源于生活,高于生活.当计算机编程中的某些概念被运用到电影里之后,我们总会觉得电影很酷,很不可思议,其实是那些编程思想被艺术化了.既然说艺术源于生活并高于生活,反过来这些电影对程序员更好的理解这些编程思想也会有很好的帮助.以下小编为大家推荐几部非常值得一看的电影. 1

准程序员该如何看代码

> 刚上大学的时候,对于一个连c是什么都不知道的我来说,问的最多的问题便是,软件工程专业的学生该如何学习.听到的最多的答案就是:"多看代码,多写代码."如今,过去了三年,作为准程序员的我已经实习了一段时间,面对每天看的代码,又如刚上大学时那般迷茫,我该如何看代码呢? "学而不思则罔,思而不学则殆",是时候该合上显示屏,好好想想了. 首先应该认识两点,第一,学习编程不是照着代码敲就可以的.以前看了很多书,看了很多视频,照着敲的代码也有很多k了,可真正成为自己的却

程序员收藏必看系列:深度解析MySQL优化(二)

程序员收藏必看系列:深度解析MySQL优化(一) 性能优化建议 下面会从3个不同方面给出一些优化建议.但请等等,还有一句忠告要先送给你:不要听信你看到的关于优化的“绝对真理”,包括本文所讨论的内容,而应该是在实际的业务场景下通过测试来验证你关于执行计划以及响应时间的假设. scheme设计与数据型优化选择数据类型只要遵循小而简单的原则就好,越小的数据类型通常会更快,占用更少的磁盘.内存,处理时需要的CPU周期也更少.越简单的数据类型在计算时需要更少的CPU周期,比如,整型就比字符操作代价低,因而

程序员生存定律-六个程序员的故事(1)

程序员生存定律这系列的目录在这里:程序员生存定律--目录 喜欢从头瞄的,可以移步. ------------------------------------------------------------------------------- 此前的章节基本上是在分析并试图建立一种成长的模型,为免这种分析和模型离开现实,下面将考查一些具体的,程序员的故事,看的话最好把这六个故事都看完,否则容易片面. 很多人更喜欢看名人的故事,比如李开复老师的故事.这必然是有帮助的,但可参照意义往往并没有想象的那

做什么职业,也别做程序员,尤其是Java程序员

千万别做程序员,尤其别做Java这种门槛低,入门快的程序员(别跟我说Java搞精通了也很牛之类的,原因不解释,做5年以上就知道了),程序员本来就是我见过最坑爹的职业了...Java程序员更是,现在满地都是Java培训机构,不出3年,你就不值钱了,就像3年前的C++一样!而且Java贬值更快,因为他比c++简单多了,培训个3个月,直接上岗,你说你怎么保证自己是不可替换的?而且现在Java程序员的整体工资,已经有不断下降的趋势! 我就用我的亲身经历告诉你,你这个想转程序员的人:别做这行,因为你不知道