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

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
简介: 当我们谈业务稳定性的时候,通常是指后端工程师从架构的角度来看的,例如限流和降级、流量调度、业务开关、容量压测等,但监控也是整个业务稳定性建设中不可或缺的一环,例如对业务和前端的监控,以保证出现问题的时候,可以第一时间找到根因所在。

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

小程序与 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 前端监控提供的小程序监控可帮助客户实时监控发现质量问题,为企业的小程序的稳定运行提供坚实的保障。

附录:

相关文章
|
2月前
|
小程序 程序员
程序员的浪漫之——情侣日常小程序
程序员的浪漫之——情侣日常小程序
71 0
|
1月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
14天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
1月前
|
前端开发 JavaScript 程序员
推荐给前端程序员的5款浏览器插件
推荐给前端程序员的5款浏览器插件
|
1月前
|
小程序 前端开发 API
快递平台独立版小程序源码|带cps推广营销流量主+前端
快递平台独立版小程序源码|带cps推广营销流量主+前端
52 7
快递平台独立版小程序源码|带cps推广营销流量主+前端
|
2月前
|
前端开发 JavaScript 程序员
12个适合后端程序员的前端框架
12个适合后端程序员的前端框架
133 4
|
2月前
|
前端开发 UED CDN
从前端工程师的视角看待用户体验优化
在当今互联网高度竞争的时代,用户体验优化已经成为各个企业追求的目标之一。作为前端工程师,我们不仅要关注页面的美观和交互设计,更要深入了解用户行为和需求,从而为用户提供更好的体验。
|
2月前
|
前端开发 JavaScript 搜索推荐
专业与传统相融,程序员特有祝福:通过前端代码送上新春祝福
新春佳节即将来临,忙了一年,作为程序员,当然要用属于程序员独有的方式来给大家送上新春祝福。在这个喜庆的时刻,让我们以技术的视角来送上一份特别的新春祝福,作为程序员,我们可以用代码和技术,为了大家带来一份独特而有趣的祝福,为了给节日增添一份属于技术人特有的魅力,以前端开发的视角来送上一份特别的新春祝福。作为前端开发者,通过编写前端代码可以创造出丰富多样的视觉效果,可以利用HTML、CSS和JavaScript等编写代码来呈现出直观的新春祝福效果,为大家呈现出生动直观的新春祝福。那么本文以前端程序员的视角,结合前端专业知识送上新春祝福,希望在新的一年里,大家的生活充满幸福和技术的收获。
36 1
专业与传统相融,程序员特有祝福:通过前端代码送上新春祝福
|
2月前
|
缓存 前端开发 安全
究竟何为GET,何为POST?前端程序员的必修课
究竟何为GET,何为POST?前端程序员的必修课
58 0
|
2月前
|
小程序 前端开发 IDE
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
112 1