error-tracking-react

React 向け PostHog エラートラッキング

このスキルでは、React アプリケーションへの PostHog エラートラッキングの追加方法を説明します。

参考ファイル

• references/react.md - React エラートラッキングのインストール - ドキュメント
• references/fingerprints.md - フィンガープリント - ドキュメント
• references/alerts.md - エラートラッキングのアラートを送信 - ドキュメント
• references/monitoring.md - イシューの監視と検索 - ドキュメント
• references/assigning-issues.md - チームメイトへのイシューの割り当て - ドキュメント
• references/upload-source-maps.md - ソースマップのアップロード - ドキュメント

API の詳細とフレームワーク固有のパターンについては、ドキュメントを参照してください。

主な原則

• 環境変数：PostHog のキーとホスト URL には、必ず環境変数を使用してください。ハードコードしないでください。
• 最小限の変更：既存のエラー処理に加えてエラートラッキングを追加してください。既存のエラー処理コードを置き換えたり、構成し直したりしないでください。
• まずは自動キャプチャ：手動キャプチャを追加する前に、SDK の初期化で例外の自動キャプチャを有効にしてください。
• ソースマップ：スタックトレースが圧縮されたバンドルではなく、元のソースコードを参照できるように、ソースマップをアップロードしてください。
• エラーバウンダリーでの手動キャプチャ：グローバルハンドラーに伝播しないエラーについては、エラーバウンダリーと catch ブロックで captureException() を使用してください。

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

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