概要

Datadog RUM React インテグレーションにより、次の方法で React コンポーネント内のパフォーマンス問題を迅速に解決できます:

• サーバーの応答時間の遅延、レンダー ブロッキング リソース、コンポーネント内部のエラーなど、パフォーマンス ボトルネックの根本原因をデバッグします
• Web パフォーマンス データを、ユーザー ジャーニー、HTTP コール、ログと自動的に相関付けます
• 重要な Web パフォーマンス メトリクス (たとえば Core Web Vitals) がユーザー体験を損なうしきい値を下回ったときに、エンジニアリング チームへアラートを送信します

次の方法で React アプリケーションをエンド ツー エンドで監視します:

• スタック全体にわたるユーザー ジャーニーを追跡して可視化します
• 読み込み時間の遅さの根本原因をデバッグします。原因は React コード、ネットワーク パフォーマンス、または基盤インフラストラクチャーにある可能性があります
• ユーザー ID、メール、名前などの属性で、すべてのユーザー セッションを分析して文脈化します
• フロント エンド と バック エンド の開発チーム向けに、フル スタック監視を 1 つのプラットフォームに統合します

セットアップ

まず、React アプリケーションに Datadog RUM をセットアップします。Datadog App で新しい RUM アプリケーションを作成する場合は、アプリケーション タイプとして React を選択します。すでに既存の RUM アプリケーションがある場合は、そのタイプを React に更新できます。構成後、Datadog App が、RUM-React プラグイン を Browser SDK と統合する手順を提供します。

エラー トラッキング

React コンポーネントのレンダリング エラーを追跡するには、次のいずれかを使用します:

• エラーを捕捉して Datadog に報告する ErrorBoundary コンポーネント (React ドキュメント を参照)。
• 独自の ErrorBoundary コンポーネントからエラーを報告するために使用できる関数。

ErrorBoundary の使用

import { ErrorBoundary } from '@datadog/browser-rum-react'

function App() {
  return (
    <ErrorBoundary fallback={ErrorFallback}>
      <MyComponent />
    </ErrorBoundary>
  )
}

function ErrorFallback({ resetError, error }) {
  return (
    <p>
      Oops, something went wrong! <strong>{String(error)}</strong> <button onClick={resetError}>Retry</button>
    </p>
  )
}

独自の ErrorBoundary から React エラーを報告する

import { addReactError } from '@datadog/browser-rum-react'

class MyErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    addReactError(error, errorInfo)
  }

  render() {
    ...
  }
}

React Router インテグレーション

react-router v6 では、次の方法でルートを宣言できます:

• createMemoryRouter、createHashRouter、または createBrowserRouter 関数でルーターを作成します。
• useRoutes フックを使用します。
• Routes コンポーネントを使用します。

Datadog RUM Browser SDK でルート変更を追跡するには、まず router: true オプションで reactPlugin を初期化し、その後、これらの関数を @datadog/browser-rum-react/react-router-v6 から提供される同等の関数に置き換えます。例:

import { RouterProvider } from 'react-router-dom'
import { datadogRum } from '@datadog/browser-rum'
import { reactPlugin } from '@datadog/browser-rum-react'
// react-router-dom の代わりに、@datadog/browser-rum-react/react-router-v6 の "createBrowserRouter" を使用します:
import { createBrowserRouter } from '@datadog/browser-rum-react/react-router-v6'

datadogRum.init({
  ...
  plugins: [reactPlugin({ router: true })],
})

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    ...
  },
])

ReactDOM.createRoot(document.getElementById('root')).render(<RouterProvider router={router} />)

Datadog React インテグレーションのさらなる活用

トレース

RUM とトレース データを接続して、アプリケーションのパフォーマンスを包括的に可視化します。RUM と Traces を接続 を参照してください。

ログ

React アプリケーションのログを Datadog に転送するには、JavaScript ログ 収集 を参照してください。

メトリクス

RUM アプリケーションからカスタム メトリクスを生成するには、メトリクス 生成 を参照してください。

トラブル シューティング

お困りの際は、Datadog サポート へご連絡ください。

参考資料

お役に立つドキュメント、リンクや記事:

• React Monitoring