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

React Navigation

セットアップ

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.

ViewNamePredicatenull を返すと、新しい 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

: このパッケージは 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

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

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

その他の参考資料

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