debugging
Debugs common issues in SideDish. Use when fixing errors, investigating bugs, troubleshooting API failures, or resolving build issues. Includes common error patterns, logging strategies, and debugging tools.
When & Why to Use This Skill
This Claude skill provides a comprehensive framework for debugging SideDish applications, offering systematic troubleshooting steps for API failures, authentication errors, and frontend hydration issues to streamline the development and maintenance process.
Use Cases
- Resolving Authentication and Authorization Errors: Quickly identifying and fixing 401 and 403 status codes by verifying Firebase configurations and ownership logic.
- Troubleshooting API and Data Fetching Issues: Using systematic checks for 404 errors and database document existence to ensure reliable data flow.
- Fixing Frontend Hydration and Build Failures: Addressing Next.js hydration mismatches and resolving build-time TypeScript errors through standardized checklists.
- Environment and Infrastructure Verification: Validating environment variables and Firebase console settings to ensure the application environment is correctly configured.
| name | debugging |
|---|---|
| description | Debugs common issues in SideDish. Use when fixing errors, investigating bugs, troubleshooting API failures, or resolving build issues. Includes common error patterns, logging strategies, and debugging tools. |
Debugging Skill
Instructions
- Check browser console & Network tab
- Review server logs in terminal
- Verify environment variables
- Check Firebase console for auth/db issues
- Clear cache if needed:
rm -rf .next && pnpm dev
Common Error Patterns
401 "인증이 필요합니다"
const { user, isAuthenticated } = useAuth()
console.log('Auth state:', { user, isAuthenticated })
Fix: Wrap with useRequireAuth(), check Firebase config
403 "권한이 없습니다"
console.log('authorId:', doc.data()?.authorId)
console.log('user:', authUser.uid)
Fix: Verify ownership check logic
404 "찾을 수 없습니다"
const doc = await db.collection('projects').doc(id).get()
console.log('exists:', doc.exists, 'id:', id)
Hydration Errors
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return null
Quick Checklist
- Browser console errors
- Network tab failed requests
- Environment variables set
- Firebase console status
- TypeScript errors (
pnpm build) - Server logs in terminal
For complete debugging templates and TypeScript error fixes, see reference.md.