背景

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

重点功能介绍

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

下图从用户的角度，描述了发现问题、分析问题、解决问题、效果确认的整个流程。其中，JS 错误监控、请求监控、静态资源监控等前端监控的核心功能均在当前平台涵盖，相关使用流程可以到文档站（https://www.volcengine.com/docs/6431/102455）查看。本文会对当前解决方案的重点功能白屏监控、性能监控以及数据探索做详细介绍。

1. 白屏监控

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

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

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

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

1. 性能监控

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

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

具体步骤如下：

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

性能参考线默认值参考了 web.dev（https://web.dev/user-centric-performance-metrics/），例如 LCP 的参考值为 2000ms 以内优秀，4000ms 以上为较差，使用者可以在设置里根据实际需求调整参考值，比如下图把 3500ms 以上定义为较差

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

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

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

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

进入数据探索页后，自动筛选出了当前 LCP > 3500ms 的日志，可以查看优化建议文档https://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 内部的所有监控能力完全是一个个插件，支持可拔插、按需打包，且支持自定义插件。更多关于自定义插件的详细说明可参考文档（https://www.volcengine.com/docs/6431/108981）

灵活的采样

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

新增全局信息

• 提供 release 概念，打通研发流程，为平台提供版本间优劣化数据比较，错误自动分配处理人等提供基础纬度

• 提供 env 以配置不同环境， 平台支持不同环境数据隔离消费，避免线下 / 测试数据影响线上稳定性监控

• 提供 viewid 等标识，更好描述和串联一次页面生命周期的各类上报数据，为性能优化等排查提供依据

SDK 自身性能优化

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

总结

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

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

申请链接：https://wenjuan.feishu.cn/m/cfm?t=s6RJBByEbWvi-fmpz