自2013年发布以来，反应.js已成为构建动态、高度交互式web应用程序前端的最流行解决方案之一。反应的陈述性和基于组件的体系结构使其更易于构建和维护单页应用程序.
虽然单页React应用程序可以提供强大的用户体验，但它们也带来了潜力监测挑战例如，由于单页应用程序可以更轻松地动态生成新视图，以促进无缝导航，因此您可能会发现自己拥有更大数量的路线更改数据，而这些数据更难以收集见解。随着前端处理的应用程序逻辑越来越多，收集尽可能多的错误上下文非常重要。最后，如果您正在利用React创建更动态的UI元素，那么适当地跟踪用户操作至关重要，包括跟踪、分类和故障排除问题所需的所有上下文。
为了帮助应对这些挑战，Datadog的真实用户监控团队已经建立了React组件组您可以调整并集成到您的应用程序中，以从您的instrumented React应用程序中获取更精细的数据，从而获得更好的见解。在本文中，我们将向您展示如何使用这些组件来：
反应路由器允许您在应用程序呈现时动态生成路由。这简化了开发，因为您不需要事先声明静态路由，这有助于您轻松地为不同的设备或屏幕大小组合多组有效路由。
监视路由更改对于全面了解站点上的用户流量至关重要，包括页面浏览次数、用户在页面上花费的时间以及常见的用户流量。在URL级别收集路由更改数据—也就是说，通过在每次更新URL时标记路由更改—足以捕获所有浏览器活动，但这可能会导致难以解析的混乱数据。例如，在电子商务站点上，您可能有一个产品视图，其中每个产品ID都有一个唯一的URL（例如。，/表/product/：id)。在您的RUM数据中，这将为潜在的数千种不同产品创建单独的视图路径。例如，如果要比较产品视图和签出视图之间的页面视图计数，则必须聚合所有这些产品视图路径才能进行有效的比较。
使用React Router组件，可以定义视图路径的约定，以便每次调用路由器时都创建一个新的RUM视图。这可以确保您的RUM数据与您在应用程序中定义页面的方式保持一致。因为该组件继承了与原始React Router库中的对应组件相同的属性，所以您的实现不需要做太多更改。只需使用<RumRoute/>管线更改定义中的组件，如下所示：
进口 {
浏览器路由器 作为 路由器，
} 从 '休息室';
进口 { 菜单 } 从 './菜单';
进口 { 购物车 } 从 './购物车;
进口 { 部门 } 从 './部门';
出口 功能 应用程序() {
返回 (
<div公司 类名=“应用程序”>
<路由器>
<菜单>
<RumRoute公司 路径="/">
<主页 />
</RumRoute>
<RumRoute公司 路径=“/部门/：名称/产品/：id”>
<部门 />
</RumRoute>
<RumRoute公司 路径=“/购物车”>
<购物车 />
</RumRoute>
</菜单>
</路由器>
</div（分频）>
);
}
现在，视图名称已经简化，并遵循您在布线结构中定义的约定。这使您能够轻松地在相关视图类别之间进行应用程序到应用程序的比较，并确保RUM中的视图路径名称精确地遵循路由器中的定义。
在向React应用程序添加错误处理时，您希望适当地捕获每个错误，记录相关上下文以进行调试，并防止应用程序的其余部分崩溃。在vanilla JavaScript中，这通常是使用try-catch块完成的。但为了以保留React的声明式架构的方式实现这一点，Facebook添加了错误边界特征2017年第16号反应。
错误边界是React组件，它在渲染期间和任何嵌套组件的生命周期内，在其子组件树中的任何位置捕获JavaScript错误。使用错误边界，可以使用安全回退来包装组件（或一组相关组件）：
- 正确卸载到用户友好的错误消息UI，而不是显示崩溃的组件树
- 发出错误的完整上下文，包括边界内的整个堆栈跟踪
将这个重要的上下文放入您的React错误日志中，以便您可以将它们发送到Datadog进行分析并在中进行监视错误跟踪，我们构建了一个Error Boundary组件，它的工作方式与React 16+附带的组件类似，另外还有一个优点，即自动将其所有日志数据转发给Datadog。只需包装要处理错误的UI对象的父组件，以便使用<错误边界/>元素。
进口 { 购物车 } 从 './购物车;
出口 功能 结账() {
返回 (
<div公司 类名=“结账”>
<菜单 />
<错误边界
退路={(错误) => <div公司>无法 到 负载 购物 运货马车: {错误.消息}</div>}
>
<购物车 />
</错误边界>
</div（分频）>
);
}
例如，当在错误跟踪中对问题执行root-cause分析时，您现在有一个错误堆栈跟踪和一个breadcrumbs跟踪，标识层次结构中失败的组件上方和定义的错误边界内的每个组件。这提供了更多的上下文，了解用户选择的导致错误的路径，以及帮助您解决错误的关键状态信息。
通过跟踪用户操作，您可以完整了解用户单击或提交输入的页面元素以及每个操作所用的时间。这有助于量化功能采用，了解关键UI元素的性能，并确定导致特定浏览器错误的步骤。默认情况下，数据狗RUM跟踪用户点击。但在React应用程序中，UI元素通常由多个嵌套组件组成，因此有更深入的上下文来准确地说明在操作之前调用了哪些组件是很有用的，尤其是当操作触发错误时。通过使用我们新的RUM组件上下文提供程序检测组件，您可以获得用户遍历的组件的完整breadcrumb路径，以形成围绕操作的整体上下文。您还可以定义自定义属性，以帮助您使用关键数据标记操作（例如，包括按下的按钮的名称，或附加正在购买的项目的产品ID）。
您可以用<RumComponentContextProvider/>组件。或者使用<WithRumComponentContext/> HOC公司用于任何功能组件。您包装的任何组件都将显示在面包屑轨迹中，以查找触发的错误或进一步向下的操作。然后，使用包含的使用RumAction和使用Rum错误钩子，您可以在RUM中为组件逻辑的特定情况生成操作和错误。
常量 应用程序 = 使用RumComponentContext(“应用程序组件”， () => {
常量 添加操作 = 使用RumAction(“跟踪AppAction”);
常量 addError（添加错误） = 使用Rum错误();
返回 (
<div公司 类名=“应用程序”>
<按钮
onClick（单击）={() => addError（添加错误）('来自根的新错误。应用程序组件')}
>
生成 错误 从 根.应用程序组件
</按钮>
<按钮
onClick（单击）={() => 添加操作('来自根的新操作。应用程序组件')}
>
生成 行动 从 根.应用程序组件
</按钮>
</div（分频）>
);
})
使用内置价值和标签字段作为声明中的道具，还可以添加自定义属性来帮助描述用户正在做什么。例如，如果您在电子商务网站上跟踪“添加到心愿单”按钮，您可以添加已保存到愿望列表作为标签，以确保在Datadog中查看操作时保留此上下文。
在Datadog RUM中，您可以在动作的“自定义属性”中轻松查看此数据。您还可以看到详细的性能瀑布图、用户信息（如设备、浏览器、位置）、相关的后端跟踪和日志等。通过这种方式，您可以获得所需的所有上下文，以了解用户通过UI的路径，以及应用程序如何响应。
有了Datadog RUM的React支持，很容易用全面的上下文丰富React应用程序记录的路由更改、用户操作和错误，以帮助您了解用户行为并跟踪、分类和调试问题。这三个组件都是开源的，可以轻松地与现有应用程序集成。查看我们的Github储存库查看源代码以及详细的安装说明。有关Datadog RUM的更多信息，请参阅我们的文档或者，如果您是Datadog的新手，请从14天免费试用.
