Agent skill
error-handling-and-messages
Next.js(App Router) の Server Actions を前提とした、エラーハンドリングと表示メッセージの統一ルール。
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/error-handling-and-messages
SKILL.md
エラーハンドリング & メッセージ設計(SSoT)
このスキルは、Network Boundary を跨ぐエラーの扱いと、ユーザー向けメッセージの一元管理を徹底するための規約です。
アプリ全体のエラーメッセージは src/domain/errors/error-messages.ts を単一の正解 (SSoT) とします。
1. 基本方針(必須)
- 例外をそのままクライアントに渡さない
Server Action からError.messageを直接表示しない。Network Boundary を跨いだErrorは production で秘匿される。 - Server Action は「表示可能なエラー」を値として返す
例外はResult形式(success/failure)に畳み込み、messageは 安全に表示できる文言に限定する。 - 表示メッセージは必ず
ERROR_MESSAGESを経由
直接の日本語文字列を散在させない。 - 内部詳細はログに集約
スタックトレースや技術情報はサーバー側でログ化し、ユーザー表示には出さない。
2. 推奨パターン
2.1 Server Action の戻り値
- 返却は
ServerActionResult<T>を基本形とする(src/lib/async-handler.ts)。 - 成功時は
{ success: true, data?: T }(削除系などはdata省略可)。 - 失敗時は
{ success: false, error: string }とし、errorはERROR_MESSAGESから生成する。 - 必要に応じて
needsReauth/requiresSubscriptionなどの追加フィールドを許容する。 - 参考:
ServerActionResultの型定義
ts
export interface ServerActionResult<T> {
success: boolean;
data?: T;
error?: string;
}
2.2 クライアント側の共通ハンドリング
- 取得/更新の実行は
handleAsyncActionで統一する(src/lib/async-handler.ts)。 onSuccess/setLoading/setMessageで UI 状態とメッセージを集中管理する。- 参考: 実装例(
src/hooks/useGscSetup.tsと同型の最小パターン)
ts
await handleAsyncAction(fetchGscStatus, {
onSuccess: data => setStatus(data as GscConnectionStatus),
setLoading: setIsSyncingStatus,
setMessage: setAlertMessage,
defaultErrorMessage: ERROR_MESSAGES.GSC.STATUS_FETCH_FAILED,
});
2.3 メッセージ管理
- 表示メッセージは
ERROR_MESSAGESを唯一の参照元とする。 - Server Action 側で文言を確定し、クライアントは
result.errorを表示するだけに留める。
2.4 例外の扱い(Server Action 側)
- 例外は
try/catchで捕捉し、{ success: false, error }に畳み込む。 - 技術的詳細はログに集約し、ユーザー向けには安全な文言のみ返す。
3. 実装ルール(必須)
- メッセージ追加は
src/domain/errors/error-messages.tsに集約 - Server Action は
Errorを throw せず{ success: false, error }を返す - クライアントは
result.errorを表示するだけに留める handleAsyncActionを使い UI 状態とメッセージ処理を統一する
4. アンチパターン
- Client Component で
Error.messageを直接表示する - Server Action で例外をそのまま throw する
- メッセージ文字列を任意のファイルに直接書く
-
handleAsyncActionを使わずに各所でエラーハンドリングを分散させる
5. セルフレビュー項目
-
ERROR_MESSAGESに追加した文言が他用途で重複しないか - Server Action の返却が
ServerActionResultの形に沿っているか - Network Boundary 越しに
Error.messageを使っていないか -
handleAsyncActionで UI 側の処理が統一されているか
Didn't find tool you were looking for?