error-tracking-nextjs

Next.js 向け PostHog エラートラッキング

このスキルを使うと、Next.js アプリケーションに PostHog のエラートラッキングを追加できます。

参照ファイル

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

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

主な原則

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

フレームワークに関するガイドライン

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