error-debugger

エラーデバッガー

目的

過去の解決策から学習する、コンテキストを考慮したデバッグです。エラーが発生したとき：

1. メモリーから過去の類似エラーを検索します
2. エラーメッセージとスタックトレースを分析します
3. コード例とともに、すぐに適用できる修正を提示します
4. testing-builder を通じて回帰テストを作成します
5. 今後のために解決策をメモリーに保存します

ADHD のあるユーザー向け：デバッグのストレスを解消し、すぐに実行できる修正を提示します。 SDAM のあるユーザー向け：すでに見つけた過去の解決策を思い出せます。 すべてのユーザー向け：コードベースから学習することで、時間とともに賢くなります。

起動トリガー

• ユーザーが「これをデバッグして」「このエラーを修正して」「なぜ失敗するの？」と言う
• TypeError、ReferenceError、SyntaxError、ECONNREFUSED、CORS、404、500 などを含むエラーメッセージ
• 会話に貼り付けられたスタックトレース
• 「何かが壊れている」などの表現

基本的なワークフロー

1. エラーを解析する

重要な情報を抽出します：

{
  error_type: "TypeError|ReferenceError|ECONNREFUSED|...",
  message: "Cannot read property 'map' of undefined",
  stack_trace: [...],
  file: "src/components/UserList.jsx",
  line: 42,
  context: "Rendering user list"
}

2. 過去の解決策を検索する

context-manager に問い合わせます：

search memories for:
- error_type match
- similar message (fuzzy match)
- same file/component if available
- related tags (if previously tagged)

一致するものが見つかった場合：

🔍 Found similar past error!

📝 3 months ago: TypeError in UserList component
✅ Solution: Added null check before map
⏱️ Fixed in: 5 minutes
🔗 Memory: procedures/{uuid}.md

Applying the same solution...

一致するものが見つからない場合：

🆕 New error - analyzing...
(Will save solution after fix)

3. エラーを分析する

包括的なエラーパターンライブラリについては、reference.md を参照してください。

よくあるパターンの簡易版：

• TypeError: Cannot read property 'X' of undefined → オプショナルチェーンとデフォルト値
• ECONNREFUSED → サービスが起動しているか確認し、ポートを検証します
• CORS errors → CORS ヘッダーを設定します
• 404 Not Found → ルート定義を確認します
• 500 Internal Server Error → サーバーログを確認します

4. 修正を提示する

形式：

🔧 Error Analysis

**Type**: {error_type}
**Location**: {file}:{line}
**Cause**: {root_cause_explanation}

**Fix**:

```javascript
// ❌ Current code
const users = data.users;
return users.map(user => <div>{user.name}</div>);

// ✅ Fixed code
const users = data?.users || [];
return users.map(user => <div>{user.name}</div>);

説明：data または data.users が undefined の場合に対応するため、オプショナルチェーンとデフォルトの空配列を追加しました。

予防策：使用する前に、API レスポンスの構造を必ず検証してください。

次の手順：

1. 修正を適用します
2. 手動でテストします
3. 回帰テストを作成します

### 5. Save Solution

After fix confirmed working:

```bash
# Save to context-manager as PROCEDURE
remember: Fix for TypeError in map operations
Type: PROCEDURE
Tags: error, typescript, array-operations
Content: When getting "Cannot read property 'map' of undefined",
         add optional chaining and default empty array:
         data?.users || []

メモリーの構造：

# PROCEDURE: Fix TypeError in map operations

**Error Type**: TypeError
**Message Pattern**: Cannot read property 'map' of undefined
**Context**: Array operations on potentially undefined data

## Solution

Use optional chaining and default values:

```javascript
// Before
const items = data.items;
return items.map(...)

// After
const items = data?.items || [];
return items.map(...)

適用する状況

• undefined の可能性がある API レスポンス
• 渡されない可能性がある Props
• 不確かなデータに対する配列操作

テスト済み

✅ UserList コンポーネントで修正済み（2025-10-17） ✅ 回帰テスト：tests/components/UserList.test.jsx

タグ

error, typescript, array-operations, undefined-handling

### 6. Create Regression Test

Automatically invoke testing-builder:

この修正の回帰テストを作成してください：

• コンポーネントが undefined のデータを処理できることをテストします
• コンポーネントが空の配列を処理できることをテストします
• コンポーネントが有効なデータで動作することをテストします

## Tool Persistence Pattern (Meta-Learning)

**Critical principle from self-analysis**: Never give up on first obstacle. Try 3 approaches before abandoning a solution path.

### Debugging Tools Hierarchy

When debugging an error, try these tools in sequence:

**1. Search Past Solutions (context-manager)**
```bash
# First approach: Check memory
search memories for error pattern

過去の解決策が見つからない場合 → 次の方法に進みます

2. GitHub Copilot CLI 検索

# Second approach: Search public issues
copilot "Search GitHub for solutions to: $ERROR_MESSAGE"

Copilot で適切な結果が見つからない場合 → 次の方法に進みます

3. 現在のコンテキストを使ったウェブ検索

# Third approach: Real-time web search
[Use web search for latest Stack Overflow solutions]

ウェブ検索に失敗した場合 → その後、ユーザーに詳細なコンテキストを尋ねます

メタ分析からの実例

実際に起きたこと：GitHub MCP を試す → 認証エラーが発生 → すぐに諦める

本来行うべきだったこと：

1. GitHub MCP を試す → 認証エラーが発生
2. gh CLI を試す → 認証済みか確認する
3. GitHub API に直接アクセスする → 個人用トークンを使う
4. すべて失敗した場合に、手動の手順を作成する

結果：gh CLI は認証済みで、問題なく動作しました。諦めるのが早すぎました。

これをエラーデバッグに適用する

エラーを修正するとき：

// Pattern: Try 3 fix approaches
async function debugError(error) {
  // Approach 1: Past solution
  const pastFix = await searchMemories(error);
  if (pastFix?.success_rate > 80%) {
    return applyPastFix(pastFix);
  }

  // Approach 2: Pattern matching
  const commonFix = matchErrorPattern(error);
  if (commonFix) {
    return applyCommonFix(commonFix);
  }

  // Approach 3: External search (Copilot/Web)
  const externalSolution = await searchExternalSolutions(error);
  if (externalSolution) {
    return applyExternalSolution(externalSolution);
  }

  // Only NOW ask for more context
  return askUserForMoreContext(error);
}

連携ツールの継続的な活用

連携機能を利用できる場合は、次の順序で使用します：

エラー検索の場合：

1. GitHub Copilot CLI → 自分のリポジトリや類似プロジェクトの Issue を検索します
2. ローカルメモリー → 保存済みの過去の解決策
3. ウェブ検索 → 最新の Stack Overflow／ドキュメント

解決策の場合：

1. メモリー内の過去の解決策（最速）
2. Codegen-ai エージェント（複雑なバグの場合）→ PR を自動作成します
3. Jules CLI 非同期タスク（時間のかかる修正の場合）
4. コード例を使った手動修正

指標

デバッグ手法の成功状況を追跡します：

{
  "error_id": "uuid",
  "approaches_tried": [
    {"type": "memory_search", "result": "no_match"},
    {"type": "copilot_search", "result": "success", "time": "5s"},
    {"type": "applied_fix", "verified": true}
  ],
  "total_time": "30s",
  "lesson": "Copilot found solution on second try"
}

重要なポイント：「失敗した」手法の大半は、実際には「十分に試さなかった」手法です。

コンテキストの統合

過去の解決策を検索する

新しいエラーを分析する前に：

// Search context-manager
const pastSolutions = searchMemories({
  type: 'PROCEDURE',
  tags: [errorType, language, framework],
  content: errorMessage,
  fuzzyMatch: true
});

if (pastSolutions.length > 0) {
  // Show user the past solution
  // Ask if they want to apply it
  // If yes, apply and test
  // If no, analyze fresh
}

時間とともに学習する

どの解決策が有効かを追跡します：

{
  solution_id: "uuid",
  error_pattern: "TypeError.*map.*undefined",
  times_applied: 5,
  success_rate: 100%,
  last_used: "2025-10-15",
  avg_fix_time: "2 minutes"
}

一致するものが複数見つかった場合は、成功率の高い順に解決策を並べ替えます。

プロジェクト固有のパターン

プロジェクト固有のエラーもあります：

// BOOSTBOX-specific
Error: "Boost ID not found"
→ Solution: Check boost exists before processing

// Tool Hub-specific
Error: "Tool not installed"
→ Solution: Run tool installer first

// Save these as PROJECT-specific procedures

他のスキルとの連携

テストビルダー

修正を提示した後：

Automatically invoke: testing-builder
Create regression test for: {error_scenario}
Ensure test fails without fix, passes with fix

コンテキストマネージャー

類似するエラーを検索します：

search memories for:
- PROCEDURE type
- Error tag
- Similar message
- Same file/component

新しい解決策を保存します：

Save as PROCEDURE:
- Error pattern
- Solution
- Code examples
- Tested timestamp

ラピッドプロトタイパー

複雑な修正の場合：

If fix requires significant refactoring:
→ Invoke rapid-prototyper
→ Create isolated example showing fix
→ User validates before applying to codebase

追加リソース

• エラーパターンライブラリ - JavaScript、ネットワーク、データベース、React のエラーに関する包括的なパターン
• デバッグの例 - デバッグワークフローの段階的な例

クイックリファレンス

一般的なエラーパターン

エラー	簡単な修正
undefined.map	`data?.array
X is not a function	関数が存在するか確認します
ECONNREFUSED	サービスが実行中か確認します
CORS	CORS ヘッダーを設定します
404	ルートが存在するか確認します
500	サーバーログを確認します
Timeout	タイムアウト値を増やします
Cannot find module	依存関係をインストールします

トリガーフレーズ

• 「これをデバッグして」
• 「このエラーを修正して」
• 「なぜ失敗するのか」
• 「何かが壊れている」
• [エラーメッセージを貼り付ける]
• [スタックトレースを貼り付ける]

ファイルの場所

• 過去の解決策：~/.claude-memories/procedures/（Linux/macOS）または %USERPROFILE%\.claude-memories\procedures\（Windows）
• エラーパターン：メモリインデックスで「error」タグが付与されています

成功基準

✅ よくあるエラーを即座に修正します（30秒未満） ✅ 過去の解決策を自動的に呼び出します ✅ すべての修正にコード例を含めます ✅ 回帰テストを自動的に作成します ✅ 将来参照できるように解決策を保存します ✅ 時間とともにデバッグが速くなります