Claude Code unable to resolve cascading frontend errors efficiently - 2+ hours wasted

Problem

Paying customer (€250/month) spent 2+ hours in a single session trying to fix cascading frontend errors in a Next.js 14 + NestJS project. Claude Code kept fixing errors one at a time in a loop instead of diagnosing all issues upfront and fixing them in one pass.

Errors encountered (chain reaction)

1. TLS/HTTPS forced in development (HSTS + CSP upgrade-insecure-requests)
2. Hydration mismatch (Google OAuth button server vs client render)
3. PrismaClient bundled for browser (import chain: providers → notification-context → useNotifications → notificationService → prisma)
4. CSP blocking Google Sign-In (missing accounts.google.com in script-src, style-src, frame-src, connect-src)
5. Notification API calls firing without authentication (React Query hooks running on unauthenticated pages)
6. PWA manifest icons 404
7. Google OAuth origin propagation delay

Expected behavior

Claude Code should have:

• Analyzed ALL errors upfront before starting fixes
• Identified root causes (e.g., the PrismaClient import chain) in one pass
• Applied all CSP directives for Google OAuth at once (not one directive per iteration)
• Recognized that notification hooks needed to be fully disabled, not partially patched

Actual behavior

• Fixed one error at a time, creating a frustrating loop
• Each fix revealed the next error, requiring another round
• Some fixes needed multiple attempts (e.g., notifications required 3 iterations)
• User had to report each error manually from Safari console

Environment

• Claude Code with Opus model
• macOS (Safari browser)
• Next.js 14 + NestJS 10 project
• Local development pointing to remote DB (Render) + Redis (Upstash)

Suggestion

For frontend debugging sessions, Claude Code should:

1. Fetch the page HTML + all JS chunks and analyze them for common issues BEFORE starting fixes
2. When fixing CSP issues, add ALL required domains for a service (e.g., Google) in one pass
3. When finding a server-side import in a client bundle, trace the FULL import chain immediately
4. Batch related fixes together instead of one-at-a-time iterations

🤖 Generated with Claude Code