A deep dive into the four-layer approach we use to detect, explain, and automatically fix runtime errors in the live preview panel.
K
Kodify Team
## The problem\n\nWhen a generated app has a runtime error, the user sees a blank preview or a cryptic error message. We wanted to make fixing these errors as easy as clicking a button.\n\n## The solution\n\nWe built a four-layer AI error-fixing system:\n\n1. **Detection** — the preview iframe catches runtime errors via `window.onerror` and `postMessage`\n2. **Sanitisation** — `sanitiseErrorPayload()` strips any secrets before sending to the AI\n3. **Explanation** — the AI explains the error in plain English\n4. **Fix** — the AI rewrites the affected files and the preview reloads automatically\n\n## Security\n\nAll error payloads are sanitised before reaching the LLM. No API keys, tokens, or secrets can leak through the error fixing flow.