debug-helper

Debug Helper

Help debug code, analyze error messages, locate the root cause of problems, and provide repair suggestions.

Help debug code by analyzing error messages, identifying root causes, and providing fix suggestions.

When to Use

Use this skill when the user requests the following operations:

• Debug code
• Analyze error messages
• Fix bugs
• Understand exception causes
• Troubleshoot issues

Instructions

Debugging Steps

1. Collect information - Obtain error messages, stack traces, and related code
2. Analyze the error - Understand the error type and the meaning of the message
3. Locate the root cause - Find the code location causing the problem
4. Provide solutions - Give specific repair suggestions
5. Prevention suggestions - Provide suggestions to avoid similar problems

Common Error Types

Error type	Possible cause
TypeError	Type mismatch, null value operations
ReferenceError	Undefined variable, scope issues
SyntaxError	Syntax error, missing parentheses/quotes
RuntimeError	Runtime logic error
NetworkError	Network request failure, timeout

Analysis Framework

For each error, analyze:

• What: What error occurred
• Where: Where the error occurred
• Why: Why it occurred
• How: How to fix it

Output Format

Use the templates/debug-report.md template to format the output.

Use the templates/debug-report.md template to format output.

## 调试分析报告 / Debug Analysis Report

### 错误概述 / Error Summary
[错误类型和简要描述]

### 根本原因 / Root Cause
[详细分析]

### 修复方案 / Fix
[具体代码修改]

### 预防建议 / Prevention
[如何避免类似问题]

Examples

Input

Error message:

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (UserList.jsx:15:23)
    at renderWithHooks (react-dom.development.js:14985:18)

Related code:

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Output

Debugging Analysis Report

Error Overview

TypeError: Cannot read properties of undefined (reading 'map')

In UserList component line 15 calls .map() ,users variable is undefined。

Root Cause

1. Direct cause: Attempting to call undefined on .map() method
2. Underlying cause:
   • The parent component may not have passed users prop
   • The component rendered before data fetching was complete
   • The API return format does not match expectations

Fix Solutions

Solution 1: Add a default value (recommended)

function UserList({ users = [] }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Solution 2: Conditional rendering

function UserList({ users }) {
  if (!users || users.length === 0) {
    return <p>No users found</p>;
  }

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Solution 3: Optional chaining operator

function UserList({ users }) {
  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Prevention Suggestions

1. Use TypeScript - Add type checking

   interface Props {
     users: User[];
   }
   

2. Add PropTypes - Runtime type checking

   UserList.propTypes = {
     users: PropTypes.array.isRequired
   };
   

3. Check the data source - Ensure the parent component passes data correctly

4. Handle loading states - Show a loading indicator during data fetching