前端监控

外观

微信公众号

介绍 ​

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

小程序与 H5 的不同 ​

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

  1. 运行环境的不同
  • 传统的 H5 的运行环境是浏览器，包括 webview，其中浏览器提供 window、document 等 BOM 对象。
  • 小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整的浏览器对象，所以缺少相关的 DOM API 和 BOM API。
  1. 开发成本的不同
  • H5 的开发，涉及到开发工具、前端框架、模块管理工具、任务管理工具、UI 库的选择、接口调用工具及浏览器兼容性等。
  • 小程序的开发，指定环境的小程序会提供开发者工具、API 及规范的开发标准。由于小程序是跑在指定的环境下的，同时 API 是指定环境下提供的，所以不用考虑浏览器的兼容性。
  1. 使用体验的不同
  • H5 页面需要在浏览器中渲染，在复杂的业务逻辑或者丰富的页面交互时会有卡顿情况；
  • 小程序除首次使用略慢，页面切换及跳转等非常顺滑，接近 Native。

通过以上几点小程序和 H5 的不同的介绍，我们可以发现原来针对 H5 页面的监控无法直接监控小程序；同时由于小程序封闭性较强，不同的小程序在标准上也略有不同，如微信小程序、支付宝小程序及钉钉 E 应用等等小程序在使用标准及开放的 API 方面也会有一些差异，所以针对小程序的监控与针对 Web 应用的监控会有所不同。

小程序监控的现状 ​

现在针对小程序监控的大概分为以下几类：

  1. 小程序的数据统计分析，助力小程序运营
  • 相关产品: 微信小程序助手、阿拉丁小程序统计平台等；
  • 特点：大部分是针对微信小程序提供相应的数据统计分析能力，从多维度分析小程序相关用户数据，适用于小程序运营，但缺乏对于用户体验，小程序性能的监控。
  1. 小程序错误监控
  • 相关产品: FunDebug 等；
  • 特点：监控小程序使用户出现的错误，帮助开发者发现并解决小程序错误，但缺乏对于小程序全局性能的监控，对于缓慢请求，缓慢页面没法监测。
  1. 小程序性能监控
  • 相关产品: FrontJS、听云小程序监控等；
  • 特点：主要提供性能相关数据，包括 JS 错误、网络请求响应情况等。但是只支持微信小程序，而且没有办法把小程序的性能与后台应用的性能关联起来，没法形成端到端的监控。

通过上面对现有的小程序监控产品分析，存在以下问题：

  • 无法支持所有的小程序监控，主要支持微信小程序；
  • 支持多类小程序监控的产品，提供的小程序相关数据较少，主要集中在错误监控；
  • 没有后台应用服务的性能监控，无法从小程序上的性能问题追溯到后台应用代码和数据库，无法形成端到端的监控。

微信在小程序后台也有做错误监控，但是监控手段没法将错误原因细分。比如以下几点：

  • 网络请求错误统计，但无法快速定位到服务端；
  • 有JS错误统计，但无法快速定位错误堆栈；
  • 无页面维度监控，无法知道用户打开页面的体验；
  • 无地域运营商监控，无法知道不同地域运营商下的小程序性能；
  • 页面退出率高，无法知道是否是性能导致的；
  • 关于promise或async/await异步方法中报错信息的没有监控。

小程序监控提供的能力 ​

  1. 基础业务指标，帮助了解小程序应用的使用情况：
  • 应用总 PV/UV
  • 页面维度的 PV/UV
  1. 小程序各维度指标：
  • 手机型号
  • 操作系统版本
  • 微信 / 支付宝等相应的 APP 版本
  • 网络等
  1. JS 错误分析：
  • JS 错误率、错误聚类、JS 错误堆栈及错误定位等
  1. API 请求追踪：
  • API 请求成功率、API 请求耗时及 API 请求的链路追踪
  • 自定义事件统计
  • 支持业务上自定义事件 sum/avg 统计

博客

Released under the MIT License.

Copyright © 2022-present codeteenager