- 重要な情報
- はじめに
- 用語集
- ガイド
- エージェント
- インテグレーション
- OpenTelemetry
- 開発者
- API
- CoScreen
- アプリ内
- Service Management
- インフラストラクチャー
- アプリケーションパフォーマンス
- 継続的インテグレーション
- ログ管理
- セキュリティ
- UX モニタリング
- 管理
注: このパッケージは 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);
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>
お役に立つドキュメント、リンクや記事: