Skip to main content

Fixing errors in your app

Errors happen during development. Appifex shows them clearly and gives you tools to fix them fast. The error experience differs slightly between the web builder (appifex.ai in your browser) and the Appifex mobile app (companion app on your phone).

Step 1: Spot the error​

On the web builder (appifex.ai)​

The web builder has a two-panel layout: chat on the left, preview and tabs on the right. When an error occurs, a red banner appears above both panels, spanning the full width of the page, between the top header bar and the main content area.

There are three types of error banners:

App crash (runtime error)​

Your mobile app hit an error while running. Look for a red-tinted banner with:

  • A warning triangle icon and the heading "Mobile App Crashed"
  • The error type and message in monospace text (e.g. ReferenceError: x is not defined)
  • The file path and line number (e.g. in src/App.tsx:42)
  • A clickable "Show stack trace" link to expand the full trace
  • An occurrence count badge (e.g. "3x") if the crash repeated
  • A red "Fix This Error" button at the bottom-left of the banner

Missing module or startup error​

The app couldn't start. Look for a red-tinted banner with one of these headings:

  • "Missing Module" (package icon) -- a required npm package isn't installed
  • "Expo Plugin Error" (warning icon) -- an Expo plugin failed to load
  • "Metro Bundler Crashed" (terminal icon) -- the JavaScript bundler crashed
  • "Configuration Error" (warning icon) -- something is wrong in the project config

The banner shows the error message, the missing module or plugin name in a gray code box, and for missing modules a suggested install command. The "Fix This Error" button is at the bottom-left.

Dependency installation failed​

A package failed to install (npm or pip). Look for a red-tinted banner with the heading "Dependency installation failed" and a warning triangle icon.

This banner lists each platform that had an error (e.g. "web platform", "backend platform"). Click "View error details" under each to expand the full error output. The "Fix this error" button (with a wrench icon) is at the bottom.

On the Appifex mobile app​

The mobile companion app shows errors differently. When your generated app crashes:

  • A floating red banner appears in the project screen, overlaying the bottom area. It has a red dot indicator and the heading "App crashed"
  • Below the heading you'll see the exception type and message (e.g. TypeError: Cannot read property 'map' of undefined)
  • Tap the banner to expand it and see the file path, line number, and stack trace
  • The primary action button says "Fix with prompt" (with a hammer icon)
  • If the error has a Sentry link, you'll also see a "Sentry" button to view detailed diagnostics

To see all errors: Tap the "Errors" button in the quick action bar at the bottom of your project screen. This opens a bottom sheet listing all runtime errors with color-coded status pills:

  • Red = new error
  • Orange = acknowledged
  • Blue = fix in progress
  • Green = fixed
  • Gray = ignored

Each error in the list shows the exception type, occurrence count, and a "Fix" button for errors that haven't been addressed yet.

note

The mobile app only shows runtime crash errors. Startup errors (bundler/plugin issues) and dependency installation errors are only visible in the web builder.

Step 2: Fix the error​

On the web builder​

Every error banner has a Fix This Error button. Click it.

  • For app crashes and startup errors: Appifex automatically analyzes the error and generates a fix. Switch to the Progress tab on the right panel to watch it work. The AI retries up to 3 times.
  • For dependency errors: A fix prompt is generated and placed in your chat input on the left panel. Review it, then click Send.
tip

After clicking Fix This Error, switch to the Progress tab to follow the fix in real time.

On the mobile app​

Tap "Fix with prompt" on the error banner, or tap an error in the error list and hit "Fix". This does two things:

  1. Pre-fills a fix prompt in the chat input describing the error
  2. Starts the fix task automatically

The generation progress appears in the same project screen, just like a regular code generation. Once the fix is applied, the error status changes to "fixed" and the banner dismisses.

Step 3: If auto-fix doesn't resolve it​

Sometimes the AI needs your help. These approaches work on both web and mobile:

Option A: Describe the error in chat​

Copy the error message and paste it into chat with context about what should happen:

"Fix the error: ReferenceError: userData is not defined.
The profile page should load the current user's data from the backend."

The more context you give, the better the fix.

Option B: Take a screenshot​

If the error is visual (wrong layout, broken component, unexpected behavior):

  1. Take a screenshot of the problem
  2. Attach it to your message (drag and drop or tap the image icon)
  3. Describe what's wrong:
"The navigation bar overlaps the content on mobile. See the screenshot."

Option C: Fix it in the code editor (web builder only)​

For small, obvious issues:

  1. Click the Code tab in the right panel
  2. Find the file mentioned in the error
  3. Make the fix
  4. Click Save

Good for: typos, wrong variable names, small CSS tweaks.

Common error patterns​

Error messageWhat it meansWhat to tell Appifex
Cannot read properties of undefinedCode is trying to use data that doesn't exist yet"Add null checks for [variable name] in [component name]"
Module not foundA package isn't installed or an import path is wrong"Fix the missing import for [module name]"
Network Error / fetch failedBackend isn't running or URL is wrongClick Resume preview first, then retry
Type error / TypeScript errorCode types don't match"Fix the TypeScript error in [file name]"
CORS errorFrontend can't reach backend"Fix the CORS configuration for the backend API"
Blank white screenApp crashed on renderOpen browser console (F12), copy the error, paste in chat

Prevent errors before they happen​

  • Be specific in prompts -- clearer instructions produce fewer errors (prompting guide)
  • Add features one at a time -- don't request five things in one prompt
  • Review the progress log -- catch issues early before building on top of them

Still stuck?​

Gather the error message and what you were trying to do, then reach out: