integration-react-vite

React（Vite）向け PostHog 統合

このスキルを使うと、React（Vite）アプリケーションに PostHog の分析機能を追加できます。

ワークフロー

統合を完了するには、次の手順を順番に実行してください。

1. basic-integration-1.0-begin.md - PostHog のセットアップ - 開始 ← ここから始めてください
2. basic-integration-1.1-edit.md - PostHog のセットアップ - 編集
3. basic-integration-1.2-revise.md - PostHog のセットアップ - 修正
4. basic-integration-1.3-conclude.md - PostHog のセットアップ - 完了

参考ファイル

• references/react.md - React - ドキュメント
• references/identify-users.md - ユーザーの識別 - ドキュメント
• references/basic-integration-1.0-begin.md - PostHog のセットアップ - 開始
• references/basic-integration-1.1-edit.md - PostHog のセットアップ - 編集
• references/basic-integration-1.2-revise.md - PostHog のセットアップ - 修正
• references/basic-integration-1.3-conclude.md - PostHog のセットアップ - 完了

サンプルプロジェクトには、実装の目標パターンが示されています。API の詳細については、ドキュメントを参照してください。

主な原則

• 環境変数：PostHog のキーには常に環境変数を使用してください。ハードコードしないでください。
• 変更は最小限に：既存の統合と並べて PostHog のコードを追加してください。既存のコードを置き換えたり、構成を変更したりしないでください。
• サンプルに合わせる：実装は、できる限りサンプルプロジェクトのパターンに従ってください。

フレームワークのガイドライン

• フィーチャーフラグには、useFeatureFlagEnabled() または useFeatureFlagPayload() フックを使用してください。読み込み状態や外部との同期は自動的に処理されます。
• 分析イベントの送信は、状態の変化に反応する useEffect ではなく、ユーザー操作が発生するイベントハンドラーに追加してください。
• データ変換に useEffect を使用しないでください。派生値はレンダリング中に計算してください。
• ユーザーイベントへの対応に useEffect を使用しないでください。その処理はイベントハンドラー自体に記述してください。
• 状態更新を連鎖させるために useEffect を使用しないでください。関連するすべての更新をイベントハンドラー内でまとめて計算してください。
• 親コンポーネントへの通知に useEffect を使用しないでください。イベントハンドラー内で setState と合わせて親のコールバックを呼び出してください。
• プロパティの変更時にコンポーネントの状態をリセットするには、useEffect を使わず、プロパティをコンポーネントの key として渡してください。
• useEffect は、外部システム（非 React ウィジェット、ブラウザー API、ネットワークサブスクリプション）との同期にのみ使用してください。

ユーザーの識別

ログインとサインアップのイベント中にユーザーを識別してください。このフレームワークで適切な識別パターンを確認するには、サンプルコードとドキュメントを参照してください。フロントエンドとバックエンドの両方にコードがある場合は、相関関係を維持するため、クライアント側のセッション ID と distinct ID を X-POSTHOG-DISTINCT-ID および X-POSTHOG-SESSION-ID ヘッダーを使って渡してください。

エラートラッキング

関連ファイル、特に重要なユーザーフローや API 境界の周辺に、PostHog のエラートラッキングを追加してください。