›

React 集成

本文档介绍如何在 React 应用程序中使用真实用户监控 JavaScript 代理。有关配置真实用户监控代理的信息，请参阅我们的入门指南。

安装 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 仅支持使用版本 6 的 react-router 库的应用程序。

目前不支持 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 仅支持使用版本 4 和 5 的 react-router 库的应用程序。

首先从 @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 集成 »