mcpField
I
integration-react-react-router-7-framework

integration-react-react-router-7-framework

github.com/posthogデータ・データベース7699 回インストール今日更新
リポジトリ

integration-react-react-router-7-framework について

React Router v7 の Framework mode アプリに PostHog 分析を導入するためのスキルです。段階的な手順に加え、実装、ユーザー識別、エラー追跡の指針を示します。

主な機能

  1. 01段階的なセットアップ手順
  2. 02React Router v7 Framework mode の指針
  3. 03フィーチャーフラグフックの利用指針
  4. 04ユーザー識別とエラー追跡
  5. 05環境変数によるキー管理

活用シーン

  1. 01Framework mode アプリへの PostHog 導入
  2. 02React コンポーネントでのフィーチャーフラグ利用
  3. 03ログイン・登録時のユーザー識別

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/posthog/skills --skill integration-react-react-router-7-framework

インストール後、Claude Code で/integration-react-react-router-7-frameworkを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
basic-integration-1.0-begin.md
basic-integration-1.1-edit.md
basic-integration-1.2-revise.md
basic-integration-1.3-conclude.md
EXAMPLE.md
identify-users.md
react-router-v7-framework-mode.md

詳細

React Router v7 - Framework mode 向け PostHog 統合

このスキルでは、React Router v7 - Framework mode のアプリケーションに 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/EXAMPLE.md - React Router v7 - Framework mode のサンプルプロジェクトコード
  • references/react-router-v7-framework-mode.md - React router v7 framework mode（remix v3）- ドキュメント
  • 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、ネットワークサブスクリプション）との同期にのみ使用してください。

ユーザーの識別

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

エラートラッキング

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

コメント

Markdown 対応