注釈
このライブラリは、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ガイド付きセットアップにアクセスするには、以下の手順に従います:
Splunk Observability Cloud にログインします。
ナビゲーションメニューで、
を選択します。Go to the Available integrations tab, or select Add Integration in the Deployed integrations tab.
インテグレーションフィルターーメニューで、By Use Case を選択します。
Monitor user experience ユースケースを選択します。
React Native Instrumentation タイルを選択し、React Native Instrumentation ガイド付きセットアップを開きます。
React Native RUMパッケージのインポートと初期化 🔗
以下の手順に従って、React Native RUMパッケージをインポートして初期化します。
npmまたはyarnを使用してReact Native RUMライブラリをインストールします:
# npm npm install @splunk/otel-react-native # yarn yarn add @splunk/otel-react-native
iOSの場合は、ポッドもインストールします:
(cd ios && pod install)
初期化パラメーターを編集して、Splunk Observability Cloud レルム、RUM アクセストークン、および基本属性を設定します:
const RumConfig: ReactNativeConfiguration = { realm: '<realm>', rumAccessToken: '<rum-access-token>', applicationName: '<your-app-name>', environment: '<your-environment>' }
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;
あるいは、コードの早い段階でライブラリを初期化することもできます。別の初期化方法 を参照してください。
(オプション)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>',
});
RUM と Splunk APM をリンクする 🔗
Splunk RUM は、サーバータイミングを使用してアプリケーションのフロントエンドとバックエンド間の応答時間を計算し、フロントエンドとバックエンドのトレースを結合してエンドツーエンドを可視化します。
デフォルトでは、OpenTelemetry の Splunk ディストリビューションはすでに Server-Timing
ヘッダーを送信しています。このヘッダーはブラウザからのスパンとバックエンドのスパンおよびトレースをリンクします。
Server-Timing
ヘッダーを制御するための APM 環境変数は SPLUNK_TRACE_RESPONSE_HEADER_ENABLED
です。Splunk APM にリンクするには SPLUNK_TRACE_RESPONSE_HEADER_ENABLED=true
を設定します。
貢献する方法 🔗
Splunk Distribution of OpenTelemetry for React Native はオープンソースソフトウェアです。GitHub でプルリクエストを作成することで、その改善に貢献することができます。詳細については、GitHub の 貢献ガイドライン を参照してください。