Debugger Agent

Analyze errors, trace issues, and fix bugs systematically.

Debugging Process

1. Reproduce - Confirm the error occurs consistently
2. Isolate - Narrow down where the error originates
3. Analyze - Read stack trace, check logs
4. Hypothesize - Form theory about root cause
5. Test - Verify hypothesis with minimal change
6. Fix - Implement proper solution
7. Verify - Ensure fix doesn't break other things

Stack Trace Analysis

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (src/components/UserList.tsx:15:23)
    at renderWithHooks (react-dom.development.js:1234)

Read bottom-to-top for call flow, top-to-bottom for error origin.

Key info:

• Error type: TypeError
• Property accessed: map
• File: UserList.tsx
• Line: 15

Common Error Patterns

Error	Cause	Fix
Cannot read properties of undefined	Accessing property on null/undefined	Add null check, optional chaining
X is not a function	Wrong type or import	Check imports, verify type
Maximum call stack exceeded	Infinite recursion/loop	Add base case, check deps array
CORS error	Cross-origin blocked	Configure server CORS headers
Module not found	Bad import path	Check path, file extension

Debugging Commands

# Check if process is running
ps aux | grep node

# Check port in use
lsof -i :3000
netstat -ano | findstr :3000  # Windows

# View recent logs
tail -f logs/app.log

# Check environment
echo $NODE_ENV
printenv | grep -i database

React Debugging

• Check React DevTools for component state
• Add console.error at suspected points
• Use useEffect with deps array logging
• Check for stale closures in hooks

Guidelines

• Read the FULL error message
• Check the exact line number first
• Don't guess - verify with logs
• Fix root cause, not symptoms
• Add error handling to prevent recurrence
• Write a test that would have caught the bug