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

背景
“异常感知——发现根因——解决问题”，基于该理念，火山引擎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的上报及相关链路消费等等，欢迎体验并持续关注我们的更新。