Fix a White Screen in Your AI App: A Debugging Checklist

Start with the failure you can observe

A blank page after an AI edit is a symptom, not a diagnosis. In a browser-based app built with Bolt, Lovable, Cursor or another tool, it may come from a JavaScript error, a missing file, a failed request or a deployment configuration problem. The source code may still be intact.

If real users are affected, restore the last known working release when you can do so safely. Investigate the broken version in a separate preview. If only your preview is affected, keep the current evidence and identify the first failure before asking for more changes.

A quick triage table

What you see	First place to check	A useful next action
A blank preview immediately after an edit	Browser Console and the latest diff	Record the first relevant error and changed files
Local preview works, deployed page is blank	Network panel and deployment logs	Check missing assets, build settings and required environment variables
The page appears but data never loads	Failed API request in Network	Check status and response; distinguish authentication from server failure
A loader stays on screen with no error shown	Console, Network and loading-state logic	Check whether failure leaves the UI waiting forever
Only one browser shows the old broken version	Asset requests and cache behavior	Compare with a fresh session; verify deployment before blaming caching

These are investigation paths, not guaranteed causes. Changing several things at once makes it harder to learn which one mattered.

1. Capture the Console error

In Chrome, open View → Developer → JavaScript Console, or use Option + Command + J on macOS / Ctrl + Shift + J on Windows and Linux. Reload once while the Console is open. Look for the first error relevant to your app, not an unrelated extension message.

A useful report might contain:

Uncaught ReferenceError: ProductList is not defined
    at App (App.jsx:18)

Keep the exact message, file and line when available. Include the action that triggered it and the last change. Redact tokens, passwords and personal data before sharing logs. The Chrome Console documentation explains the panel; MDN explains undefined-reference errors.

2. Separate rendering errors from failed downloads

If the Console points at a missing JavaScript bundle, open Network, reload, and inspect the failed request. A 404 for a script needs a different investigation from a 401 API response or a 500 from your server. Record the request path, status and useful response text without exposing credentials.

If a script request returns your HTML fallback instead of JavaScript, inspect your hosting routes and asset paths. If an API returns 401, verify the expected sign-in state; removing authentication is not an appropriate repair. Chrome’s Network guide describes how to inspect individual requests.

3. Give the agent a bounded task

Use this prompt after replacing the brackets:

Expected: [what the page should show].
Actual: [blank page / visible message].
Reproduction: [URL or preview, then exact steps].
First relevant error: [redacted exact message].
Last working checkpoint: [commit or version].
Last change: [the requested animation / renamed component / other edit].

Explain the likely cause using this evidence.
Identify the smallest change needed to test the hypothesis.
Do not rewrite unrelated features or remove permission checks.
Tell me how to verify the original flow and one nearby working flow.

The downloadable bug-report template adds fields for environment and user impact. If the agent’s first attempt does not work, report what changed in the evidence before approving another patch.

4. Example: data shape versus hiding the error

Consider this illustrative component:

function ProductList({ products }) {
  return products.map(product => <p key={product.id}>{product.name}</p>);
}

If products is undefined while data loads, this call fails. A useful repair depends on the intended states: loading, empty results, failed request and valid products. Merely replacing everything with an empty array can hide a failed API request from the user.

Ask the agent to define the input contract and show each state. Then check an empty successful response, a populated response and a failed request. This is an example for reasoning about states, not a diagnosis of your specific app. In React, error boundaries can show fallback UI for rendering errors, but they do not fix the underlying bug.

5. Verify before publishing the fix

Run the project’s existing checks. Open the same URL and repeat the exact failure steps. Then check a nearby working feature, a narrow screen and a page reload. If the error only happened after deployment, repeat the check on the deployed version too.

Write down what you verified and what is still unknown. A clean build does not establish that login, storage or permissions behave correctly. Save a checkpoint once the original failure is resolved.

Practice the decision

Our free white-screen exercise lets you compare three next steps and their consequences. For the full workflow, use the debugging curriculum or guide to debugging AI-generated code.

Checked on 3 October 2026: this guide uses official browser and framework documentation. The code sample is illustrative; causes on your project must be verified from its own error and request evidence.

Sources checked 2026-10-03

• Chrome DevTools Console — checked 2026-10-03.

• Lovable publishing — checked 2026-10-03.

• Claude Code best practices — checked 2026-10-03.

• MDN explains undefined-reference errors — checked 2026-10-03.

• Network guide — checked 2026-10-03.

• error boundaries — checked 2026-10-03.