← All Docs

Quality & Evaluation

Understanding Errors

Things don't always work perfectly on the first try. Webase helps you identify and fix errors quickly, whether they come from the bundling process, runtime behavior, or common coding issues.

Types of Errors

There are two main categories of errors you might encounter:

Bundle Errors

Bundle errors occur when the client-side bundler can't compile your app's source files. Common causes include:

  • Syntax errors — Missing brackets, unclosed strings, or invalid JSX.
  • Import errors — Importing a file or module that doesn't exist.
  • Type errors — TypeScript type mismatches (in .tsx files).
  • Missing entry point — The bundler can't find a valid entry file like src/index.tsx.

When a bundle error occurs, the preview panel displays the error message with the file name and line number. The preview won't update until the error is resolved.

Runtime Errors

Runtime errors happen after the app successfully bundles but encounters a problem while running. These include:

  • Undefined variables — Accessing a value that hasn't been defined.
  • Null reference errors — Trying to read a property of null or undefined.
  • API errors — Failed data fetches, incorrect API URLs, or malformed requests.
  • React rendering errors — Component crashes, infinite loops, or state management issues.

Runtime Error Remediation

Webase can detect runtime errors in your preview and help fix them automatically:

1

Error Is Detected

When your app throws a runtime error, Webase captures the error message and stack trace from the preview iframe. You'll see an error overlay in the preview panel.

2

Send It to the AI

You can send the error to the AI through chat. Describe what happened or simply paste the error message. The AI will analyze the error in context of your full source code and make the necessary fixes.

3

Preview Refreshes

After the AI updates the files, the preview re-bundles automatically. Check whether the error is resolved. If not, describe what's still wrong and the AI will continue fixing.

Common Issues and Solutions

  • "Cannot find module" — A file import path is wrong. The AI may have created a file in a different location than expected. Ask the AI to fix the import.
  • "X is not a function" — A value is being called as a function but isn't one. Often caused by incorrect imports or outdated references.
  • Blank preview — The app bundled but nothing renders. Usually a problem in the entry point file or the root component. Ask the AI: "The preview is blank, can you check the entry point?"
  • Infinite loading — The app renders but never finishes loading data. Often caused by an infinite re-render loop or a data fetch that never resolves.
  • Styles not applying — Tailwind classes not working usually means a class name typo or a missing Tailwind config extension.

Debugging Tips

Use the Evaluate button. The toolbar includes an Evaluate button that runs an AI quality check on your app. This can catch issues you might miss, including runtime problems, accessibility gaps, and logic errors. If issues are found, use Evaluate & Improve to let the AI fix them automatically.

  • Be specific when reporting errors. Instead of "it's broken," tell the AI exactly what's happening: "Clicking the Save button throws an error about undefined property 'name'."
  • Check the Code tab. Sometimes a quick look at the source file where the error occurs can reveal an obvious issue you can fix directly.
  • Try one fix at a time. If multiple things are broken, address them one at a time so you can verify each fix independently.