Errors and Troubleshooting

Ask any developer - code is sensitive. A missing semicolon or a capital letter can send you in circles looking for bugs.

AI makes mistakes just like everyone else. Here are some tips for debugging the most common errors when building apps with AI.

Blank Screen when Running App

There are two common causes of a blank white screen in the preview.

The preview is displaying the index page (/) but the UI has been built on another screen
There’s an error in the code.

To solve the first issue, have a look at the index file in the code to see if it’s importing the correct components and trying to display them. You can also look at the other files created by the Agent to see if there are other pages. Open the preview in a new tab and add /<file-name> after .dev in the URL. For example, if the Agent has created a Calendar page, with the file called calendar.tsx, update the url to <previewurl>-onfine.dev/calendar and you should see the corresponding page.

If you’re sure that it’s not the first error and your index page should be displaying the app, but your preview shows a blank white screen, it could indicate an error in the code that doesn’t cause the app to crash, so doesn’t trigger the error overlay and Fix it with Fine button. In this case, try using the following prompt:

Following the most recent changes, all I can see is a blank white screen, so something isn’t working correctly.
Look through the recently edited files, try to identify the error, think step-by-step to solve it and implement your fix in the code.

Runtime & Build Errors

Fine should automatically catch Runtime and Build Errors and offer to fix them for you. Simply click, “Fix it with Fine” and the Agent will analyze the logs to find and fix the error.

Sometimes, it will fix one error, but not notice another one. In this case, as the logs are different, the Agent should be able to fix them when you click “Fix it with Fine” again.

If you’ve tried clicking Fix it with Fine multiple times with no luck, we recommend rolling back to the last stage where the app ran without issues and rewording your prompt for the Agent to try again from scratch.

UI Issues

AI can count pixels, but it can’t actually see what it’s coding. So sometimes, you’ll face UI issues.

Components covering other components or text
Overflowing text
Bad colour choices
Misaligned spacing

To fix these sorts of issues, here are some tips for how to prompt the Agent.

Be as specific as possible.
a) Don’t just say “The text”, say “the headers” or “the button text”.
b) Copy and paste the exact text into the chat. “Update the ‘Get a Quote’ button font to Times New Roman”
Describe what is happening and what should be happening clearly.
e.g. “Currently, the ‘Back to Home’ button leads to the bottom of the home page, but it should lead to the top of the home page. Please update the link”
Screenshot the component you’re referring to if you’re not sure what it’s called.