> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleap.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Debugging

> How to fix errors and troubleshoot issues

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

<Steps>
  <Step title="Identify the error">
    Read the error message carefully. What does it say?
  </Step>

  <Step title="Share with AI">
    Paste the error message in chat
  </Step>

  <Step title="Provide context">
    Explain what you were trying to do
  </Step>

  <Step title="Let AI fix it">
    AI will analyze and propose a fix
  </Step>

  <Step title="Verify the fix">
    Check if the issue is resolved
  </Step>
</Steps>

## 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: bookings.map 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**:

```
Getting "bookings.map is not a function" when my bookings
island loads data from the Kleap Database. Can you check how
the data is fetched and rendered?
```

### "Failed to fetch"

```
Error: Failed to fetch
```

**Causes**:

* The form isn't wired to send submissions
* Network problem
* The Kleap Database read was blocked

**Fix prompt**:

```
My contact form shows "Failed to fetch" when I submit it.
Can you make sure the form sends submissions to my dashboard?
```

## 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 Kleap Database Issues

### Data Not Loading

```
My bookings aren't showing up from the Kleap Database. Can you check:
1. The data is read from the right table
2. The access rules allow reading this data
3. I'm logged in, if the data requires an account
```

### Empty Results

```
This list is empty but there's data in the table.
Can you check how the data is queried and the access rules?
```

### Account Issues

```
Accounts aren't working. After signup, the user
doesn't stay logged in. Can you check the login flow?
```

## Prevention Tips

<AccordionGroup>
  <Accordion title="Test frequently">
    Don't wait until you've made many changes. Test after each significant addition.
  </Accordion>

  <Accordion title="One change at a time">
    Make one change, verify it works, then move on. Easier to debug.
  </Accordion>

  <Accordion title="Use version history">
    If something breaks badly, you can always roll back.
  </Accordion>

  <Accordion title="Read error messages">
    Error messages often tell you exactly what's wrong. Share them with AI.
  </Accordion>
</AccordionGroup>

## 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 request that loads my bookings returns 500.
The response body says: [error message]
```

<Card title="Troubleshooting Guide" icon="wrench" href="/tips/troubleshooting">
  Solutions to common problems
</Card>