火山引擎推出一站式小程序监控方案

作者:陈金伙

背景

小程序作为轻量级的应用发展迅速,国内已有多家小程序厂商相继推出。为了洞察用户真实体验及程序自身运行状况,监控已成为开发套件中必不可少的一环。随着业务愈来愈复杂,各厂商小程序管理后台免费提供的监控能力逐渐满足不了大部分业务与市场的需求。当前有小程序监控需求的用户都面临以下痛点:

  • 仅支持 1 ~ 2 个小程序平台,不支持主流小程序跨端开发框架,如 uni-app 和 Taro。
  • 异常监控、请求监控、启动/运行时性能监控能力薄弱。
  • SDK 配置繁琐、体积大、性能损耗高,接入成本高。

基于以上痛点,火山引擎 APM 团队针对小程序监控的的需求场景进行探索,再经过字节跳动内部多条业务线应用沉淀和多轮迭代,打造出了一站式小程序监控平台,旨在为开发者提供可跨平台、监控能力完善、简单易用的小程序监控服务。

火山引擎小程序监控的功能亮点

灵活低成本的接入方式,适配多厂商、多框架

  • 支持抖音、微信、支付宝、百度、飞书等多个厂商的原生小程序接入,也适配三方框架Uni App和Taro。
  • 低成本接入,仅需两行代码即可完成初始化。
  • 性能损耗可控,中高端机型完全初始化仅需 7 ~ 12 ms。
  • 支持按需加载适配层以及集成模块,且包含丰富的生命周期,满足不同业务场景的自定义配置需求。

完善的启动和运行时性能指标体系

  • 小程序启动过程是指从用户打开小程序小程序首页渲染完成。 SDK 侧会收集该阶段全部指标,包括下载耗时、JS注入耗时、App 各阶段耗时、首次 Page 各阶段耗时、FR(firstRender))、FP(firstPaint-,firstPaint,-%E9%A1%B5%E9%9D%A2%E9%A6%96%E6%AC%A1))、FCP(firstContentfulPaint) 等等常规性能指标。

    火山引擎推出一站式小程序监控方案_第1张图片

  • 运行时性能包括页面切换性能、setData 性能

    • setData 性能:包括 setData 次数、耗时、频率以及大小。
    • 小程序页面切换过程是指从用户触发路由切换事件新页面渲染完成。SDK 侧会收集该阶段全部指标,包括路由切换耗时、页面构建耗时、页面渲染耗时、FR、FP、FCP 等等常规性能指标。

火山引擎推出一站式小程序监控方案_第2张图片

从小程序启动到页面切换,我们不仅有完善的性能指标体系,而且各项指标均可在「自定义看板」中进行任意组合以满意业务方的个性化需求。除此之外,字节内部根据实践经验预定义了一套默认参考线,当然也支持用户根据业务自身复杂程度来动态调整参考线。

平台能力概览

  1. 发现问题:通过配置JS 错误或性能报警来第一时间洞察线上运行状况,也可通过看板订阅的方式定时推送可视化图表发送至你的邮箱或其他方式。
  2. 分析问题:

    1. 异常问题:通过 sourcemap 反解将晦涩难懂的错误堆栈还原至开发环境,再通过数据探索回溯发生错误前的用户操作行为,包括网络请求、路由跳转、setData 调用等等,帮你更快速定位问题所在。
    2. 性能问题:配合默认指标参考线,性能监控总览能直观展示启动 / 运行时性能在某段时间内的达标程度,然后针对于异常指标,进入数据探索进一步下钻至单次 Session 信息,Session 囊括了首屏 冷启动 阶段、页面渲染阶段等等,直观展示线上真实用户体验的瀑布图,助你更快发现性能根因所在。
  3. 效果验证:品质优化上线后,可通过以下功能来灵活量化和验证优化效果。

    1. 天级报表:字节工程师在提升前端应用品质的过程中,预设计的一系列与业务目标强相关的指标看板。以天为粒度展示所选时间周期内小程序的表现分以及各核心指标的趋势图,可直观对比品质优化前后核心指标的变化。
    2. 自定义看板:用户可灵活配置各项性能或异常指标,并可自定义时间维度来观测品质优化前后核心指标的变化。

典型应用场景

观察并改进页面性能

性能监控」提供以冷启动总耗时、小程序初始化耗时、下载耗时、JS注入耗时等多项指标并按照 AVG、PTC75、PTC90、PCT95排序得出性能欠佳页面和劣化Top 5,帮助您更好的发现和定位优化对象。

火山引擎推出一站式小程序监控方案_第3张图片

而后,我们支持更进一步的数据下钻与现场复原,进入「数据探索」下的「Session Tab」具体查看某单次会话的详细信息。

火山引擎推出一站式小程序监控方案_第4张图片

同时,针对单个会话的某次页面访问,我们可以在「View Tab」中通过「启动性能指标」和「资源加载瀑布图」观察到首次冷启动的完整链路,从而找出问题关键。

火山引擎推出一站式小程序监控方案_第5张图片

结合「Session Tab」和「View Tab」视图,我们初步判断:该页面的 FCP 与网络请求 user_info 以及响应回调中的 setData 是强相关,以此来推动该请求速度的优化或 setData 逻辑优化。

多平台数据对比

当前很多企业在不同小程序平台均有发布小程序,需要快速知道多个小程序平台的业务差异,则可使用「自定义看板」,支持用户灵活配置指标和图表形式,帮助您管理高频使用的图表,自主设计业务大盘。例如对不同厂商的小程序进行数据对比。

  • 用户数据对比:包括 PV、UV、手机型号、系统等等用户相关数据,统一呈现,横向对比。

火山引擎推出一站式小程序监控方案_第6张图片

  • 基础性能数据对比:得益于适配层的架构,SDK 在收集侧统一了所有小程序厂商的基础性能数据。例如首屏加载总耗时、页面跳转总耗时等等。

火山引擎推出一站式小程序监控方案_第7张图片

限时免费体验中

当前火山引擎小程序监控产品推出助力活动,新用户可申请免费试用。

  • 点击下方链接, 申请试用

https://wenjuan.feishu.cn/m/c...

火山引擎推出一站式小程序监控方案_第8张图片

详细产品能力可上火山引擎官网体验产品demo。

  • 点击下方链接, 体验小程序监控demo

https://console.volcengine.co...

你可能感兴趣的:(小程序监控)