引言

作为一名前端开发者，你一定遇到过以下问题：

业务报错难以查找

用户环境复杂多变

线上问题难以复现

监控系统众多，一个项目内集成了很多上报代码，有时候数据上报代码甚至多余业务代码

计算首屏没有统一的标准，项目中打了很多点来上报首屏

API 或者静态资源报错导致页面不可用或出错，开发者无感知

用户反馈问题，前端查到接口超时或者报错，后端查日志发现没有找到请求

使用用户访问监测对网站或应用程序的访问情况进行监测和分析，以了解用户的行为和使用习惯。通过用户访问监测，可以收集到许多有用的数据，例如访问量、页面停留时间、用户地理位置、流量来源等等。这些数据可以帮助网站或应用程序的管理者了解用户的需求和行为，进而优化网站或应用程序的功能和设计，提升用户体验和满意度。与后端监控相比，前端监控更贴近用户，能够高效反馈真实用户在使用产品过程中的体验。对于产品性能质量提升和现网问题的发现，前端监控是非常重要的工具。

用户访问监控

什么是 RUM

当我们访问一个网站或应用程序时，实际上是通过浏览器向服务器请求数据。服务器会响应这个请求并返回数据。浏览器接收到数据后进行渲染，并展示给用户。而RUM监控（Real User Monitoring）就是一种监测技术，可以在用户访问应用程序时，实时监控和记录用户的真实行为数据，包括页面加载时间、网络延迟、用户交互时间等。这些数据可以帮助我们更好地了解应用程序的性能瓶颈和用户体验，从而进行优化和提升。

RUM监控的原理是基于前端代码的嵌入和执行。通过在应用程序中嵌入JavaScript脚本，可以在用户访问应用程序时，实时记录用户的行为数据，并将数据上传到服务器进行分析。RUM监控的数据来源是真实用户的访问行为，可以反映出用户的实际体验。相比于基于模拟器或虚拟机的性能测试，RUM监控更加真实可靠。

RUM 监控的重要性

RUM监控是一种基于真实用户体验的监控方式。它可以帮助我们实时监测应用程序的性能和用户体验，从而发现和解决性能问题，提高用户满意度和忠诚度。在如今信息时代，应用程序越来越复杂，用户对于应用程序的要求也越来越高。在这样的背景下，对于应用程序的监控也越来越重要。RUM监控正是一种非常有用的监控方式，它可以帮助我们实时了解应用程序的性能状况和用户体验，及时发现和解决性能瓶颈和问题，从而提升应用程序的用户满意度和效益。我们可以从以下几方面来了解 RUM 监控的重要性：

实时性能监测：RUM监控可以实时监测应用程序的性能和用户体验，例如页面加载时间、网络延迟、用户交互时间等，可以及时发现和解决性能问题，提高应用程序的可用性和稳定性。

精准性能分析：RUM监控可以提供详细的性能指标数据，包括页面加载时间、资源加载时间、DNS解析时间、TCP连接时间、SSL握手时间、服务器响应时间、DOM解析时间、JavaScript执行时间等，可以帮助我们精准地分析和定位性能问题。

用户体验评估：RUM监控可以根据用户体验指标，例如用户交互时间、页面停留时间、错误率等，评估用户的满意度和忠诚度，从而优化用户体验，提高用户的参与度和留存率。

数据驱动决策：RUM监控可以提供详细的性能指标数据和用户体验数据，可以帮助我们做出数据驱动的决策，例如优化页面设计、调整服务器配置、升级网络带宽等，从而提高应用程序的性能和用户体验。

跨平台支持：RUM监控可以支持多种操作系统、浏览器和设备，可以帮助我们了解不同平台的性能和用户体验，优化应用程序的跨平台兼容性。

RUM 健康的衡量标准

前端应用性能黄金指标

Google提出的前端应用性能黄金指标（Frontend Performance Golden Metrics）是一组用于衡量前端应用程序性能的关键指标。这些指标主要包括以下六个方面：

FP（First Paint）：首次绘制，指浏览器第一次绘制页面的时间点，通常是浏览器绘制任何文本、图像、背景颜色等的时间点。FP的优化可以通过优化CSS、JavaScript加载等手段来实现。
FCP（First Contentful Paint）：首次内容绘制，指浏览器第一次绘制页面中的任何有意义的内容的时间点，例如文本、图像、背景颜色等。FCP的优化可以通过优化HTML、CSS、JavaScript加载等手段来实现。
FID（First Input Delay）：首次输入延迟，指从用户第一次与页面交互到页面响应用户输入的时间差，通常用于衡量页面的响应性能。FID的优化可以通过减少JavaScript执行时间、优化事件监听器等手段来实现。
TTI（Time to Interactive）：可交互时间，指浏览器在处理完所有关键资源之后，页面变得可交互的时间点。TTI的优化可以通过减少关键资源加载时间、延迟JavaScript执行等手段来实现。
LCP（Largest Contentful Paint）：最大内容绘制，指页面中最大的可见内容（例如图片、视频、文本等）的加载时间。LCP的优化可以通过优化图片、视频、字体等资源的加载时间来实现。
CLS（Cumulative Layout Shift）：页面在加载过程中发生的所有布局变化的总和。布局变化包括页面中的元素大小、位置和样式等的变化。CLS是一项关键的Web核心指标，可以反映页面的稳定性和用户体验，特别是对于移动设备用户和慢速网络用户而言。

Lighthouse 工具介绍

Lighthouse是一个自动化的开源工具，可用于评估网站的性能、可访问性、最佳实践、SEO等方面。它是Google Chrome开发者工具的一部分，也可以通过Chrome扩展程序或命令行工具来使用。Lighthouse会模拟用户体验，并评估网站在各方面的表现，最后生成一个报告，该报告列出了一些改进点和优化建议。

使用 Lighthouse 对网站进行测评后，我们会得到一份评分报告，它包含了性能（Performance），访问无障碍（Accessibility），最佳实践（Best Practice），搜索引擎优化（SEO），PWA（Progressive Web App）五个部分：

性能评分的分值区间是0到100，如果出现0分，通常是在运行 Lighthouse 时发生了错误，满分100分代表了网站已经达到了98分位值的数据，而50分则是75分位值的数据。

影响评分的性能指标：性能测试结果会分成 Metrics，Diagnostic，Opportunities 三部分，但只有 Metrics 部分的指标项会对分数产生直接影响。

Lighthouse 会衡量以下 Metrics 性能指标项：

首次内容绘制（First Contentful Paint）。即浏览器首次将任意内容（如文字、图像、canvas 等）绘制到屏幕上的时间点。

首次有效绘制（First Meaningful Paint）。衡量了用户感知页面的主要内容（primary content）可见的时间。对于不同的站点，首要内容是不同的，例如：对于博客文章，标题及首屏文字是首要内容，而对于购物网站来说，图片也会变得很重要。

首次 CPU 空闲（First CPU Idle）。即页面首次能够对输入做出反应的时间点，其出现时机往往在首次有效绘制完成之后。该指标目前仍处于实验阶段。

可交互时间（Time to Interactive）。指的是所有的页面内容都已经成功加载，且能够快速地对用户的操作做出反应的时间点。该指标目前仍处于实验阶段。

速度指标（Speed Index）。衡量了首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容，往往能给用户带来更好的体验，所以速度指标的值约小越好。

输入延迟估值（Estimated Input Latency）。这个指标衡量了页面对用户输入行为的反应速度，其基准值应低于 50ms。

Metrics 部分的指标项会直接影响分数，可以作为我们的主要参考点。另外的两部分中，Opportunities指的是优化机会，它提供了详细的建议和文档，来解释低分的原因，帮助我们具体进行实现和改进。Diagnostics指的是现在存在的问题，为进一步改善性能的实验和调整给出了指导。这两者不会纳入分数的计算。

用户访问监控方法

RUM监控主要通过在用户端嵌入JavaScript代码来实现。该代码会在用户访问网站时自动加载并收集用户端性能数据，如页面加载时间、渲染时间、网络延迟等。以下是一些常用的RUM监控方法：

使用第三方工具：一些第三方工具，如Google Analytics、New Relic、DataDog、Guance 等，提供了RUM监控功能。开发者可以在网站中嵌入相应的JavaScript代码，即可使用这些工具进行RUM监控。
自行开发：开发者也可以自行开发RUM监控工具，主要步骤包括：

收集数据：使用JavaScript代码在用户端收集性能数据，并通过XMLHttpRequest或fetch API将数据发送到服务器端。

存储数据：服务器端接收到数据后，将其存储在数据库或日志文件中。

展示数据：使用数据分析工具或自行开发的数据展示工具，将收集到的数据进行分析和展示。
使用开源工具：一些开源工具，如Boomerang、Pingdom等，提供了RUM监控功能。开发者可以在网站中嵌入相应的JavaScript代码，并使用这些工具进行RUM监控。

通过这些监控，对关键业务场景和性能指标进行定义、设置阈值和警报、监测和分析数据、进行优化和改进等步骤，可以全面评估应用程序的健康状态，及时发现和解决问题，提高应用程序的健康水平。

用户访问监控和挑战

用户访问监控的问题

随着互联网应用的快速发展，以及用户对网站性能和用户体验的重视度越来越高，传统的基于服务器端的性能监测已经无法满足需求。为了从用户的角度出发，了解用户真实的使用体验和反馈，我们需要通过用户访问监控来帮助网站和应用程序的开发者了解用户的访问行为和使用情况，包括网站加载速度、页面响应时间、交互体验、错误率等指标。

比如这样一个页面，我们在配置告警的时候就会遇到一些问题:

在实际应用中，我们常常会遇到前端性能监测预警困难的问题。一方面，不同的页面需要配置不同的警戒阈值，这在大量页面监控时可能会变得繁琐。

当我们需要监控的页面变得非常多时，问题的告警也会随之增加，出现告警风暴的风险也会随之上升。

用户访问监控需要收集和处理大量的数据，例如性能指标、用户行为等，这对服务器和网络资源的消耗较大。在数据处理和分析方面，会出现定位问题用户页面困难的问题。

当我们通过配置阈值预警定位到问题时，由于缺乏上下文信息和用户所处的使用环境缺失，会出现预警不可解释的问题。

当出现高跳出率时，由于缺乏有效的关联和性能监控，我们不能确定是因为网站质量导致的跳出率增高还是客户端性能问题导致的跳出率增高。

那么针对于以上的问题我们该采用怎么样的思路来解决问题最终达成我们针对于应用可以做到无阈值告警呢？

如何做到用户访问做到无阈值预警

收集前端应用性能数据

首先第一步我们我们需要收集统计我们前端应用在不同用户页面的 LCP、FID、CLS 的值，来为我们针对不同用户访问页面要做的无阈值告警准备：

LCP：在页面加载过程中，找到最大的页面元素（图片、视频、文本等）并记录它们的渲染时间，最终选择最大的时间作为 LCP 值。

FID：测量用户首次点击或触摸页面时，从事件触发到浏览器响应的时间间隔。

CLS：页面上所有可见元素在加载过程中，如果它们的位置发生了变化，则记录发生变化的元素面积乘以位置变化的距离，并将所有元素的得分相加，最终得到 CLS 值。

针对不同页面状态做出诊断

我们可以根据统计好的信息来对异常状态做出相应的诊断：

当页面 LCP P75 出现异常时：如果我们发现某个用户访问页面的 LCP P75 渲染时间超过 2.5 秒，我们可以通过该用户 ID 和页面对应的 session ID 还原出用户完整的访问路径。通过 tags 关联当时的用户访问环境、浏览器、操作系统、地址、城市等信息，来定位最终的问题。

当页面 FID P75 出现异常时：如果我们发现某个用户访问页面的 FID P75 渲染时间超过 100 毫秒，我们可以通过该用户 ID 和页面对应的 session ID 还原出用户完整的访问路径。通过 tags 关联当时的用户访问环境、浏览器、操作系统、地址、城市等信息，来定位最终的问题。

当页面 CLS P75 出现异常时：如果我们发现某个用户访问页面的 CLS P75 渲染时间超过 0.1，我们可以通过该用户 ID 和页面对应的 session ID 还原出用户完整的访问路径。通过 tags 关联当时的用户访问环境、浏览器、操作系统、地址、城市等信息，来定位最终的问题。

当应用出现新异常时：当我们发现前端应用出现新的 js 错误的时候，我们会捕获新出现的 js 错误，可以通过关联对于的日志及当时的用户访问环境、浏览器、操作系统、地址、城市等信息，来定位最终的问题。

针对于前端应用性能问题做出根因分析

当我们发现某个应用的 LCP、FID、CLS 等指标 P75 出现异常时，我们可以根据每个页面的 P75 指标来判断哪个页面的性能出现了问题。我们可以根据问题页面来确定出现问题的具体用户、访问路径、环境、操作系统、地域和浏览器等相关信息。此外，我们还可以根据当前页面资源对应的 Trace ID 来查看是否发生了后端应用的影响。

通过有价值的事件报告快速排查问题

我们可以把所收集到的异常指标、异常页面、受影响用户采样信息以及相应的优化意见制作成事件报告，这样便于我们对异常进行复盘交流，以及跟开发对接快速对应用性能进行调优。

在我们确定好了异常根因后可以通过对用户访问路径的还原以及操作的回放来复盘受影响用户的全链路全场景成因。

当然对前端应用错误的复盘也是十分重要的，当我们再发现应用出现新的错误的时候也需要及时的形成对应的错误报告来进行复盘交流，以及跟开发对接快速对错误进行修复。

常用前端应用监控工具介绍

观测云：观测云，新一代云原生全链路数据可观测平台，国内首批获得中国信通院颁发的「可观测性平台技术能力」先进级认证，实现统一采集、统一标签、统一存储和统一界面，带来全功能的一体化可观测体验。观测云能全环境高基数采集数据，支持多维度信息智能检索分析，及提供强大的自定义可编程能力，使系统运行状态尽在掌控，故障根因无所遁形。

Datadog： Datadog 是用于大规模应用程序的监视和分析平台。它包括基础结构监视、应用程序性能监视、日志管理和用户体验监视。 Datadog 通过 400 多项集成来聚合整个堆栈中的数据，以便进行故障排除、发出警报和图形处理。可以将其用作单个源，以便进行故障排除、优化性能和跨团队协作。

用户访问监控展望

RUM监控是一种监控技术，可以实时监控和记录用户的真实行为数据，包括页面加载时间、网络延迟、用户交互时间等。与后端监控相比，前端监控更贴近用户，能够高效反馈真实用户在使用产品过程中的体验。RUM监控的原理是基于前端代码的嵌入和执行。通过在应用程序中嵌入JavaScript脚本，可以在用户访问应用程序时，实时记录用户的行为数据，并将数据上传到服务器进行分析。RUM监控的数据来源是真实用户的访问行为，可以反映出用户的实际体验。相比于基于模拟器或虚拟机的性能测试，RUM监控更加真实可靠。

未来的RUM监控将更加注重精细化的数据分析和统计，以帮助开发者更好地了解应用程序的性能瓶颈和用户行为。未来的RUM监控将不仅关注应用程序的性能数据，还将更加注重用户行为和用户体验的数据，以更深入地了解用户的需求和行为。随着人工智能和机器学习技术的不断发展，未来的RUM监控将更加注重智能化的分析和处理，以帮助开发者更快速地识别和解决问题。未来的RUM监控将扩展到移动应用程序和其他平台，同时也将更好地支持跨设备的监控。RUM监控也将更加注重数据安全和隐私保护，以保障用户的数据安全和隐私不受侵犯。

你知道前端用户体验优化的黄金利器- RUM 吗？

引言