Skip to main content
When something goes wrong, Kleap’s AI can help you fix it. Here’s how to effectively debug issues.

​
Types of Errors

​
Build Errors

Happen when code can’t compile:
  • Syntax errors
  • Missing imports
  • Type errors
  • Invalid JSX
What you see: Error message in the chat or preview

​
Runtime Errors

Happen when the app runs:
  • Undefined variables
  • Failed API calls
  • Null reference errors
  • Logic bugs
What you see: Error in the preview or browser console

​
Visual Bugs

The code works but doesn’t look right:
  • Wrong colors or sizing
  • Broken layouts
  • Missing elements
  • Responsive issues
What you see: Unexpected appearance in preview

​
Debugging Workflow

1

Identify the error

Read the error message carefully. What does it say?
2

Share with AI

Paste the error message in chat
3

Provide context

Explain what you were trying to do
4

Let AI fix it

AI will analyze and propose a fix
5

Verify the fix

Check if the issue is resolved

​
Effective Error Reporting

​
Include the Error Message

I'm getting this error:
"TypeError: Cannot read properties of undefined (reading 'map')"
on the products page

​
Describe What Happened

I was trying to add a product list to the homepage.
The AI generated the code but now the page shows a white screen.
Here's the error from the console: [error message]

​
Mention What Changed

After adding the user authentication, the dashboard page
stopped loading. It was working before that change.

​
Common Errors and Solutions

​
”Cannot find module”

Error: Cannot find module '@/components/Button'
Causes:
  • Component doesn’t exist
  • Wrong import path
  • Typo in filename
Fix prompt: 
I'm getting a "Cannot find module '@/components/Button'" error.
Can you check if the file exists and fix the import?

​
“Hydration mismatch”

Hydration failed because the initial UI does not match
what was rendered on the server
Causes:
  • Different content on server vs client
  • Using window or localStorage without checks
  • Date/time rendering
Fix prompt: 
I'm getting a hydration error on the dashboard.
Can you fix the component to avoid server/client mismatch?

​
“X is not a function”

TypeError: supabase.from is not a function
Causes:
  • Variable is not what you expect
  • Wrong import
  • Missing initialization
Fix prompt: 
Getting "supabase.from is not a function" when trying
to fetch data. Can you check the Supabase setup?

​
“Failed to fetch”

Error: Failed to fetch data from API
Causes:
  • API endpoint doesn’t exist
  • CORS issues
  • Network problems
  • Wrong URL
Fix prompt: 
The API call to /api/products is failing.
Can you check the API route and make sure it's set up correctly?

​
Visual Debugging

When something looks wrong but there’s no error:

​
Describe What’s Wrong

The cards are stacking vertically but I want them in a 3-column grid.
They also have no space between them.

​
Reference What You Expected

The hero section should have the image on the right and text on
the left, but they're both centered in a column.

​
Use Element Selection

  1. Click the broken element
  2. Describe what’s wrong
  3. AI has context to fix it
[After selecting element]
"This card is too narrow and the text is overflowing"

​
When AI Can’t Fix It

​
Provide More Context

The error might be related to [your suspicion].
Here's the relevant code: [paste code]

​
Try a Different Approach

The fix didn't work. Can we try a different approach?
Maybe [alternative solution]?

​
Undo and Restart

If things are too broken:
  1. Open version history
  2. Restore to a working version
  3. Try a different approach
Let's go back to the version before adding payments.
I want to try implementing it differently.

​
Debugging Database Issues

​
Connection Errors

Supabase connection failing. Can you verify:
1. Environment variables are set
2. Database URL is correct
3. The table exists

​
Query Issues

This query returns empty but there's data in the table:
[your query]
Can you check the query and RLS policies?

​
Auth Issues

User authentication isn't working. After signup, the user
doesn't stay logged in. Can you check the auth flow?

​
Prevention Tips

Don’t wait until you’ve made many changes. Test after each significant addition.
Make one change, verify it works, then move on. Easier to debug.
If something breaks badly, you can always roll back.
Error messages often tell you exactly what’s wrong. Share them with AI.

​
Browser DevTools

For advanced debugging:
  1. Open DevTools - Right-click → Inspect (or F12)
  2. Console tab - See JavaScript errors
  3. Network tab - Check API calls
  4. Elements tab - Inspect HTML/CSS
Share what you find: 
In the Network tab, the /api/users call returns 500.
The response body says: [error message]

Troubleshooting Guide

Solutions to common problems