Enhance Monaco Editor syntax error detection for save button #191

jchris · 2025-08-07T00:30:09Z

Summary

Enhanced Monaco Editor marker detection to be more authoritative for save button error state
Improved timing and event handling for syntax error detection in JSX code
Reverted LED indicator changes while keeping save button functionality intact

Changes Made

Enhanced marker detection: Now gets ALL markers from all sources instead of filtering by 'typescript' owner only
Multiple event listeners: Added both onDidChangeMarkers and onDidChangeModelContent for more reliable detection
Better timing: Added delays to ensure markers are properly updated before checking
Enhanced logging: More detailed console output showing all markers with their severity levels
Cleaned up LED indicator: Removed all LED indicator changes from message components while preserving save button error detection

Test Plan

Format, typecheck, and tests all pass
Save button correctly detects JSX syntax errors and turns red
Save button shows error count when syntax errors exist
Save button is disabled when errors are present
LED indicator no longer changes color based on syntax errors (reverted)
Manual testing: Introduce syntax errors in Monaco editor and verify save button behavior

🤖 Generated with Claude Code

- Add formatOnType and formatOnPaste options for real-time code formatting - Implement format-on-save functionality in handleSave method - Gracefully handle format errors with fallback behavior 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

…save button - Add Monaco Editor syntax error detection using marker API - Update LED indicator to show red when selected code has syntax errors - Modify save button to show error count and disable when errors exist - Add selectedCodeHasErrors state tracking from Monaco Editor to chat components - Implement real-time error monitoring with onDidChangeMarkers event listener - Connect syntax error state through ResultPreview → home.tsx → ChatInterface → MessageList → Message → StructuredMessage → CodeSegment - Save button now displays "X Error(s)" in red and is disabled when syntax errors present - LED indicator priority: orange (streaming) → red (errors) → green (selected) → gray (default) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

Key fixes to make syntax error detection work: 1. **Language Service Fix**: Changed model language from `jsx` to `javascript` - JSX language is for highlighting only, JavaScript language service has error detection - Keeps JSX compilation enabled for proper JSX syntax validation 2. **Enable Diagnostics**: Added `setDiagnosticsOptions` with both validation types enabled - `noSemanticValidation: false` - enables semantic/type checking - `noSyntaxValidation: false` - enables syntax error detection 3. **Enhanced Compiler Options**: Added modern JSX support configuration - ESNext modules, Node.js resolution, esModuleInterop - Optimized for React JSX with proper factory settings 4. **Improved Error Detection**: Enhanced marker filtering and monitoring - Filter by `owner: 'typescript'` to get language service errors only - Optimized `onDidChangeMarkers` to only check relevant URI changes - Added debug logging to verify error detection (temporary) Now Monaco Editor will detect JSX syntax errors (unclosed tags, invalid expressions, etc.) and show them via the red LED indicator and disabled save button. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

The issue was that handleCodeChange (called on every keystroke) was calling onSyntaxErrorChange(0) immediately, overriding the correct error count from the async onDidChangeMarkers listener. Key fixes: - Remove immediate syntax error checking from handleCodeChange - Rely solely on onDidChangeMarkers for accurate error detection - Add debug logging to trace error state changes - Monaco's TypeScript language service updates markers asynchronously This should fix the save button briefly showing red then reverting to blue. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

… tracking and debounced checks

netlify · 2025-08-07T00:30:15Z

✅ Deploy Preview for fireproof-ai-builder ready!

Name	Link
🔨 Latest commit	`65fc1c9`
🔍 Latest deploy log	https://app.netlify.com/projects/fireproof-ai-builder/deploys/6893f6ce9c8bf400081483f9
😎 Deploy Preview	https://deploy-preview-191--fireproof-ai-builder.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

charliecreates

The update adds useful editor diagnostics but leaves heavy, unguarded console logging and un-debounced setTimeout calls that may degrade performance during active editing. A minor compatibility note regarding JSX highlighting is also flagged. No functional blockers were found, but cleaning up the debug artefacts and debouncing the error checks will improve runtime performance and maintainability.

Additional notes (2)

Compatibility | app/components/ResultPreview/setupMonacoEditor.ts:86-87
Changing the model language from jsx to javascript enables diagnostics but may slightly degrade JSX-specific syntax highlighting (e.g., TSX-style tokens). If you only need the JavaScript language service, another option is to keep the language jsx and set monaco.languages.typescript.javascriptDefaults for diagnostics, or override the theme. Just flagging in case the visual quality drops.
Performance | app/routes/home.tsx:128-132
Left-over console.log will run on every syntax-error change and end up in production bundles unless stripped by the build. Same concern as above—remove or guard behind process.env.NODE_ENV !== 'production'.

Summary of changes

ResultPreview module enhancements

Error-aware save flow
- Propagated syntaxErrorCount from the Monaco editor (IframeContent → ResultPreview → home.tsx) up to the SaveButton.
- SaveButton now shows a red disabled state with the error count and formats document before saving.
Monaco editor setup
- Switched model language to javascript, enabled diagnostics, richer compiler options, and turned on formatOnType/formatOnPaste.
- Added comprehensive marker tracking with listeners for onDidChangeMarkers and onDidChangeModelContent including initial / delayed checks.
UI plumbing
- Added new optional props (onSyntaxErrorChange, syntaxErrorCount) across several components.
- Updated header content and routing to reflect the new save-button behaviour and state.
Misc
- Numerous console debug logs for marker information and syntax-error state propagation.

app/components/ResultPreview/IframeContent.tsx

charliecreates · 2025-08-07T00:31:26Z

app/components/ResultPreview/IframeContent.tsx

+              const contentDisposable = editor.onDidChangeModelContent(() => {
+                // Debounce content changes to avoid excessive checks
+                setTimeout(checkSyntaxErrors, 500);
+              });


setTimeout(checkSyntaxErrors, 500) is scheduled on every keystroke. Without debouncing or clearing previous timers this can queue hundreds of callbacks during rapid typing, causing unnecessary work.

Suggestion

Wrap the syntax-error check in a debounced function, e.g. using lodash.debounce, or manually clear the previous timeout before scheduling a new one.

Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this suggestion

@CharlieHelps yes please - manual clear dont need lodash

Expand this to see my work.

Added let syntaxErrorCheckTimeoutId: ReturnType<typeof setTimeout> | null = null; scoped to the onMount closure in IframeContent.tsx.

Updated all previous setTimeout(checkSyntaxErrors, …) calls (initial check, marker changes, editor content changes) to use a single scheduleSyntaxCheck helper that first calls clearTimeout(syntaxErrorCheckTimeoutId).

Confirmed there are no imports or references to lodash.debounce or any external debounce utility in IframeContent.tsx after a search.

Manually verified (in code around line 230–340) that the shared syntaxErrorCheckTimeoutId is now used at every relevant scheduling point and the old debounce comments now reference the new manual logic.

Validated the patch to IframeContent.tsx was applied cleanly and only lines documenting the new debouncing approach mention 'debounce' (no actual utility remains).

Ran pnpm check (typecheck/lint/tests), saw only unrelated test noise, no errors for IframeContent.tsx.

Staged changes to app/components/ResultPreview/IframeContent.tsx for commit.

Implemented manual timeout management for Monaco syntax-error checks.

Added syntaxErrorCheckTimeoutId plus scheduleSyntaxCheck() helper inside the onMount block
– clears any pending timer before queueing a new one
– shared across initial check, onDidChangeMarkers, and onDidChangeModelContent handlers

Removed the unguarded setTimeout calls; no lodash debounce needed

Commit: 65fc1c9

Let me know if you’d like any tweaks.

…r checks

jchris · 2025-08-07T17:47:00Z

good work @CharlieHelps

charliecreates · 2025-08-07T17:47:06Z

All done.

charliecreates · 2025-08-07T17:47:54Z

Thanks for the feedback, @jchris—glad the update hit the mark. Just ping me if you’d like any further tweaks or improvements.

jchris and others added 6 commits August 6, 2025 12:36

refactor: remove selectedCodeHasErrors state and related UI indicators

7a7c9f8

feat: enhance Monaco editor error detection with comprehensive marker…

81b347e

… tracking and debounced checks

charliecreates bot requested a review from CharlieHelps August 7, 2025 00:30

charliecreates bot reviewed Aug 7, 2025

View reviewed changes

charliecreates bot removed the request for review from CharlieHelps August 7, 2025 00:31

jchris and others added 2 commits August 6, 2025 17:37

chore: remove debug logging from Monaco editor and syntax error handling

5c816c8

refactor(result-preview): add manual timeout clearing for syntax erro…

65fc1c9

…r checks

jchris merged commit c3356cf into main Aug 7, 2025
5 checks passed

jchris mentioned this pull request Aug 13, 2025

Code flickering during streaming introduced by Monaco Editor syntax error detection #230

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Enhance Monaco Editor syntax error detection for save button #191

Enhance Monaco Editor syntax error detection for save button #191

Uh oh!

jchris commented Aug 7, 2025

Uh oh!

netlify bot commented Aug 7, 2025 •

edited

Loading

Uh oh!

charliecreates bot left a comment

Uh oh!

Uh oh!

charliecreates bot Aug 7, 2025

Uh oh!

jchris Aug 7, 2025

Uh oh!

charliecreates bot Aug 7, 2025 •

edited

Loading

Uh oh!

charliecreates bot Aug 7, 2025

Uh oh!

jchris commented Aug 7, 2025

Uh oh!

charliecreates bot commented Aug 7, 2025 •

edited

Loading

Uh oh!

Uh oh!

charliecreates bot commented Aug 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Enhance Monaco Editor syntax error detection for save button #191

Enhance Monaco Editor syntax error detection for save button #191

Uh oh!

Conversation

jchris commented Aug 7, 2025

Summary

Changes Made

Test Plan

Uh oh!

netlify bot commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for fireproof-ai-builder ready!

Uh oh!

charliecreates bot left a comment

Choose a reason for hiding this comment

ResultPreview module enhancements

Uh oh!

Uh oh!

charliecreates bot Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

jchris Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

charliecreates bot Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

charliecreates bot Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

jchris commented Aug 7, 2025

Uh oh!

charliecreates bot commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

charliecreates bot commented Aug 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Aug 7, 2025 •

edited

Loading

charliecreates bot Aug 7, 2025 •

edited

Loading

charliecreates bot commented Aug 7, 2025 •

edited

Loading