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

Describe What Happened

Mention What Changed

Common Errors and Solutions

”Cannot find module”

Causes:
  • Component doesn’t exist
  • Wrong import path
  • Typo in filename
Fix prompt:

“Hydration mismatch”

Causes:
  • Different content on server vs client
  • Using window or localStorage without checks
  • Date/time rendering
Fix prompt:

“X is not a function”

Causes:
  • The data isn’t an array yet (still loading)
  • Unexpected shape returned from the Kleap Database
  • Missing initial value
Fix prompt:

“Failed to fetch”

Causes:
  • The form isn’t wired to send submissions
  • Network problem
  • The Kleap Database read was blocked
Fix prompt:

Visual Debugging

When something looks wrong but there’s no error:

Describe What’s Wrong

Reference What You Expected

Use Element Selection

  1. Click the broken element
  2. Describe what’s wrong
  3. AI has context to fix it

When AI Can’t Fix It

Provide More Context

Try a Different Approach

Undo and Restart

If things are too broken:
  1. Open version history
  2. Restore to a working version
  3. Try a different approach

Debugging Kleap Database Issues

Data Not Loading

Empty Results

Account Issues

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:

Troubleshooting Guide

Solutions to common problems