low-code-react-app-b/docs/guides/ERROR_REPAIR_GUIDE.md

Error Detection & Auto Repair Feature

Overview

CodeForge includes an intelligent error detection and auto-repair system powered by AI that helps you identify and fix code issues automatically.

Features

🔍 Error Detection

The system automatically scans your code files for various types of errors:

• Syntax Errors: Missing parentheses, unbalanced braces, malformed statements
• Import Errors: Unused imports that clutter your code
• Type Errors: Use of any types that reduce type safety
• Lint Errors: Code style issues like using var instead of const/let

🔧 Auto Repair Modes

1. Single Error Repair

   • Click the wrench icon next to any error
   • AI fixes just that specific issue
   • Get instant feedback with explanations

2. Batch File Repair

   • Repair all errors in a single file
   • Click "Repair" button at the file level
   • Fixes are applied all at once

3. Context-Aware Repair

   • Uses related files for better accuracy
   • Understands your project structure
   • Maintains consistency across files

4. Full Project Repair

   • Click "Repair All" to fix all files
   • Processes multiple files in parallel
   • Comprehensive project-wide fixes

How to Use

Quick Start

1. Open the Error Repair tab in the main navigation
2. Click Scan to detect errors in your project
3. Review the detected errors grouped by file
4. Choose your repair method:
   • Click wrench icon for single error fix
   • Click "Repair" for file-level fix
   • Click "Repair All" for project-wide fix

Understanding Error Indicators

• 🔴 Error Badge: Red badge shows critical errors that break functionality
• ⚠️ Warning Badge: Yellow badge shows code quality issues
• ℹ️ Info Badge: Blue badge shows suggestions for improvement

Error Panel Features

• Grouped by File: Errors are organized by the file they appear in
• Line Numbers: Jump directly to the problematic code
• Code Snippets: View the problematic code inline
• Expandable Details: Click to see more context
• Quick Navigation: Click "Open" to jump to the file in the editor

Best Practices

1. Regular Scans: Run scans periodically as you code
2. Review AI Fixes: Always review what the AI changed
3. Test After Repair: Verify your code still works as expected
4. Incremental Fixes: Fix errors in small batches for easier verification

Error Types Explained

Syntax Errors

// ❌ Before (missing parentheses)
function calculate { return 5 }

// ✅ After
function calculate() { return 5 }

Import Errors

// ❌ Before (unused import)
import { useState, useEffect, useMemo } from 'react'
// Only useState is used

// ✅ After
import { useState } from 'react'

Type Errors

// ❌ Before (any type)
function process(data: any) { }

// ✅ After
function process(data: string | number) { }

Lint Errors

// ❌ Before (var keyword)
var count = 0

// ✅ After
const count = 0

Tips & Tricks

• Badge Notification: Look for the error count badge on the "Error Repair" tab
• Header Alert: When errors are detected, a button appears in the header
• File Targeting: Use file-level repair when errors are localized
• Context Matters: Complex errors benefit from context-aware repair

Troubleshooting

Q: The scan isn't finding errors I can see A: Some complex errors may require manual review. The scanner focuses on common, fixable issues.

Q: A fix didn't work as expected A: You can undo changes in the editor. Try single-error repair for more control.

Q: AI repair is taking too long A: Large files or complex errors may take time. Consider fixing smaller batches.

Q: Some errors remain after repair A: Some errors may require manual intervention or additional context. Check the "remaining issues" explanation.

Integration with CodeForge

The error repair system works seamlessly with other CodeForge features:

• Code Editor: Jump directly from errors to code
• AI Generate: AI-generated code is also scannable
• Export: Ensure clean code before project export
• All Designers: Errors in any file type are detected

Technical Details

Error Detection Algorithm

1. Lexical Analysis: Tokenize source code
2. Pattern Matching: Identify common error patterns
3. Import Analysis: Track import usage
4. Type Checking: Basic type validation for TypeScript

AI Repair Process

1. Context Gathering: Collect error details and surrounding code
2. Prompt Construction: Build repair prompt with constraints
3. LLM Processing: Send to GPT-4o for intelligent fixes
4. Validation: Parse and validate the response
5. Application: Apply fixes to the codebase

Supported Languages

• TypeScript (.ts, .tsx)
• JavaScript (.js, .jsx)
• CSS/SCSS (basic syntax checking)

Future Enhancements

• Real-time error detection as you type
• Custom error rules
• Integration with ESLint
• TypeScript compiler integration
• Performance metrics
• Error history tracking