mcpField
E
error-boundary-creator

error-boundary-creator

github.com/onewave-ai開発393301 回インストール1 週間前に更新
リポジトリ

error-boundary-creator について

ReactとNext.jsアプリにエラー処理を追加するスキルです。コンポーネントやルートの境界、フォールバックUI、非同期エラー、報告、エラー状態のテストを扱います。

主な機能

  1. 01Reactのエラーバウンダリー
  2. 02Next.js App Routerのエラーファイル
  3. 03復旧操作付きフォールバックUI
  4. 04非同期エラー処理と報告
  5. 05エラー状態のテスト案内

活用シーン

  1. 01ルート単位での障害の分離
  2. 02サードパーティ製コンポーネントのエラー処理
  3. 03捕捉したエラーの監視サービスへの報告
  4. 04フォールバックと復旧フローのテスト

インストール

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

$npx skills add https://github.com/onewave-ai/claude-skills --skill error-boundary-creator

インストール後、Claude Code で/error-boundary-creatorを入力して読み込まれたか確認します。

同梱ファイル

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

references/
async-and-reporting.md
class-boundaries.md
nextjs-error-handling.md

詳細

Error Boundary Creator

React および Next.js アプリに、エラーバウンダリー、フォールバック UI、非同期エラー処理、エラー報告を追加し、堅牢なエラー処理を実現します。

ワークフロー

  1. 非同期処理、サードパーティとの連携、ルートレベルのエントリーポイントなど、エラーが発生しやすい箇所を特定します。
  2. コンポーネントをエラーバウンダリーでラップします。クラスベースのバウンダリー、または react-error-boundary ライブラリを使用します。references/class-boundaries.md を参照してください。
  3. Next.js App Router では、該当するセグメントファイル error.tsx、global-error.tsx、not-found.tsx を追加します。references/nextjs-error-handling.md を参照してください。
  4. バウンダリーで捕捉できないエラー（イベントハンドラー、Promise）を処理し、エラー報告を接続します。references/async-and-reporting.md を参照してください。
  5. role="alert" と復旧アクション（リセットまたは再読み込み）を備えたフォールバック UI を設計します。
  6. 捕捉したエラーを単一の報告先に送り、リリース前にエラー状態をテストします。

内容

  • references/class-boundaries.md — 基本、リセット可能、react-error-boundary の各パターン。
  • references/nextjs-error-handling.md — App Router の error.tsx、global-error.tsx、not-found.tsx。
  • references/async-and-reporting.md — useAsync フックと reportError 統合モジュール。

ベストプラクティス

  1. ページ単位で分離できるようルートレベルでラップし、サードパーティのコンポーネントも個別にラップします。
  2. 復旧方法を備えた、適切なフォールバックを用意します。
  3. 捕捉したすべてのエラーを監視サービスに記録します。
  4. 意味のある方法で処理できないエラーは捕捉しないでください。
  5. 開発中にエラー状態をテストします。

コメント

Markdown 対応