15 Most Common AI Vibe Coding Bugs and How to Fix Them

AI coding tools are remarkable at generating working code fast. But they have systematic blind spots — patterns they get wrong repeatedly across every tool and every project. After reviewing hundreds of AI-generated codebases, these are the 15 bugs that show up almost every time.

1. No Loading States

AI-generated code fetches data and directly renders it without handling the loading period. Users see blank sections or layout shifts. Fix: Add isLoading state to every async operation and show a spinner or skeleton component while data loads.

2. No Error Handling on API Calls

Fetch calls without try-catch blocks mean any API failure silently breaks the UI. Fix: Wrap every async operation in try-catch and display a user-friendly error message.

3. Secrets in Frontend Code

API keys and credentials hardcoded in React components. Anyone can view these in browser DevTools. Fix: Move all secrets to environment variables. Never put a real API key in frontend code — use a backend proxy for sensitive calls.

4. Missing Input Validation

Forms that submit empty values or accept invalid formats. AI generates the happy path but skips edge cases. Fix: Add validation before every form submission — required fields, email format, number ranges, and string length limits.

5. useEffect with Missing Dependencies

React hooks that run on every render or cause infinite loops because the dependency array is wrong. Fix: Include every variable the effect uses in the dependency array.

6. No Auth Checks on API Routes

Private pages hidden behind frontend checks that are accessible by navigating directly to the URL. Fix: Add server-side authentication checks on every protected API route. Frontend auth is UX, not security.

7. N+1 Database Queries

Fetching a list then making a separate database query for each item. Works with 10 items, collapses at 1000. Fix: Use JOIN queries or batch fetching to retrieve related data in one query.

8. No Pagination

Fetching all records from a table. Works in dev with 20 test records, times out in production with 10,000. Fix: Add LIMIT and OFFSET to all list queries and implement pagination in the UI.

9. Broken Mobile Layout

AI often generates desktop-first layouts that overflow on phones. Fix: Test on mobile immediately after each major layout change. Use relative units and responsive Tailwind prefixes (sm:, md:, lg:).

10. CORS Not Configured for Production

API calls work in development but fail in production because CORS only allows localhost. Fix: Update backend CORS settings to include your production domain.

11. Images Not Optimised

4MB photos displayed at full resolution make pages painfully slow. Fix: Compress images on upload with sharp or Supabase Storage transformations.

12. No Rate Limiting

API endpoints that accept unlimited requests — a problem the moment anyone discovers your endpoint and hammers it. Fix: Add rate limiting middleware to every external-facing API route.

13. Console.log in Production

Debug logs left in production expose your data structure to anyone with DevTools open. Fix: Remove all console.log calls before deploying.

14. Hardcoded URLs

API URLs hardcoded as 'http://localhost:3000/api'. Works in dev, breaks in production. Fix: Use environment variables for all URLs.

15. No Database Indexes

Queries on columns with no index become full table scans — fast with 100 rows, slow with 100,000. Fix: Add indexes on every column you filter or sort by. In Supabase: Database → Indexes → New Index.

If your AI-generated app has several of these issues, a code review from an experienced developer takes 2 to 3 hours and gives you a prioritised fix list. We offer this at Saurabh Infosys.