Use this skill when creating or reviewing Next.js Route Handlers (app/api), adding rate limiting, input validation, or auth to API endpoints. Trigger words: API ルート, Route Handler, app/api, エンドポイント, レート制限, 入力検証, CORS, ヘッダー, 認証付き API, hardening.
error-boundaries
Use this skill when handling runtime errors, adding error.tsx or not-found.tsx, designing fallback UI, or deciding what to surface to users vs logs. Trigger words: エラー処理, error.tsx, not-found, 例外, フォールバック, エラーバウンダリ, try catch, ユーザー向けエラー, ログ.
含まれるファイル(1)
- SKILL.md2.2 KB
SKILL.md(原文)
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Error Boundaries & 例外処理
いつ使うか
- 実行時エラーを安全に扱い、ユーザーに壊れた画面を見せたくないとき。
- ルート単位のエラー UI(
error.tsx)や 404(not-found.tsx)を用意するとき。 - 何をユーザーに見せ、何をログに残すか設計するとき。
やること
- ルートごとに
error.tsx(Client Component、resetで再試行)とnot-found.tsxを置く。 - 例外は意味のある型/メッセージで投げ、境界で捕捉してフォールバック表示。
- ユーザーには安全な要約、詳細(スタック・内部情報)は logger へ。
- 予期する失敗(検証エラー等)は例外ではなく値で返し、UI で扱う。
守るルール
- ✅ ルートに
error.tsx/not-found.tsxを用意。 - ✅ ユーザー向けメッセージと内部ログを分離(内部情報を露出しない)。
- ✅ 再試行可能な失敗には
reset()を提供。 - ❌
catch (e) {}で握りつぶさない(必ずログ or 再送出)。 - ❌ スタックトレースや DB エラー文をそのまま画面に出さない。
典型例(コード片)
// app/dashboard/error.tsx
'use client';
import { logger } from '@/lib/logger';
export default function DashboardError({ error, reset }: { error: Error; reset: () => void }) {
logger.error('dashboard render failed', { message: error.message });
return (
<div role="alert">
<p>ダッシュボードの読み込みに失敗しました。</p>
<button onClick={reset}>再試行</button>
</div>
);
}
アンチパターン
- すべてを 1 つの try/catch で包み、どこで何が失敗したか分からなくする。
- エラー詳細を
alert(error.stack)で表示し内部構造を漏らす。 - 例外を握りつぶして「成功」扱いし、後段でデータ不整合を起こす。
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Use this skill when implementing full-text search, autocomplete, or vector/semantic search and RAG with MongoDB Atlas. Trigger words: 全文検索, あいまい検索, オートコンプリート, ベクトル検索, セマンティック検索, 類似検索, Atlas Search, $search, $vectorSearch, RAG, embedding.
Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.
Use this skill when starting a new session, opening this project for the first time, or when you need to recall the project's tech stack, hard rules, and which other skills exist. Trigger words: セッション開始, このプロジェクト, 全体像, どのスキル, 何から, getting started, overview.
Use this skill when setting up or modifying CI pipelines, GitHub Actions workflows, or automated checks (lint, typecheck, test, build) for this project. Trigger words: CI, GitHub Actions, ワークフロー, パイプライン, 自動テスト, lint チェック, typecheck, ビルド検証, .github/workflows.
Use this skill when writing end-to-end tests, browser automation, or verifying user flows in a real browser. Trigger words: E2E, Playwright, ブラウザテスト, ユーザーフロー, 結合テスト, シナリオテスト, ログインテスト, getByRole, expect.