« 框架特定集成 Angular 集成 »
Elastic 文档 › ›框架特定集成

React 集成

编辑

React 集成编辑

本文档介绍如何将真实用户监控 JavaScript 代理与 React 应用程序结合使用。请参阅我们的入门指南以配置真实用户监控代理。

安装 Elastic APM React 包编辑

将 @elastic/apm-rum-react 包作为依赖项安装到您的应用程序中

npm install @elastic/apm-rum-react --save

检测您的 React 应用程序编辑

React 集成包提供了两种检测应用程序的方法

使用 @elastic/apm-rum-react >= 2.0.0 检测应用程序路由编辑

要检测应用程序路由，您可以使用包中提供的 ApmRoutes 组件。ApmRoutes 创建一个事务，该事务的名称为 Route 的路径，类型为 route-change。

ApmRoutes 仅支持使用 react-router 库版本 6 的应用程序。

当前不支持 RouterProvider 检测。

首先从 @elastic/apm-rum-react 包中导入 ApmRoutes

import { ApmRoutes } from '@elastic/apm-rum-react'

然后，使用 react-router 库中的 ApmRoutes 组件。 <ApmRoutes> 包装的每个 <Route> 都将被监控。

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <ApmRoutes>
          <Route path="/" element={<HomeComponent />} />
          <Route path="/about" element={<AboutComponent />} />
        </ApmRoutes>
      </BrowserRouter>
    )
  }
}
使用 @elastic/apm-rum-react < 2.0.0 检测应用程序路由编辑

要检测应用程序路由，您可以使用包中提供的 ApmRoute 组件。ApmRoute 创建一个事务，该事务的名称为 Route 的路径，类型为 route-change。

ApmRoute 仅支持使用 react-router 库版本 4 和 5 的应用程序。

首先从 @elastic/apm-rum-react 包中导入 ApmRoute

import { ApmRoute } from '@elastic/apm-rum-react'

然后，您应该将 react-router 库中的 Route 组件替换为 ApmRoute。您可以在要监控的任何路由中使用 ApmRoute，因此，您不必更改所有路由

class App extends React.Component {
  render() {
    return (
      <div>
        <ApmRoute
          exact
          path="/"
          component={() => (
            <Redirect
              to={{
                pathname: '/home'
              }}
            />
          )}
        />
        <ApmRoute path="/home" component={HomeComponent} />
        <Route path="/about" component={AboutComponent} />
      </div>
    )
  }
}

ApmRoute 仅在提供 component 属性时才检测路由，在其他情况下，例如使用 render 或 children 属性，ApmRoute 将仅呈现路由而不检测它，请在这些情况下使用 withTransaction 检测单个组件。

检测单个 React 组件编辑

首先从 @elastic/apm-rum-react 包中导入 withTransaction

import { withTransaction } from '@elastic/apm-rum-react'

然后，您可以使用 withTransaction 作为函数来包装您的 React 组件

class AboutComponent extends React.Component { }
export default withTransaction('AboutComponent', 'component')(AboutComponent)

withTransaction 接受两个参数，“事务名称”和“事务类型”。如果未提供这些参数，将使用事务 API中记录的默认值。

检测延迟加载的路由编辑

当使用 React.lazy 或类似 API 延迟渲染路由时，当前无法通过 ApmRoute 自动检测组件依赖项（JavaScript 包、API 调用等），因为 React 会挂起底层组件，直到所需的依赖项可用，这意味着我们的事务在 React 开始渲染底层组件之前不会启动。要检测这些延迟渲染的路由并捕获与组件关联的跨度，您需要使用 withTransaction API 手动检测代码。

import React, { Component, Suspense, lazy } from 'react'
import { Route, Switch } from 'react-router-dom'
import { withTransaction } from '@elastic/apm-rum-react'

const Loading = () => <div>Loading</div>
const LazyRouteComponent = lazy(() => import('./lazy-component'))

function Routes() {
  return (
    <Suspense fallback={Loading()}>
      <Switch>
        <Route path="/lazy" component={LazyRouteComponent} />
      </Switch>
    </Suspense>
  )
}

// lazy-component.jsx
class LazyComponent extends Component {}
export default withTransaction('LazyComponent', 'component')(LazyComponent)
« 框架特定集成 Angular 集成 »