> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-parallel-read-in-order-multi-part.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

# React Native

export const ClickStackIntegrates = ({signals = []}) => {
  const list = Array.isArray(signals) ? signals : String(signals).split(",");
  const supported = list.map(s => String(s).trim().toLowerCase());
  const pillStyle = {
    display: "inline-flex",
    alignItems: "center",
    padding: "0.125rem 0.625rem",
    borderRadius: "9999px",
    fontSize: "0.8125rem",
    fontWeight: 500,
    lineHeight: 1.6,
    color: "#161517",
    backgroundColor: "#faff69",
    border: "1px solid rgba(0, 0, 0, .1)",
    marginRight: "0.5rem"
  };
  return <div style={{
    margin: "0 0 1.25rem"
  }}>
      <span style={{
    marginRight: "0.5rem"
  }}>このガイドで統合するシグナル:</span>
      {supported.includes("logs") && <span style={pillStyle}>ログ</span>}
      {supported.includes("metrics") && <span style={pillStyle}>メトリクス</span>}
      {supported.includes("traces") && <span style={pillStyle}>トレース</span>}
    </div>;
};

ClickStack React Native SDK を使用すると、React Native
アプリケーションをインストルメントして、イベントを ClickStack に送信できます。これにより、モバイルのネットワーク
リクエストや例外をバックエンドイベントとあわせて、1 つのタイムラインで確認できます。

<ClickStackIntegrates signals={['traces']} />

<h2 id="getting-started">
  はじめに
</h2>

<h3 id="install-via-npm">
  NPM 経由でインストール
</h3>

[ClickStack React Native パッケージ](https://www.npmjs.com/package/@hyperdx/otel-react-native)をインストールするには、以下のコマンドを使用します。

```shell theme={null}
npm install @hyperdx/otel-react-native
```

<h3 id="initialize-clickstack">
  ClickStack を初期化する
</h3>

アプリのライフサイクルのできるだけ早い段階で、ライブラリを初期化してください。

```javascript theme={null}
import { HyperDXRum } from '@hyperdx/otel-react-native';

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

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

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

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

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

<h3 id="instrument-lower-versions">
  古いバージョンをインストルメントする
</h3>

React Native 0.68 未満で動作するアプリケーションをインストルメントするには、
`metro.config.js` ファイルを編集し、metro がブラウザー固有の
パッケージを使用するようにします。例:

```javascript theme={null}
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,
      },
    }),
  },
};
```

<h2 id="view-navigation">
  画面ナビゲーション
</h2>

[react-navigation](https://github.com/react-navigation/react-navigation) バージョン 5 および 6 に対応しています。

次の例では、ナビゲーションをインストルメントする方法を示します。

```javascript theme={null}
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>
  );
}
```