Skip to content
cccskills
FreePublished on GitHub

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, ユーザー向けエラー, ログ.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md2.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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) で表示し内部構造を漏らす。
  • 例外を握りつぶして「成功」扱いし、後段でデータ不整合を起こす。

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

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.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

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.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

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.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

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.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

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.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

See all skills by Akira-Papa

Report a problem with this skill