Docs » Splunk Observability Cloud でサポートされているインテグレーション » モバイルおよび Web アプリケーションを Splunk RUM でインストルメンテーションする » Splunk RUM に React Native アプリケーションをインストルメンテーションする » Splunk RUM 用 React Native RUM エージェントをインストールする

注釈

このライブラリは、AndroidとiOS デバイス用の React Native アプリケーションをインストルメンテーションします。React ウェブインストルメンテーションについては、Splunk RUM でブラウザベースの Web アプリケーションをインストルメンテーションする を参照してください。

Splunk RUM 用 React Native RUM エージェントをインストールする 🔗

OpenTelemetry for React Native の Splunk ディストリビューションを使用して、React Native および Expo アプリケーションをインストルメンテーションできます。Splunk RUM for React Native をインストルメンテーションするために Splunk APM は必要ありません。

React Native または Expo アプリケーションをインストルメンテーションして Splunk RUM にデータを取り込むには、このページの指示に従ってください。

注意

このディストリビューションは現在ベータ版です。事前に十分なテストを行わずに本番環境で使用しないでください。一部の機能がサポートされていなかったり、機能が制限されている可能性があります。

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

Splunk RUM for Mobile は React Native 0.68 以降をサポートしています。

このライブラリは以下のフレームワークやライブラリとも互換性があります：

  • Expoフレームワーク

  • React Navigation 5および6

注釈

React Native 0.67以下を使用しているアプリケーションをインストルメンテーションするには、React Native 0.67以下を使用しているアプリのための追加ステップ を参照してください。

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

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

ヒント: 環境とアプリケーションの基本的なインストールコマンドをすべて生成するには、React Native Instrumentation ガイド付きセットアップを使用します。React Native Instrumentationガイド付きセットアップにアクセスするには、以下の手順に従います：

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

別の初期化方法 🔗

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

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

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

貢献する方法 🔗

Splunk Distribution of OpenTelemetry for React Native はオープンソースソフトウェアです。GitHub でプルリクエストを作成することで、その改善に貢献することができます。詳細については、GitHub の 貢献ガイドライン を参照してください。

このページは 2024年12月09日 に最終更新されました。