Digital Experience Monitoring with Grafana Cloud: Session Replay, synthetic checks, and faster investigations

当生产环境出现问题时，最关键的问题往往也是仅凭指标最难回答的：哪些用户受到影响？他们实际看到了什么？这是否值得叫醒某人处理？回答这些问题需要更全面地了解问题本身及其对用户的影响。

这就是 Grafana Cloud 的 Digital Experience Monitoring（DEM）发挥作用的地方。通过结合 Frontend Observability 和 Synthetic Monitoring，DEM 将真实用户体验与主动测试连接起来，帮助工程团队在 Grafana Cloud 内全面了解问题范围、调查根本原因并更快地解决问题。

在本文中，我们将介绍 Grafana Cloud 最新 DEM 的更新内容以及如何快速上手。您也可以通过下方视频了解更多内容。

首先，什么是数字体验监控？

Grafana Cloud 的数字体验监控可为您提供完整的用户使用体验视图，从真实用户数据到主动合成检查。

%3Aquality(90)%2F&w=3840&q=75)

DEM 帮助您的团队实现：

• 真实用户可见性：了解用户真正如何体验您的网络应用，而不仅仅是后端指标所暗示的内容。

• 主动检测：通过自动化检查关键用户旅程，在用户发现问题之前提前识别问题。

• 端到端关联：将前端信号与背后的后端追踪关联起来。

• 更快的解决：将平均恢复时间从小时缩短到分钟。

会话回放：直观查看用户实际看到的内容

%3Aquality(90)%2F&w=3840&q=75)

在 Grafana Cloud 前端可观测性中使用会话回放 可视化回放用户在您的 Web 应用中看到和执行的操作。您的团队可以精准查看用户实际体验，并将其与 Core Web Vitals、用户行为和追踪等真实用户监控信号关联，这使其成为排查故障和进行根因分析的强大工具。

会话回放功能由 Faro 提供支持，这是 Grafana 开源的 JavaScript 检测库，用于收集真实用户监控数据。让我们逐步了解如何进行配置。

步骤1：将回放检测添加到 Faro

我们首先将 Faro Web SDK 添加到 Web 应用中。初始化 Faro 时，我们将回放检测与标准的 Faro Web 检测一起启用：

import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
import { ReplayInstrumentation } from '@grafana/faro-instrumentation-replay';

initializeFaro({
  url: 'https://your-faro-endpoint.com',
  instrumentations: [
    // 标准的 Faro 检测：错误、Web 核心指标、用户行为等
    ...getWebInstrumentations(),
    // 启用会话录制
    new ReplayInstrumentation(),
  ],
});

初始化时，默认配置采用“以隐私为先”的原则，但您可以进一步调整符合需求的遮蔽、隐私和采样选项。例如，您可以遮蔽特定的输入类型，或仅对部分会话进行回放录制。

步骤2：生成一些会话数据

一旦 Web 应用完成检测配置，我们就可以看到其实际运行效果。以我们的演示应用 QuickPizza 为例，这是一个允许用户创建披萨组合的 Web 应用。在网站上，我们将像真实用户一样点击几个按钮并体验应用。所有这些操作都会被记录并发送到前端可观测性系统。

步骤3：查找您的会话录制

%3Aquality(90)%2F&w=3840&q=75)

接下来，我们将进入前端可观测性应用，打开 Sessions，并向下滚动以找到我们的会话记录。

[步骤 4：探索回放](https://grafana.com/blog/digital-experience-monitoring-with-grafana-cloud-session-replay-synthetic-checks-and-faster-investigations/#step-4-explore-the-replay)

%3Aquality(90)%2F&w=3840&q=75)

我们的会话已加载完成，可以选择其中一个进行回放。敏感信息在客户端被遮蔽，这意味着这些信息永远不会发送到 Grafana Cloud，但你仍然可以清晰地看到鼠标移动和 DOM 操作。查看会话记录有两种方式：你可以直接从会话详情页面打开会话，或者点击绿色按钮在新标签页中打开播放器。我们建议使用第二种方式，因为它可以让你在观看记录的同时，与始终与播放器状态同步的完整用户旅程并排查看。

回放播放器为你提供对播放的完全控制：

• 播放控制：播放、暂停，以及向前或向后跳过十秒

• 可调节速度：从 0.25x 到 16x，便于快速浏览较长的会话

• 跳过空闲时段：跳过记录中安静的部分，让你专注于关键内容

• 分享按钮：复制回放中特定时刻的链接，可以将问题发生的精确时刻发送给队友

在右侧，你可以看到带有时间戳的用户旅程，显示用户和浏览器在该时间点的经历。你还可以从这个视图中看到错误，直接跳转到错误，按错误进行筛选和排序。

这就是 Session Replay 真正强大的地方。由于回放与现有的 Faro 监控数据相关联，你可以直接从仪表板中的前端错误跳转到该会话的回放，观看用户在错误发生时的具体操作，然后进一步深入查看相关联的追踪信息。

要了解更多关于前端可观测性中 Session Replay 的信息，请查看 这篇博客文章 和我们的 技术文档。

[合成监控与前端可观测性：相辅相成](https://grafana.com/blog/digital-experience-monitoring-with-grafana-cloud-session-replay-synthetic-checks-and-faster-investigations/#synthetic-monitoring-and-frontend-observability-better-toget)

Grafana Cloud 合成监控通过对关键用户旅程执行自动化检查，帮助您在真实用户看到问题之前发现潜在故障，而 Grafana Cloud 前端可观测性则记录真实用户实际体验的细节，将前端性能转化为可量化并采取行动的指标。二者结合构成了 Grafana Cloud 数字体验监控的基础，为您提供主动预警与真实世界视角相结合的用户数字体验全景视图。

我们近期优化了在排查问题时在合成监控与前端可观测性之间切换的体验，实现了从合成检查到前端体验再到其背后追踪的端到端关联。

每次合成监控浏览器检查运行时，都会被动创建一个匹配的前端可观测性会话，该会话是对真实用户旅程的完全可控且可重复的运行。现在您可以在检查界面直接调取前端可观测性数据作为上下文信息，并立即跳转到该次运行生成的精确会话。进入会话后，您可以查看会话回放、用户旅程和追踪信息。

%3Aquality(90)%2F&w=3840&q=75)

您的合成浏览器检查结果不再只是通过或失败的二元判断。每次运行都会提供反馈信息，当检查失败时，您可以精确查看发生了什么。这意味着您可以最终回答每个值班工程师都会提出的疑问：这个失败的检查是否真的影响了真实用户？具体影响了多少用户？

分析失败检查的流程

让我们进入合成监控界面，实际演示这一集成功能。我们已经配置了一个模拟典型 QuickPizza 用户流程的浏览器检查，并刚刚收到该检查失败的告警。

1. 打开检查仪表板。我们立刻可以看到失败的检查。

1. 定位失败执行。在时间点探索器中，我们可以看到每个单独的执行记录，包括失败的案例。我们将选择其中一个。

1. 查看前端会话。向下滚动时，会看到一个查看前端会话的按钮。点击该按钮，即可直接打开此次运行对应的前端可观测性会话。

%3Aquality(90)%2F&w=3840&q=75)

此视图包含我们调查所需的所有内容：会话回放功能，可逐步可视化检查执行的每个操作；运行过程中的用户体验指标；完整的用户旅程；以及背后的追踪信息。只需几次点击，我们就能从警报，到执行失败，再到实时查看检查过程中发生的具体情况。

[了解更多](https://grafana.com/blog/digital-experience-monitoring-with-grafana-cloud-session-replay-synthetic-checks-and-faster-investigations/#learn-more)

如需了解更多，请访问我们的数字体验监控解决方案页面，或通过查阅我们的技术文档深入了解每款工具：前端可观测性 和 合成监控。

_Grafana Cloud 是开启数字体验监控最简单的方式。我们提供慷慨的免费层级，包含每月10万次测试执行额度及更多功能。_ 立即免费注册！

标签 /