背景
“异样感知——发现根因——解决问题”，基于该理念，火山引擎 APM 团队设计了高可用易扩大的 SDK 和生产平台，造成了一种面向 Web 监控的解决方案，该计划严密关联了各个性能，足以撑持简单场景下的性能、异样数据生产和剖析的需要。目前，字节外部已有超过 3000+ 个我的项目接入，在进行一直迭代、打磨后，决定把它交融入火山引擎全链路监控，为宽广内部的利用开发者提供服务。
重点性能介绍
平台通过灵便上报不同类型的谬误、性能、操作、自定义数据，联合多维分析和日志链路，帮忙开发者对于 Web 端实在数据进行报警归因、聚类分析、细节定位，解决用户白屏、性能瓶颈、慢查问等关键问题。
下图从用户的角度，形容了发现问题、剖析问题、解决问题、成果确认的整个流程。其中，JS 谬误监控、申请监控、动态资源监控等前端监控的外围性能均在以后平台涵盖，相干应用流程能够到文档站（https://www.volcengine.com/do…）查看。本文会对以后解决方案的重点性能白屏监控、性能监控以及数据摸索做具体介绍。
- 白屏监控
白屏往往是因为代码执行谬误或者资源加载失败，导致页面渲染失败。一旦产生了白屏，页面就处于不可交互的状态，妨碍了用户应用，导致了用户散失。业界现有的检测方法是单纯基于 dom 的检测，办法繁多、通用性较差，不足业界认可的检测算法，并且无奈针对白屏进行归因，无奈为白屏提供无效的修复疏导。
对此，火山引擎利用性能监控全链路版 Web Pro 监控采纳不断完善的打分策略、回测工作、即时截图保障了白屏检测的高准确性，使用户可能及时发现页面的白屏状态，并提供可归因剖析的相干数据，无效帮忙业务定位问题。
首先，应用白屏列表查看趋势以及条目，如下图所示：
其次，点击跳转到数据摸索，依据链路日志定位问题，比方下图定位到是 js 谬误导致了白屏，进而能够依据反解，定位到出错的代码行。
点开 Session 标签页，能够很具体地看到以后 session 的日志流，找到对应的 JS 谬误和白屏，依据上下文进一步还原现场。 - 性能监控
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/，联合指定日志的瀑布图进行针对性优化，具体能够参考下文数据摸索中对于页面加载的剖析。
同理，其余性能指标也可依照上述的形式进行逐个优化。 -
数据摸索
目前大部分的监控工具，都提供了相似 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 的上报及相干链路生产 等等，欢送体验并继续关注咱们的更新。