React Native

ClickStack 向け React Native SDK - ClickHouse オブザーバビリティ スタック

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({
  url: 'http://your-otel-collector:4318',
  service: 'my-rn-app',
  apiKey: '<YOUR_INGESTION_API_KEY>', // Managed ClickStackの場合は省略
  tracePropagationTargets: [/api.myapp.domain/i], // フロントエンドからバックエンドリクエストへのトレースを連携するために設定
});

​

ユーザー情報またはメタデータを関連付ける (任意)

ユーザー情報を関連付けると、HyperDX で セッションやイベントを検索・絞り込みできるようになります。これはクライアント セッション中のどの時点でも呼び出せます。現在のクライアント セッションと、この呼び出し以降に送信されるすべてのイベントが そのユーザー情報に関連付けられます。

userEmail、userName、および teamName は セッション UI に対応する値を表示しますが、 省略することもできます。そのほかの追加の値も指定でき、 イベントの検索に使用できます。

HyperDXRum.setGlobalAttributes({
  userId: user.id,
  userEmail: user.email,
  userName: user.name,
  teamName: user.team.name,
  // その他のカスタムプロパティ...
});

​

古いバージョンをインストルメントする

React Native 0.68 未満で動作するアプリケーションをインストルメントするには、 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-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>
  );
}