120 lines
4.1 KiB
Markdown
120 lines
4.1 KiB
Markdown
---
|
|
name: systematic-debugging
|
|
description: Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes
|
|
---
|
|
|
|
# Systematic Debugging
|
|
|
|
## Overview
|
|
Random fixes waste time and create new bugs. Quick patches mask underlying issues.
|
|
|
|
**Core principle:** ALWAYS find root cause before attempting fixes. Symptom fixes are failure.
|
|
|
|
## The Iron Law
|
|
```
|
|
NO FIXES WITHOUT ROOT CAUSE INVESTIGATION FIRST
|
|
```
|
|
If you haven't completed Phase 1, you cannot propose fixes.
|
|
|
|
## When to Use
|
|
Use for ANY technical issue:
|
|
- Test failures
|
|
- Bugs in production
|
|
- Unexpected behavior
|
|
- Performance problems
|
|
- Build failures
|
|
- Integration issues
|
|
|
|
**Use this ESPECIALLY when:**
|
|
- Under time pressure (emergencies make guessing tempting)
|
|
- "Just one quick fix" seems obvious
|
|
- You've already tried multiple fixes
|
|
- Previous fix didn't work
|
|
|
|
## The Four Phases
|
|
|
|
You MUST complete each phase before proceeding to the next.
|
|
|
|
### Phase 1: Root Cause Investigation
|
|
**BEFORE attempting ANY fix:**
|
|
|
|
1. **Read Error Messages Carefully**
|
|
- Don't skip past errors or warnings
|
|
- Read stack traces completely
|
|
- Note line numbers, file paths, error codes
|
|
|
|
2. **Reproduce Consistently**
|
|
- Can you trigger it reliably?
|
|
- What are the exact steps?
|
|
- If not reproducible → gather more data, don't guess
|
|
|
|
3. **Check Recent Changes**
|
|
- What changed that could cause this?
|
|
- `git diff`, recent commits
|
|
- New dependencies, config changes
|
|
|
|
4. **Gather Evidence in Multi-Component Systems**
|
|
When system has multiple components (frontend → Supabase → Edge Functions):
|
|
- Log what data enters each component
|
|
- Log what data exits each component
|
|
- Verify environment/config propagation
|
|
- Check state at each layer
|
|
|
|
5. **Trace Data Flow**
|
|
- Where does bad value originate?
|
|
- What called this with bad value?
|
|
- Keep tracing up until you find the source
|
|
- Fix at source, not at symptom
|
|
|
|
### Phase 2: Pattern Analysis
|
|
**Find the pattern before fixing:**
|
|
|
|
1. **Find Working Examples** — Locate similar working code in same codebase
|
|
2. **Compare Against References** — Read reference implementation COMPLETELY
|
|
3. **Identify Differences** — List every difference, however small
|
|
4. **Understand Dependencies** — What other components, config, environment?
|
|
|
|
### Phase 3: Hypothesis and Testing
|
|
**Scientific method:**
|
|
|
|
1. **Form Single Hypothesis** — "I think X is the root cause because Y"
|
|
2. **Test Minimally** — SMALLEST possible change, one variable at a time
|
|
3. **Verify Before Continuing** — Did it work? Yes → Phase 4. No → new hypothesis
|
|
4. **When You Don't Know** — Say it. Don't pretend. Ask for help.
|
|
|
|
### Phase 4: Implementation
|
|
**Fix the root cause, not the symptom:**
|
|
|
|
1. **Create Failing Test Case** — Simplest possible reproduction
|
|
2. **Implement Single Fix** — ONE change at a time, no "while I'm here"
|
|
3. **Verify Fix** — Test passes? No other tests broken?
|
|
4. **If 3+ Fixes Failed: Question Architecture** — Discuss with human partner
|
|
|
|
## Red Flags — STOP and Follow Process
|
|
|
|
If you catch yourself thinking:
|
|
- "Quick fix for now, investigate later"
|
|
- "Just try changing X and see if it works"
|
|
- "It's probably X, let me fix that"
|
|
- "One more fix attempt" (when already tried 2+)
|
|
|
|
**ALL of these mean: STOP. Return to Phase 1.**
|
|
|
|
## This Project's Debugging Tips
|
|
|
|
- **Vite dev server**: `npm run dev` — check browser console and terminal output
|
|
- **Vitest**: `npm run test` — full test suite output
|
|
- **ESLint**: `npm run lint` — catches syntax and style issues
|
|
- **Supabase**: Check `src/supabaseClient.js` config and `.env` variables
|
|
- **React errors**: Check browser DevTools console for component errors
|
|
- **Service layer**: Pure functions in `src/services/` are easiest to debug in isolation
|
|
|
|
## Quick Reference
|
|
|
|
| Phase | Key Activities | Success Criteria |
|
|
|-------|---------------|------------------|
|
|
| **1. Root Cause** | Read errors, reproduce, check changes | Understand WHAT and WHY |
|
|
| **2. Pattern** | Find working examples, compare | Identify differences |
|
|
| **3. Hypothesis** | Form theory, test minimally | Confirmed or new hypothesis |
|
|
| **4. Implementation** | Create test, fix, verify | Bug resolved, tests pass |
|