Error handling improvements (DRAFT - needs fixes)

[jchris]

Error Handling Improvements

⚠️ DRAFT - DO NOT MERGE YET

This PR was reverted from main (was PR #575) due to cascading error loops. It needs fixes before it can be merged.

What This PR Does

• Removes extensive error handling from iframe template
• Adds Monaco editor syntax validation
• Auto-converts syntax errors to RuntimeError format
• Implements auto-submit functionality for error repairs
• Adds placeholder-based streaming for messages

Problems That Need Fixing

1. Cascading Error Loop

The current implementation creates an infinite loop:

1. AI streams code with syntax error
2. Monaco detects error (every 50ms during streaming)
3. Error auto-converts to RuntimeError → triggers repair
4. Auto-submit clicks "Code" button after 2s
5. New stream starts → may have intermediate errors → loop repeats

Result: Storm of errors, multiple concurrent streams, flickering code versions

2. Auto-Submit Is Too Aggressive

• Polls every 100ms looking for "Code" button (lines 54-77 in useImmediateErrorAutoSend.ts)
• Clicks immediately when streaming ends
• No global lock prevents multiple concurrent repairs
• Creates race conditions

3. Syntax Errors During Streaming Are Normal

• Monaco validation fires on every marker change (50ms debounce)
• Intermediate code states during streaming naturally have errors
• These shouldn't trigger auto-repair flows

4. No Separation of Concerns

• Syntax validation (Monaco) is tightly coupled to error repair
• Pre-validation before iframe send (IframeContent.tsx:220-297) prevents code from reaching iframe
• Removed 129 lines of iframe error handlers but didn't replace with proper runtime error detection

Required Fixes Before Merge

1. Remove auto-submit (lines 54-77 in useImmediateErrorAutoSend.ts) - let users manually request repairs
2. Add streaming guard - only trigger error handling AFTER streaming completes:

   if (errorCount > 0 && errors && !isStreaming) {
     // Only report after streaming done
   }

3. Remove pre-validation from IframeContent.tsx (lines 223-289) - let iframe handle its own errors
4. Add global repair state to prevent concurrent repairs
5. Restore minimal iframe error handlers for runtime errors (not just syntax)

Good Changes to Keep

• Placeholder-based streaming (sendMessage.ts) - works well
• Monaco error detection for UI feedback - just don't auto-trigger repairs

Testing Checklist

• No auto-clicking of buttons
• Syntax errors during streaming don't trigger repairs
• Only one repair stream at a time
• Runtime errors (not just syntax) are detected
• No flickering between code versions
• Manual error repair still works

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for fireproof-ai-builder ready!

Name	Link
🔨 Latest commit	d76e981
🔍 Latest deploy log	https://app.netlify.com/projects/fireproof-ai-builder/deploys/691a15dff58b7b000977fd75
😎 Deploy Preview	https://deploy-preview-580--fireproof-ai-builder.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 68 (no change from production) Accessibility: 100 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.