メインコンテンツまでスキップ
メインコンテンツまでスキップ

React Native

The ClickStack React Native SDKを使用すると、React Nativeアプリケーションを計測してイベントをClickStackに送信することができます。これにより、モバイルネットワークリクエストや例外をバックエンドイベントと一緒に1つのタイムラインで表示することが可能になります。

このガイドは以下を統合しています：

  • XHR/Fetchリクエスト

始め方​

NPMを使用してインストール​

次のコマンドを使用してClickStack React Nativeパッケージをインストールします。

npm install @hyperdx/otel-react-native

ClickStackを初期化​

ライブラリはアプリライフサイクルの早い段階で初期化してください：

import { HyperDXRum } from '@hyperdx/otel-react-native';

HyperDXRum.init({
  service: 'my-rn-app',
  apiKey: '<YOUR_INGESTION_API_KEY>',
  tracePropagationTargets: [/api.myapp.domain/i], // Set to link traces from frontend to backend requests
});

ユーザー情報またはメタデータを添付する（オプション）​

ユーザー情報を添付することで、HyperDX内のセッションやイベントを検索/フィルタリングすることができるようになります。これはクライアントセッション中の任意のポイントで呼び出すことができます。現在のクライアントセッションおよびその後に送信されるすべてのイベントは、ユーザー情報に関連付けられます。

userEmail、userName、およびteamNameは、セッションUIに対応する値で埋められますが、指定しなくても構いません。他の追加の値も指定でき、それらを使用してイベントを検索することができます。

HyperDXRum.setGlobalAttributes({
  userId: user.id,
  userEmail: user.email,
  userName: user.name,
  teamName: user.team.name,
  // Other custom properties...
});

低バージョンを計測する​

React Nativeのバージョンが0.68未満のアプリケーションを計測するには、metro.config.jsファイルを編集して、メトロがブラウザ特有のパッケージを使用するように強制します。例えば：

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-navigationバージョン5と6がサポートされています。

以下の例では、ナビゲーションを計測する方法を示しています：

import { startNavigationTracking } from '@hyperdx/otel-react-native';

export default function App() {
  const navigationRef = useNavigationContainerRef();
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        startNavigationTracking(navigationRef);
      }}
    >
      <Stack.Navigator>...</Stack.Navigator>
    </NavigationContainer>
  );
}