互換性と必要条件をチェック

Splunk RUM に React Native アプリケーションをインストルメンテーションする

React Native アプリケーションに Splunk RUM をインストルメンテーションして設定する前に、RUM がアプリケーションについて収集するデータを理解し、監視する範囲を決定してください。「Splunk RUM が収集するデータ」を参照してください。

環境とアプリケーションのための基本的なインストールコマンドをすべて生成するには、React Native インストルメンテーションのガイド付きセットアップを使用してください。React Native インストルメンテーションのガイド付きセットアップにアクセスするには、以下の手順に従ってください。

1. Splunk Observability Cloud にログインします。

2. ナビゲーションメニューで、Data Management を選択します。

3. Available integrations タブにアクセスするか、Deployed integrations タブで Add Integration を選択します。

4. インテグレーションフィルターメニューで、By Use Case を選択します。

5. Monitor user experience ユースケースを選択します。

6. React Native Instrumentation タイルを選択し、React Native Instrumentation ガイド付きセットアップを開きます。

React Native RUMパッケージのインポートと初期化

以下の手順に従って、React Native RUMパッケージをインポートして初期化します。

1. npmまたはyarnを使用してReact Native RUMライブラリをインストールします：

   # npm
   npm install @splunk/otel-react-native
   
   # yarn
   yarn add @splunk/otel-react-native

   iOSの場合は、ポッドもインストールします：

   (cd ios && pod install)

2. 初期化パラメーターを編集して、Splunk Observability Cloud レルム、RUM アクセストークン、および基本属性を設定します：

   const RumConfig: ReactNativeConfiguration = {
      realm: '<realm>',
      rumAccessToken: '<rum-access-token>',
      applicationName: '<your-app-name>',
      deploymentEnvironment: '<your-environment>'
   }

3. OtelWrapper コンポーネントを使用して、App コンポーネント全体をラップします：

   import { OtelWrapper, startNavigationTracking } from '@splunk/otel-react-native';
   import type { ReactNativeConfiguration } from '@splunk/otel-react-native';
   
   const AppWithOtelWrapper = () => (
   <OtelWrapper configuration={RumConfig}>
      <App />
   </OtelWrapper>
   );
   
   export default AppWithOtelWrapper;

   あるいは、コードの早い段階でライブラリを初期化することもできます。「別の初期化方法」を参照してください。

4. (オプション）React Navigationをインストルメンテーションするには、次の例のようにコードを変更してください：

   import { startNavigationTracking } from '@splunk/otel-react-native';
   
   export default function App() {
      const navigationRef = useNavigationContainerRef();
      return (
         <NavigationContainer
            ref={navigationRef}
            onReady={() => {
               startNavigationTracking(navigationRef);
            }}
         >
            <Stack.Navigator>
            // ...
            </Stack.Navigator>
         </NavigationContainer>
      );
   }

   詳細については、GitHub の「React Navigation」を参照してください。

React Native 0.67以下を使用しているアプリのための追加ステップ

React Native バージョン 0.67 以下で動作するアプリケーションをインストルメンテーションするには、metro.config.js ファイルを編集して、Metro がブラウザ固有のパッケージを使用するように強制します。例：

const defaultResolver = require('metro-resolver');
module.exports = {
resolver: {
   resolveRequest: (context, realModuleName, platform, moduleName) => {
      const resolved = defaultResolver.resolve(
      {
         ...context,
         resolveRequest: null,
      },
      moduleName,
      platform,
      );
      if (
      resolved.type === 'sourceFile' &&
      resolved.filePath.includes('@opentelemetry')
      ) {
      resolved.filePath = resolved.filePath.replace(
         'platform\\node',
         'platform\\browser',
      );
      return resolved;
      }
      return resolved;
   },
},
transformer: {
   getTransformOptions: async () => ({
      transform: {
      experimentalImportSupport: false,
      inlineRequires: true,
      },
   }),
},
};

別の初期化方法

アプリケーション コンポーネントをラップする代わりに、アプリのライフサイクルのできるだけ早い段階で React Native RUM ライブラリを初期化することができます。例：

import { SplunkRum } from '@splunk/otel-react-native';

const Rum = SplunkRum.init({
   realm: '<realm>',
   applicationName: '<name-of-app>',
   rumAccessToken: '<access-token>',
});

RUM と Splunk APM をリンクする

Splunk RUM は、サーバータイミングを使用してアプリケーションのフロントエンドとバックエンド間の応答時間を計算し、フロントエンドとバックエンドのトレースを結合してエンドツーエンドを可視化します。

デフォルトでは、OpenTelemetry の Splunk Distribution は Server-Timing ヘッダーをすでに送信しています。このヘッダーによって、ブラウザのスパンがバックエンドのスパンおよびトレースにリンクされます。

Server-Timing ヘッダーを制御するための APM 環境変数は SPLUNK_TRACE_RESPONSE_HEADER_ENABLED です。SPLUNK_TRACE_RESPONSE_HEADER_ENABLED=true を Splunk APM にリンクするように設定します。

貢献する方法

OpenTelemetry for React Native の Splunk ディストリビューションはオープンソースソフトウェアです。GitHub でプルリクエストを作成することで、この改善に貢献できます。詳細については、GitHubの「contributing guidelines」を参照してください。