React Native Libraries for RUM

Docs > RUM & セッションリプレイ > モバイルおよび TV モニタリング > React Native のモニタリング > React Native Libraries for RUM

This page lists integrated libraries you can use for React Native applications.

セットアップ

Note: This package is an integration for react-navigation library, please make sure you first install and setup the core mobile-react-native SDK.

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

npm install @datadog/mobile-react-navigation

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

yarn add @datadog/mobile-react-navigation

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

To track changes in navigation as RUM Views, set the onReady callback of your NavigationContainer component as follow. You can use the optional ViewNamePredicate parameter to replace the automatically detected View name with something more relevant to your use case.

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

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

To start tracking your navigation events, add the following lines before setting up your navigation. You can use the optional ViewNamePredicate callback to replace the automatically detected View name with something more relevant to your use case, based on the ComponentDidAppearEvent.

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);

Apollo Client

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

セットアップ

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

npm install @datadog/mobile-react-native-apollo-client

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

yarn add @datadog/mobile-react-native-apollo-client

HttpLink への移行

uri パラメーターで ApolloClient を初期化する場合は、HttpLink で初期化します。

import { ApolloClient, HttpLink } from '@apollo/client';

// 前
const apolloClient = new ApolloClient({
    uri: 'https://my.api.com/graphql'
});

// 後
const apolloClient = new ApolloClient({
    link: new HttpLink({ uri: 'https://my.api.com/graphql' })
});

Datadog Apollo Client Link を使用して情報を収集する

DatadogLink を @datadog/mobile-react-native-apollo-client からインポートし、ApolloClient の初期化で使用します。

import { ApolloClient, from, HttpLink } from '@apollo/client';
import { DatadogLink } from '@datadog/mobile-react-native-apollo-client';

const apolloClient = new ApolloClient({
    link: from([
        new DatadogLink(),
        new HttpLink({ uri: 'https://my.api.com/graphql' }) // 常に最後尾
    ])
});

For more information on Apollo Client Links, see the official documentation.

GraphQL 情報の削除

Datadog の構成で resourceEventMapper を使用して、GraphQL 変数から機密データを削除します。

const datadogConfiguration = new DatadogProviderConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    '<RUM_APPLICATION_ID>',
    true,
    true,
    true
);

datadogConfiguration.resourceEventMapper = event => {
    // 存在する場合、変数は event.context['_dd.graphql.variables’] に JSON 文字列として格納されます
    if (event.context['_dd.graphql.variables']) {
        const variables = JSON.parse(event.context['_dd.graphql.variables']);
        if (variables.password) {
            variables.password = '***';
        }
        event.context['_dd.graphql.variables'] = JSON.stringify(variables);
    }

    return event;
};