React Native インテグレーションライブラリ

Docs > RUM & セッションリプレイ > React Native のモニタリング > React Native インテグレーションライブラリ

セットアップ

注: このパッケージは react-navigation ライブラリのインテグレーションであり、最初にコアとなる mobile-react-native SDK をインストールしてセットアップしてください。

NPM でインストールするには、以下を実行します。

npm install @datadog/mobile-react-navigation

Yarn でインストールするには、以下を実行します。

yarn add @datadog/mobile-react-navigation

ビューのナビゲーションを追跡

ナビゲーションの変化を RUM ビューとして追跡するには、NavigationContainer コンポーネントの onready コールバックを次のように設定します。オプションの ViewNamePredicate パラメーターを使用すると、自動的に検出された View 名をユースケースに適したものに置き換えることができます。

ViewNamePredicate で null を返すと、新しい RUM View が作成されなくなります。以前の RUM View はアクティブなままです。

import * as React from 'react';
import { DdRumReactNavigationTracking, ViewNamePredicate } from '@datadog/mobile-react-navigation';
import { Route } from "@react-navigation/native";

const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(route: Route<string, any | undefined>, trackedName: string) {
  return "My custom View Name"
}

function App() {
  const navigationRef = React.useRef(null);
  return (
    <View>
      <NavigationContainer ref={navigationRef} onReady={() => {
        DdRumReactNavigationTracking.startTrackingViews(navigationRef.current, viewNamePredicate)
      }}>
        // ...
      </NavigationContainer>
    </View>
  );
}

注: 一度に追跡できるのは 1 件の NavigationContainer のみです。別のコンテナを追跡する必要がある場合は、DdRumReactNavigationTracking.stopTrackingViews() を使用して、まず初めの追跡を停止します。

注: このパッケージは react-native-navigation ライブラリのインテグレーションであり、最初にコアとなる mobile-react-native SDK をインストールしてセットアップしてください。

セットアップ

NPM でインストールするには、以下を実行します。

npm install @datadog/mobile-react-native-navigation

Yarn でインストールするには、以下を実行します。

yarn add @datadog/mobile-react-native-navigation

ビューのナビゲーションを追跡

ナビゲーションイベントの追跡を開始するには、ナビゲーションを設定する前に、以下の行を追加して呼び出すだけです。オプションの ViewNamePredicate コールバックを使用すると、ComponentDidAppearEvent に基づいて自動的に検出された View 名を、ユースケースにより適切なものに置き換えることができます。

ViewNamePredicate で null を返すと、新しい RUM View が作成されなくなります。以前の RUM View はアクティブなままです。

import { DdRumReactNativeNavigationTracking, ViewNamePredicate }  from '@datadog/mobile-react-native-navigation';
import { ComponentDidAppearEvent } from 'react-native-navigation';

const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(event: ComponentDidAppearEvent, trackedName: string) {
  return "My custom View Name"
}

DdRumReactNativeNavigationTracking.startTracking(viewNamePredicate);

RUM インテグレーション

Datadog は、React Navigation (最低対応バージョンは react-navigation/native@5.6.0) の自動インテグレーションを提供します。ソースコードに以下を追加してください。

    const navigationRef:React.RefObject<NavigationContainerRef> = React.createRef();
    // ...
    <NavigationContainer ref={navigationRef} onReady={
        ()=>{DdRumReactNavigationTracking.startTrackingViews(navigationRef.current)}}>
        // ...
    </NavigationContainer>