Quickly locate the root cause of a problem from error messages and provide fix suggestions.
Input Methods
Accepts any of the following forms:
- Error message text (such as
TypeError: Cannot read properties of undefined） - Console log snippet
- Description of abnormal behavior (such as "component repeatedly re-renders, page stutters")
- Specified file path + problem description
Debugging Process
1. Error Classification
Classify based on the input information:
| Category | Signal | Priority Investigation |
|---|---|---|
| Runtime type error | TypeError, ReferenceError | Undefined variables, property access chains, type assertions |
| Rendering anomaly | White screen, component not displaying, flickering | Conditional rendering logic, initial data state, Suspense/ErrorBoundary |
| Performance issue | Stuttering, frequent re-rendering | useEffect dependencies, state update loops, large lists not virtualized |
| Network request | 4xx/5xx, CORS, timeout | API address, request headers, proxy configuration |
| Style anomaly | Layout disorder, styles not taking effect | CSS specificity, dynamic class, theme override |
| Build error | Compilation failure, type error | Import paths, type definitions, tsconfig |
| Console warning | React/Vue warning | Duplicate key, PropTypes, loss of reactivity |
2. Context Collection
Based on the classification, automatically perform the corresponding context collection:
General steps(performed for all categories):
- Read
package.jsonidentify the tech stack and framework version - If a file path is provided, read the relevant file
Additional collection by category：
| Category | Automatic collection |
|---|---|
| Runtime error | Locate the source file from the stack trace → read the file → check the context |
| Rendering anomaly | Check component props/state definitions → data flow tracing |
| Performance issue | Search for useEffect/watch usage → check dependency arrays |
| Network request | Check API configuration, proxy configuration, environment variables |
| Build error | Check tsconfig.json, webpack/vite configuration |
3. Pattern Matching
Match the error information against common frontend error patterns to quickly provide direction.
Quick Reference for High-Frequency Errors
TypeError: Cannot read properties of undefined (reading 'xxx')
- Investigate: missing optional chaining
obj?.prop, API response structure changes, asynchronous data initial state being undefined - Fix: add null protection, set default values, check the data flow
TypeError: xxx is not a function
- Troubleshooting: import errors (default vs named export), API changes from version upgrades, incomplete async loading
- Fix: Check the import statements, consult the library's changelog
Maximum update depth exceeded / Too many re-renders
- Troubleshooting: useEffect dependency array missing/incorrect, setState called during render, unstable object/array references
- Fix: Correct the dependency array, use useMemo/useCallback to stabilize references
Cannot update a component while rendering another
- Troubleshooting: setState called during the render phase (from a child component's callback, context update)
- Fix: Move the update into useEffect or an event handler
Objects are not valid as a React child
- Troubleshooting: rendered a raw object
{obj}, a Date object not converted to a string, an unresolved Promise - Fix: JSON.stringify or extract specific fields
Vue: [Warn] Invalid prop type / Missing required prop
- Troubleshooting: PropTypes definition does not match what is passed in, component API changes
- Fix: Check the component documentation, correct the props being passed in
Vue: [Warn] Avoid using non-primitive value as key
- Troubleshooting: v-for's key uses an object instead of a primitive value
- Fix: Use a unique ID field as the key
4. Output format
## 🔍 诊断结果
**错误类型**：[分类]
**根因**：[一句话说明]
### 问题定位
- 文件：`path/to/file.tsx`
- 行号：约 L42（基于堆栈 / 代码分析）
- 代码片段：
```tsx
// 问题代码
Fix suggestions
// 修复后的代码
Preventive measures
- [How to avoid similar issues]
## 与 BugHunter 的分工
| 场景 | 使用工具 |
|------|---------|
| 拿到一个错误信息，想快速定位修复 | **smart-debugger**（本 skill） |
| 收到 Redmine Bug 工单，需要完整修复闭环 | **BugHunter**（subagent） |
| 难以定位的复杂 Bug，需要深度分析 | 先用 smart-debugger 初诊 → 转 BugHunter |