# The Five Classic Errors You will hit all five of these within your first month of building. That's not a prediction about you, it's a fact about the errors: they cover most of what actually goes wrong in a Lovable, Bolt, or Replit app. Each one below has three parts: what it looks like, what it actually means, and the exact prompt to paste. Read the sample messages once now. Next time one appears, you'll recognize the shape even if the wording differs, and recognition kills the panic. --- ## 1. Missing or invalid API key **What it looks like:** ``` Error 401: Unauthorized {"error": {"message": "Incorrect API key provided: sk-proj-****. You can find your API key at https://platform.openai.com/api-keys", "type": "invalid_request_error", "code": "invalid_api_key"}} ``` Also appears as: `403 Forbidden`, `Authentication failed`, `API key not found`, `Invalid credentials`. **What it actually means:** the app tried to use a paid service (an AI model, a database, a map service) and the password for that service (the API key) is missing, mistyped, or expired. Nothing in your app's logic is broken. **The fix prompt:** ``` I'm getting an authentication error (401/403/invalid API key). Do not rewrite any app code; this is a credentials problem, not a code problem. 1. Tell me exactly which service is rejecting us (the name of it). 2. Tell me exactly where in this project that service's key is supposed to live (the name of the setting or environment variable, which is a named slot where apps store secrets). 3. Tell me whether that slot is currently empty, or filled with something that looks wrong (wrong format, extra spaces, quotes around it). 4. Tell me the exact page where I get a fresh key for this service, and the exact place in my tool where I paste it (which menu, which button). 5. Do not put the key directly into the code files, ever. Keys live in the settings slot only. I will paste the new key myself. After I do, tell me how to confirm it worked. ``` --- ## 2. CORS blocked **What it looks like:** ``` Access to fetch at 'https://api.example.com/data' from origin 'https://myapp.lovable.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ``` **What it actually means:** CORS (a browser safety rule about which websites are allowed to talk to which servers) is refusing to let your app call another service directly from the browser. Your code isn't wrong, it's knocking on a door the browser won't open from this side. **The fix prompt:** ``` I'm getting a CORS error (the browser safety rule that blocks one website from calling another server directly). The full error is pasted below. 1. Explain in one sentence which two addresses are refusing to talk: my app's address and the server it tried to call. 2. Tell me which fix applies here (pick one, smallest first): a) The service I'm calling has a setting where I add my app's address to its allowed list. If so, tell me where that setting is. b) The call should be made from my app's backend instead of from the browser (servers are not bound by this browser rule). If so, move ONLY this one call to the backend. Do not restructure anything else. 3. Do NOT "fix" this by disabling security, using a random public proxy from the internet, or adding headers to my own app (my app's headers cannot fix this; the permission has to come from the other side or the call has to move). 4. Apply the one fix, then tell me what you changed and how to test it. HERE IS THE ERROR: [PASTE THE CORS ERROR HERE] ``` --- ## 3. Build failed / syntax error **What it looks like:** ``` Build failed with 1 error: src/components/Dashboard.tsx:42:18: ERROR: Expected ")" but found "{" 42 | const total = items.reduce((sum, item) => { sum + item.price } ``` Also appears as: `SyntaxError: Unexpected token`, `Module not found`, `Compilation failed`, a red banner in Lovable/Bolt saying the preview couldn't update. **What it actually means:** there's a typo-level mistake in the code (a missing bracket, a misspelled name, an import pointing at a file that doesn't exist), and the app can't even start until it's corrected. The good news: the error message almost always names the exact file and line. **The fix prompt:** ``` The build failed (the app can't start because of a code mistake). The full error is pasted below. 1. The error names a file and usually a line number. Go to exactly that spot. Quote me the broken line. 2. Explain in one plain-English sentence what's wrong with it (missing bracket, misspelled name, importing a file that doesn't exist, etc.). 3. Fix ONLY that line (or the smallest edit that resolves it). Do not rewrite the file, do not "clean up while you're in there", do not touch any other file. 4. If fixing it reveals a SECOND build error, stop and show me the new error before fixing it. One error per attempt. 5. Report: the before line, the after line, and confirmation the build passes. HERE IS THE ERROR: [PASTE THE BUILD ERROR HERE] ``` --- ## 4. The blank white page **What it looks like:** exactly that. No error, no text, no spinner. The app "loads" but the screen is empty or pure white. Sometimes the page flashes content for a split second first. **What it actually means:** the app crashed while drawing the screen, before it could show you anything, and the real error is hiding in the browser console (the log your browser keeps of what went wrong). A blank page is never "nothing happened", it's "something happened too early for you to see it." **The fix prompt:** ``` My app loads a blank/white page. No visible error. Do not change any code yet; the real error is hidden and we find it first. 1. Check the browser console (the browser's log of what went wrong) for the first red error. If you can't access it, tell me the exact keys to open it myself (usually F12, or Cmd+Option+J on Mac, then the "Console" tab) and what to copy back to you. 2. Also check whether the build/deploy succeeded at all. A failed deploy can leave an old broken version live. 3. Quote me the FIRST error in the console, not the last. The first one usually causes the rest. 4. Then: explain it in plain English (2 sentences max), propose the single smallest fix, apply only that, and report what changed. 5. Common causes to check before anything exotic: a missing key making a service call explode on load, code that assumes data exists before it has loaded, or a bad address/route. Rule those out first. ``` --- ## 5. Rate limit / quota exceeded **What it looks like:** ``` Error 429: Too Many Requests {"error": {"message": "Rate limit reached for gpt-4o. Limit: 500 requests per day. Please try again in 3h42m or upgrade your plan.", "type": "rate_limit_error"}} ``` Also appears as: `quota exceeded`, `insufficient_quota`, `You exceeded your current quota, please check your plan and billing details`. **What it actually means:** a service you use has a ceiling (requests per minute, per day, or dollars per month) and you hit it. Your code is fine. The fix is waiting, paying, or asking less often. No prompt can code around a ceiling. **The fix prompt:** ``` I'm hitting a rate limit or quota error (429 / quota exceeded). This is a usage ceiling, not a code bug, so do not rewrite app logic to "fix" it. 1. Tell me exactly which service's limit I hit, and which kind: a) Too many requests too fast (resets in minutes) b) A daily/monthly cap (resets on a schedule) c) A spending or plan limit (resets when I pay or upgrade) 2. Tell me, from the error message, when it resets or what upgrading costs, if that information is in there. 3. Tell me if my app is calling this service more than it needs to (for example, calling it on every keystroke instead of on submit, or calling it in a loop). If yes, propose the ONE change that cuts the most calls, and apply only that. 4. If the app's usage is reasonable and I simply need a bigger plan, say so plainly with the service's pricing page, and change nothing. ``` --- ## Bonus: "It worked yesterday and I changed nothing" You will say this sentence. Everyone says this sentence. Here's the uncomfortable truth: something changed. Computers don't develop moods. If you truly changed nothing, then a package updated itself, a free trial expired, a key rotated, a service changed its rules, or a deploy from three days ago only now got triggered. The move is not to argue with the app. The move is to ask the AI to find the change. **The fix prompt:** ``` This app worked yesterday (or recently) and now it doesn't. I have not knowingly changed anything. Something DID change; help me find it before we fix anything. Check each of these and report what you find, one line each: 1. CODE: What are the most recent changes to this project's files? List the last few edits with dates if you can see them. 2. DEPENDENCIES: Did any package (third-party code this app is built on) get updated or reinstalled recently? Packages can change under you even when your own code doesn't. 3. KEYS AND SERVICES: Could any API key, trial, or plan have expired? Look at the actual error we're getting now; does it smell like auth (401/403), limits (429), or a service being down (500/503)? 4. THE OUTSIDE WORLD: Is the error coming from a service we call, rather than from our code? If so, that service may have changed or gone down, and no local fix will help. Then tell me your best single theory for what changed, and the smallest way to confirm it. Do not fix anything until we've confirmed the theory. ``` --- ## If none of these match Use the general decoder prompt in `decoder-prompt.md` (same kit). And if you've been going in circles for more than 30 minutes, the winning move might be reverting to the last version that worked. That's not giving up, that's what professionals do. See the guide page for how.