使用Datadog RUM从后端到前端的桥梁 | 第1部分

部分1：Datadog在Web应用程序中的实时用户监控

作为一名性能与DevOps工程师，我之前更多地接触到与后端相关的技术和体系结构。我意识到我在前端开发方面存在一些缺陷。在如今的技术领域中，对这两个领域的整体理解是无价之宝。让我们一起踏上从后端向前端转型的旅程。我们将探索HTML、CSS、JavaScript以及现代前端框架，揭开响应式设计、用户界面和用户体验的神秘面纱。这个三部分系列不仅仅是我学习之旅的记录，也是为那些希望扩展自己视野的工程师们提供的资源。让我们通过拥抱前端开发来开启创造力和技术精通的新境界。

通过 ChatGPT 的帮助，让我更加强大我的前端之旅

我在前端代码方面并不是专家。多亏了创新，通过使用ChatGPT，我们能够快速创建一个能够正常工作的前端应用程序。在这个小项目中，我使用了ChatGPT来帮助我编写简单的HTML、CSS和JavaScript代码。

给ChatGPT点个赞！通过它，我也学会了如何使用ChatGPT来改进编程实践并编写更好的代码。

因此，我在这个项目中的目标是通过将Datadog RUM实现到井字棋Web应用程序中，进一步了解前端。您可以访问https://tictactoe-jon.tiiny.site/上的简单井字棋Web应用程序。

Part 1: Datadog 在 Web 应用程序中的真实用户监测

第二部分：在Datadog中实现功能标志追踪，以实现更深入的可观察性。

第三部分：通过CI/CD集成向左移动，更加主动地进行前端监控。

为什么前端可观察性很重要？

在技术工程的动态领域中，应用程序和服务的心跳必须被精确监控，可观察性占据至高无上的地位。在这一实践的核心是可观测性的三个支柱：指标、跟踪和日志。

这些支柱照亮了您系统的内部运作，帮助您诊断问题，优化性能，并确保用户体验的流畅。

作为快节奏发展环境中的工程师，我们的工具包是必不可少的。想象一下拥有一把用于观测的“瑞士军刀”，其中你很可能会找到Prometheus、OpenTelemetry、Loki和Grafana这些多功能工具。

当涉及到前端（浏览器、移动应用程序）时，获得可观察性洞察力也非常重要。

• 揭示用户与您的应用程序的互动方式（与性能相关）。
• 了解用户如何体验您的应用程序（与用户分析相关）。

实时用户监控（RUM）@ Datadog

Datadog的RUM可帮助您更深入地了解前端应用程序。RUM不仅提供与性能相关的洞察，还提供分析相关的洞察。

在您的应用程序中安装Datadog RUM

根据您的前端托管位置（网页或移动端），安装步骤会有所不同。由于我将托管井字游戏应用程序（井字游戏应用程序包括一个简单的HTML、CSS和Javascript文件）在网页上，我将使用Datadog的浏览器RUM SDK。请在此处查看Datadog RUM SDK的不同设置方法。

以下是在浏览器上实现RUM的三种不同方法的摘要。根据您的使用情况，您可以选择其中任意一种方法。

对于我的情况来说，我将选择使用CDN异步加载，因为我想保持代码的HTML部分的改动。

• 将生成的代码片段添加到您要监视的每个HTML页面的head标签中，以初始化Datadog RUM SDK。

在Datadog平台上探索RUM数据

总体情况

• Datadog上的性能摘要视图是一个互动的仪表板，为您的前端应用程序提供综合的性能相关洞察。



• 这是一个很好的视角，可以开始更多地了解性能度量、错误度量和部署相关度量。
• 从这里，您可以导航到其他预建的仪表板，以便进行更深入的分析。

以下是一些在安装Datadog的RUM SDK后可用的预建仪表板示例。

分析摘要

• RUM软件开发工具包还提供了专门的视图来显示与分析相关的信息。这对于希望获取与用户相关的洞察的工程师非常有用。



• 该视图也被归类为各个部分，如参与度、获取、人口统计和挫败信号。
• 挫折信号是非常有趣的，因为你可以看到Datadog的RUM能够测量到用户的挫折点（即用户的痛点）。

沮丧是一种无形的东西，所以如何将其模拟为一个信号以提供更多前端见解是非常有趣的。

TL;DR. 有三种类型的沮丧信号：死点击，错误点击和愤怒点击。

你可以在这里阅读更多。

• 漏斗分析是Datadog RUM中的另一个功能，它可以让您深入了解和理解应用程序中的特定用户流程。这样可以让您监控特定关键业务流程（例如关键支付流程等）。
• 在这个示例中，我想要了解用户在使用我的功能标志时的应用流程（将X符号更改为△）。





• 最后但同样重要的是，当涉及到用户与您的前端交互时，热点图可以帮助您更好地了解前端上的热点区域。



• 从热图上看出的颜色渐变，似乎许多用户的策略是占据中心网格。当然，对于关键业务应用来说，这将为您提供有用的与业务相关的见解，帮助您优化您的应用程序。

会话回放

• 回放会话是另一个有用的功能，它帮助工程师将前端指标和日志与用户所见的内容关联起来。
• 您可以在此处的Datadog文档中了解更多有关会话重放的信息。
• 在涉及这些RUM收集的数据的隐私相关设置方面，也有许多选项，可以在这里和这里找到。

给RUM会话添加更多的上下文

我已经通过Datadog RUM SDK的原始实施看到了很多见解。在这部分中，我将用与用户相关的上下文来丰富我的RUM会话。这些信息将帮助我更容易地确定特定用户，并帮助识别会话。

对于一项业务关键的应用程序，尤其是在事故管理期间，每一秒钟都非常重要。添加这个上下文将帮助您节省这些时间，并帮助您更快地找到所需的内容。

• 由于这只是一个演示应用程序，并且我实际上没有一个服务器端来存储登录信息，我将会生成虚假的用户登录信息。您可以从上面的代码中查看。
• 为了设置用户上下文，请使用 window.DD_RUM.setUser。
• 通过这样做，我们将能够使用这些用户上下文来过滤特定用户会话，以开始分析前端数据。

第一部分结论

Datadog RUM SDK提供了许多功能。令人惊讶的是，仅通过RUM SDK的原始实现就可以获得大量与前端相关的度量和洞察。有许多方法可以丰富RUM SDK收集的事件。在第一部分中，我们已经看到了如何能够向RUM会话添加用户上下文，以帮助识别来自特定用户的会话。

第1部分涵盖的关键特点包括性能摘要（核心网络要素，预构建仪表板），分析摘要（漏斗分析，用户痛点信号，热力图）和会话重放。

在Datadog RUM产品中有更多可以探索的地方。我个人最喜欢的是通过连接RUM到后端APM跟踪，轻松地保持上下文。您可以在前端应用程序上尝试使用RUM SDK，并在Datadog的免费14天试用版中亲自体验！

在这个系列的第2部分中，我们将看到Datadog如何帮助您进行功能标志跟踪。