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

61次阅读

共计 3033 个字符,预计需要花费 8 分钟才能阅读完成。

背景
“异样感知——发现根因——解决问题”,基于该理念,火山引擎 APM 团队设计了高可用易扩大的 SDK 和生产平台,造成了一种面向 Web 监控的解决方案,该计划严密关联了各个性能,足以撑持简单场景下的性能、异样数据生产和剖析的需要。目前,字节外部已有超过 3000+ 个我的项目接入,在进行一直迭代、打磨后,决定把它交融入火山引擎全链路监控,为宽广内部的利用开发者提供服务。
重点性能介绍
平台通过灵便上报不同类型的谬误、性能、操作、自定义数据,联合多维分析和日志链路,帮忙开发者对于 Web 端实在数据进行报警归因、聚类分析、细节定位,解决用户白屏、性能瓶颈、慢查问等关键问题。
下图从用户的角度,形容了发现问题、剖析问题、解决问题、成果确认的整个流程。其中,JS 谬误监控、申请监控、动态资源监控等前端监控的外围性能均在以后平台涵盖,相干应用流程能够到文档站(https://www.volcengine.com/do…)查看。本文会对以后解决方案的重点性能白屏监控、性能监控以及数据摸索做具体介绍。

  1. 白屏监控
    白屏往往是因为代码执行谬误或者资源加载失败,导致页面渲染失败。一旦产生了白屏,页面就处于不可交互的状态,妨碍了用户应用,导致了用户散失。业界现有的检测方法是单纯基于 dom 的检测,办法繁多、通用性较差,不足业界认可的检测算法,并且无奈针对白屏进行归因,无奈为白屏提供无效的修复疏导。
    对此,火山引擎利用性能监控全链路版 Web Pro 监控采纳不断完善的打分策略、回测工作、即时截图保障了白屏检测的高准确性,使用户可能及时发现页面的白屏状态,并提供可归因剖析的相干数据,无效帮忙业务定位问题。
    首先,应用白屏列表查看趋势以及条目,如下图所示:

    其次,点击跳转到数据摸索,依据链路日志定位问题,比方下图定位到是 js 谬误导致了白屏,进而能够依据反解,定位到出错的代码行。

    点开 Session 标签页,能够很具体地看到以后 session 的日志流,找到对应的 JS 谬误和白屏,依据上下文进一步还原现场。
  2. 性能监控
    SDK 侧,Web Pro 监控采集了十分全面的性能指标,蕴含了 fp、fcp、fmp、tti、navigation timing 等惯例性能指标,也有 lcp、fid、mpfid、cls 等最能代表用户体验的指标,此外,页面产生的 longtask 也会进行上报,更多具体阐明能够查看该文档链接以及同级链接 https://www.volcengine.com/do…。
    平台侧,Web Pro 监控提供了页面性能总览和页面维度的性能指标,配合参考线,可能直观地展现所有性能指标在该时间段内的达标水平,而后针对于异样指标,进入数据摸索页面进一步剖析。
    具体步骤如下:
    进入「我的项目设置」页面依据业务场景对于性能指标参考线进行设置。
    性能参考线默认值参考了 web.dev(https://web.dev/user-centric-…),例如 LCP 的参考值为 2000ms 以内优良,4000ms 以上为较差,使用者能够在设置里依据理论需要调整参考值,比方下图把 3500ms 以上定义为较差。

    同时,平台给出了默认打分的配置,也能够依据理论须要来更改打分的比重。

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

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

    此时,能够发现 LCP 的值超过了之前设置的 3500ms 警戒线,须要对其进一步剖析。点击 LCP 题目,能够带上相干上下文,跳转至「数据摸索」。

    进入数据摸索页后,主动筛选出了以后 LCP > 3500ms 的日志,能够查看优化倡议文档 https://zjsms.com/FRDMgec/,联合指定日志的瀑布图进行针对性优化,具体能够参考下文数据摸索中对于页面加载的剖析。

    同理,其余性能指标也可依照上述的形式进行逐个优化。
  3. 数据摸索
    目前大部分的监控工具,都提供了相似 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 外部的所有监控能力齐全是一个个插件,反对可拔插、按需打包,且反对自定义插件。更多对于自定义插件的具体阐明可参考文档(https://www.volcengine.com/do…)
    灵便的采样
    采样规定重构,反对所有上报字段的采样、各种操作符的过滤以及采样条件的与和或。
    新增全局信息

    • 提供 release 概念,买通研发流程,为平台提供版本间优劣化数据比拟,谬误主动调配解决人等提供根底纬度
    • 提供 env 以配置不同环境,平台反对不同环境数据隔离生产,防止线下 / 测试数据影响线上稳定性监控
    • 提供 viewid 等标识,更好形容和串联一次页面生命周期的各类上报数据,为性能优化等排查提供根据

    SDK 本身性能优化
    SDK 在性能上也进行了大量性能优化,通过比照测试,SDK 对页面性能的影响曾经微不足道。目前字节外部绝大部分前端我的项目曾经接入了新版 SDK,没有任何性能异样相干的反馈。
    总结
    面向 Web 监控的全新解决方案带来了更加优雅、轻便、高性能的 SDK,更加贴近用户需要的生产平台,同时将来还会减少更多实用的新个性,比方 白屏主动归因、React 谬误生产、action 的上报及相干链路生产 等等,欢送体验并继续关注咱们的更新。

正文完
 0