火山引擎推出基于全新视角的 Web 端性能监控方案

·  阅读 963
火山引擎推出基于全新视角的 Web 端性能监控方案

背景

“异常感知——发现根因——解决问题”,基于该理念,火山引擎APM团队设计了高可用易扩展的SDK和消费平台,形成了一种面向Web监控的解决方案,该方案紧密关联了各个功能,足以支撑复杂场景下的性能、异常数据消费和分析的需求。目前,字节内部已有超过3000+个项目接入,在进行不断迭代、打磨后,决定把它融合入火山引擎全链路监控,为广大外部的应用开发者提供服务。

重点功能介绍

平台通过灵活上报不同类型的错误、性能、操作、自定义数据,结合多维分析和日志链路,帮助开发者对于Web端真实数据进行报警归因、聚类分析、细节定位,解决用户白屏、性能瓶颈、慢查询等关键问题。

下图从用户的角度,描述了发现问题、分析问题、解决问题、效果确认的整个流程。其中,JS错误监控、请求监控、静态资源监控等前端监控的核心功能均在当前平台涵盖,相关使用流程可以到文档站(www.volcengine.com/docs/6431/1…

  1. 白屏监控

白屏往往是因为代码执行错误或者资源加载失败, 导致页面渲染失败。一旦发生了白屏,页面就处于不可交互的状态,阻碍了用户使用,导致了用户流失。业界现有的检测办法是单纯基于dom的检测,方法单一、通用性较差,缺乏业界认可的检测算法,并且无法针对白屏进行归因,无法为白屏提供有效的修复引导。

对此,火山引擎应用性能监控全链路版Web Pro监控采用不断完善的打分策略、回测任务、即时截图保证了白屏检测的高准确性,使用户能够及时发现页面的白屏状态,并提供可归因分析的相关数据,有效帮助业务定位问题。

首先,使用白屏列表查看趋势以及条目,如下图所示:

其次,点击跳转到数据探索,根据链路日志定位问题,比如下图定位到是js错误导致了白屏,进而可以根据反解,定位到出错的代码行。

点开Session标签页,可以很详细地看到当前session的日志流,找到对应的JS错误和白屏,根据上下文进一步还原现场。

  1. 性能监控

SDK侧,Web Pro监控采集了非常全面的性能指标,包含了fp、fcp、fmp、tti、navigation timing 等常规性能指标,也有lcp、fid、mpfid、cls等最能代表用户体验的指标,此外,页面发生的longtask也会进行上报,更多详细说明可以查看该文档链接以及同级链接www.volcengine.com/docs/6431/1…

平台侧,Web Pro监控提供了页面性能总览和页面维度的性能指标,配合参考线,能够直观地展示所有性能指标在该时间段内的达标程度,然后针对于异常指标,进入数据探索页面进一步分析。

具体步骤如下:

进入「项目设置」页面根据业务场景对于性能指标参考线进行设置

性能参考线默认值参考了web.dev(web.dev/user-centri…

同时,平台给出了默认打分的配置,也可以根据实际需要来更改打分的比重

接下来,进入「站点性能总览」可以查看以fcp均值作为排序指标筛选出的最差的5个页面,从表格中能够看到页面性能评分等性能指标。

在同一页面中,也展示了优化top5页面以及劣化top5页面, 点击指定pid后,可跳转至对应的性能指标和趋势,进行查看。

此时,可以发现LCP的值超过了之前设置的3500ms警戒线,需要对其进一步分析。点击LCP标题,可以带上相关上下文,跳转至「数据探索」。

进入数据探索页后,自动筛选出了当前LCP > 3500ms的日志,可以查看优化建议文档zjsms.com/FRDMgec/ ,结合指定日志的瀑布图进行针对性优化,具体可以参考下文数据探索中对于页面加载的分析。

同理,其他性能指标也可按照上述的方式进行逐一优化。

  1. 数据探索

目前大部分的监控工具,都提供了类似 Feed 流布局的日志细查能力,但这类工具存在以下缺陷:

  • 状态难以保持;
  • 数据来源太过分散,归因能力差,定位速度慢;
  • 仅展示原始上报,无法进一步展现更多信息。

为了解决这些问题,火山引擎Web Pro监控推出了强大的数据探索能力,该页面能够同时满足日志细查、多维分析、用户行为重建等功能,通过它来承载从宏观视角到微观视角的转换。

例如,白屏监控、JS错误监控、请求监控等页面展示的聚合数据,都能带上当前的上下文信息跳转到数据探索页面,下钻到详细日志。定位到某一条日志后,可以通过如下方式进行探索分析:

(1)按时序查询用户在某一次会话的全部上报信息,如下图所示。

    • 在数据探索的 Session 事件中,将用户的一次站点访问中的所有事件聚合按时序展示;
    • 通过关键字或事件类型进行过滤,可以快速找到用户关心的事件;
    • 点击列表中具体事件,可以直接查看该事件的详情页面。

(2)深入分析影响页面加载的具体资源、请求、longtask或用户行为,并针对性优化。

    • View 标签页里的每一条日志,将发生在该次页面访问下的静态资源,请求,longtask等信息聚合成时序瀑布,结合 RUM、navigation 指标线,协助用户进一步判断影响当前指标的因素。
    • 同时,针对时序中表现异常的事件,点击具体事件名进入其详情,具体观测其 timing、请求等相关信息。

高性能易扩展的SDK

多样的生命周期

监控SDK内置了丰富的生命周期,提供了11个生命周期钩子函数,覆盖了从初始化到销毁的全过程。每个实例都会经历初始化(init)、配置上报参数(config,可选)、开启上报(start)、收集数据(report)、包装数据(build)、发送数据(send)、销毁实例(destroy)的过程。在这个过程中会运行这些生命周期钩子的函数,用户可以利用这些生命周期实现上报拦截、补充自定义上下文等等一系列能力。

多实例支持

监控SDK内部没有依赖任何全局变量,同一个页面可以引入多个监控实例互不冲突。在微前端场景下,不同子应用可以分别引入监控实例并初始化。同样的,其他SDK也可以引入监控SDK以监听异常和使用量而不用担心影响业务本身的监控。

插件化

SDK内部的所有监控能力完全是一个个插件,支持可拔插、按需打包,且支持自定义插件。更多关于自定义插件的详细说明可参考文档(www.volcengine.com/docs/6431/1…

灵活的采样

采样规则重构,支持所有上报字段的采样、各种操作符的过滤以及采样条件的与和或

新增全局信息

  • 提供 release 概念,打通研发流程,为平台提供版本间优劣化数据比较,错误自动分配处理人等提供基础纬度
  • 提供 env 以配置不同环境, 平台支持不同环境数据隔离消费,避免线下 / 测试数据影响线上稳定性监控
  • 提供 viewid 等标识,更好描述和串联一次页面生命周期的各类上报数据,为性能优化等排查提供依据

SDK自身性能优化

SDK在性能上也进行了大量性能优化,经过对比测试,SDK对页面性能的影响已经微乎其微。目前字节内部绝大部分前端项目已经接入了新版SDK,没有任何性能异常相关的反馈。

总结

面向Web监控的全新解决方案带来了更加优雅、轻便、高性能的SDK,更加贴近用户需求的消费平台,同时未来还会增加更多实用的新特性,比如白屏自动归因、 R eact 错误消费、action的上报及相关链路消费等等,欢迎体验并持续关注我们的更新。

💡预告:「前端性能监控训练营」将于6月开放报名,敬请期待

识别二维码加入应用性能监控交流群

目前,我们特别推出「APMPlus 企业助力行动」,为中小企业提供应用性能监控免费资源包。现在申请,有机会获得60天免费性能监控服务 ,最高可享6000万条事件量。

点击阅读原文,立即申请⬇️

wenjuan.feishu.cn/m/cfm?t=s6R…

分类:
前端
收藏成功!
已添加到「」, 点击更改