gebeya-dala-error-fixer/README.md

Automatic runtime error detection and fix suggestions for Next.js applications with config-based setup

# Gebeya Dala Error Fixer

Automatic runtime error detection and fix suggestions for Next.js applications with Next.js-like error detector functionality. Features automatic error detection, configuration-based setup, and a beautiful "Fix it" button modal.

## ✨ Features

- 🔄 **Automatic Error Detection**: Works like Next.js error detector - no manual setup required
- ⚙️ **Configuration-Based Setup**: Use config files instead of wrapping components
- 🎯 **Smart Error Recognition**: Detects React, Next.js, and JavaScript errors automatically
- 🔧 **Fix It Button**: One-click solutions with code suggestions
- 🎨 **Beautiful UI**: Dark/Light theme support with modern design
- 🚀 **Zero Configuration**: Works out of the box with sensible defaults
- 🔌 **Plugin System**: Easy Next.js integration via webpack plugin
- 📱 **Responsive Design**: Works on all screen sizes

## 🚀 Quick Start

### Method 1: Automatic Setup (Recommended)

Just install the package and it will automatically detect errors in development:

```bash
npm install gebeya-dala-error-fixer
```

That's it! The error detector will automatically initialize and show a floating button when errors occur.

### Method 2: Next.js Plugin (Advanced)

For more control, use the Next.js plugin:

```bash
npm install gebeya-dala-error-fixer
```

Add to your `next.config.js`:

```javascript
const withErrorDetector = require('gebeya-dala-error-fixer/dist/nextjs-plugin');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = withErrorDetector()(nextConfig);
```

### Method 3: Manual Initialization

For custom setups:

```javascript
import { initializeErrorDetector } from 'gebeya-dala-error-fixer';

initializeErrorDetector({
  enabled: true,
  autoShow: true,
  position: 'top-right',
  theme: 'dark'
});
```

## ⚙️ Configuration

Create an `error-detector.config.js` file in your project root:

```javascript
// error-detector.config.js
module.exports = {
  // Enable/disable error detection
  enabled: true,
  
  // Automatically show error modal when errors occur
  autoShow: true,
  
  // Position of the floating error button
  position: 'top-right', // 'top-right', 'top-left', 'bottom-right', 'bottom-left'
  
  // Environment where error detection should be active
  environment: 'development', // 'development', 'production', 'all'
  
  // UI theme
  theme: 'dark', // 'dark', 'light'
  
  // Fix It button configuration
  fixItButton: {
    enabled: true,
    customAction: (error, suggestion) => {
      // Custom logic when "Fix It" is clicked
      console.log('Fixing error:', error);
      
      if (suggestion.code) {
        navigator.clipboard.writeText(suggestion.code);
        alert('Code copied to clipboard!');
      }
    }
  },
  
  // Custom error patterns
  customPatterns: [
    {
      pattern: 'Custom error pattern',
      title: 'Custom Error',
      description: 'Description of the custom error',
      code: '// Example fix code',
      actions: ['First action', 'Second action']
    }
  ],
  
  // Patterns to exclude from error detection
  excludePatterns: [
    'Warning: ReactDOM.render is no longer supported'
  ]
};
```

## 🎯 Supported Error Types

The error detector automatically recognizes and provides fixes for:

- **Undefined Property Access**: `Cannot read property of undefined`
- **Null Property Access**: `Cannot read property of null`
- **Hydration Mismatches**: Server/client rendering differences
- **Invalid Hook Usage**: React hooks called incorrectly
- **Infinite Re-renders**: Maximum update depth exceeded
- **Module Import Errors**: Missing modules or incorrect paths
- **Syntax Errors**: JavaScript/TypeScript syntax issues
- **Invalid React Children**: Objects rendered as JSX
- **Network Request Errors**: Failed fetch requests
- **Compilation Errors**: Build and type errors

## 🔧 Fix It Button

The "Fix It" button provides intelligent solutions:

1. **Automatic Code Copying**: Copies fix code to clipboard
2. **Step-by-Step Actions**: Lists specific actions to take
3. **Custom Actions**: Execute custom logic via configuration
4. **Smart Suggestions**: Context-aware solutions

## 🎨 UI Components

### Floating Button
- Shows error count with badge
- Positioned based on configuration
- Responsive design
- Hover effects

### Error Modal
- Beautiful dark/light theme
- Syntax highlighted code
- Expandable stack traces
- Copy-to-clipboard functionality
- Responsive layout

## 📝 Usage Examples

### Basic Usage (Zero Config)
```javascript
// Just install and import anywhere in your app
import 'gebeya-dala-error-fixer';

// Errors will be automatically detected and shown
```

### With Next.js Plugin
```javascript
// next.config.js
const withErrorDetector = require('gebeya-dala-error-fixer/dist/nextjs-plugin');

module.exports = withErrorDetector({
  position: 'bottom-right',
  theme: 'light',
  fixItButton: {
    enabled: true,
    customAction: (error, suggestion) => {
      // Send error to analytics
      analytics.track('error_fixed', { error: error.message });
      
      // Copy code to clipboard
      if (suggestion.code) {
        navigator.clipboard.writeText(suggestion.code);
        showToast('Code copied to clipboard!');
      }
    }
  }
})({
  reactStrictMode: true,
});
```

### Advanced Configuration
```javascript
// error-detector.config.js
module.exports = {
  enabled: process.env.NODE_ENV === 'development',
  autoShow: false, // Only show on button click
  position: 'bottom-left',
  theme: 'light',
  customPatterns: [
    {
      pattern: 'CUSTOM_ERROR_CODE',
      title: 'Custom Business Logic Error',
      description: 'This is a custom error specific to your application',
      code: `// Fix this by updating your business logic
if (user.isActive) {
  // Handle active user
} else {
  // Handle inactive user
}`,
      actions: [
        'Check user status',
        'Update business logic',
        'Add error handling'
      ]
    }
  ],
  excludePatterns: [
    'Third-party library warning',
    'Development-only message'
  ],
  fixItButton: {
    enabled: true,
    customAction: async (error, suggestion) => {
      // Advanced custom action
      try {
        // Send to error tracking service
        await errorTracker.report(error);
        
        // Auto-fix if possible
        if (suggestion.autoFix) {
          await applyAutoFix(suggestion);
        } else {
          // Copy to clipboard as fallback
          await navigator.clipboard.writeText(suggestion.code);
          showNotification('Fix code copied to clipboard!');
        }
      } catch (e) {
        console.error('Error in fix action:', e);
      }
    }
  }
};
```

## 🔌 Integration Options

### Option 1: Automatic (Recommended)
```javascript
// No setup required - just install
npm install gebeya-dala-error-fixer
```

### Option 2: Next.js Plugin
```javascript
// next.config.js
const withErrorDetector = require('gebeya-dala-error-fixer/dist/nextjs-plugin');
module.exports = withErrorDetector()(nextConfig);
```

### Option 3: Manual Provider (Legacy)
```javascript
// _app.tsx
import { ErrorFixerProvider } from 'gebeya-dala-error-fixer';

export default function App({ Component, pageProps }) {
  return (
    <ErrorFixerProvider>
      <Component {...pageProps} />
    </ErrorFixerProvider>
  );
}
```

## 📱 Responsive Design

The error detector works seamlessly across all devices:
- **Desktop**: Full-featured modal with code highlighting
- **Tablet**: Optimized layout with touch-friendly buttons
- **Mobile**: Responsive design with scrollable content

## 🎭 Theming

### Dark Theme (Default)
```javascript
{
  theme: 'dark',
  // Dark theme optimized for development
}
```

### Light Theme
```javascript
{
  theme: 'light',
  // Light theme for production or preference
}
```

## 🔍 Development vs Production

### Development Mode
- Enabled by default
- All error types detected
- Full debugging information
- Stack traces shown

### Production Mode
- Disabled by default
- Limited error detection
- User-friendly messages
- No sensitive information

## 🚀 Performance

- **Zero Bundle Impact**: Only loads in specified environments
- **Lazy Loading**: Components loaded on-demand
- **Efficient Detection**: Minimal performance overhead
- **Memory Safe**: Proper cleanup and garbage collection

## 🛡️ Security

- **No Sensitive Data**: Filters out sensitive information
- **Environment Aware**: Automatically adjusts based on environment
- **Safe Execution**: Sandboxed error handling
- **GDPR Compliant**: No personal data collection

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

## 📄 License

MIT License - see the [LICENSE](LICENSE) file for details.

## 🆘 Support

- 📧 Email: support@gebeya-dala.com
- 🐛 Issues: [GitHub Issues](https://github.com/gebeya-dala/error-fixer/issues)
- 📖 Documentation: [Full Documentation](https://gebeya-dala.com/docs/error-fixer)

## 🙏 Acknowledgments

Inspired by Next.js error overlay and modern development tools.