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:

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:

npm install gebeya-dala-error-fixer

Add to your next.config.js:

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:

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:

// 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)

// Just install and import anywhere in your app
import 'gebeya-dala-error-fixer';

// Errors will be automatically detected and shown

With Next.js Plugin

// 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

// 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)

// No setup required - just install
npm install gebeya-dala-error-fixer

Option 2: Next.js Plugin

// next.config.js
const withErrorDetector = require('gebeya-dala-error-fixer/dist/nextjs-plugin');
module.exports = withErrorDetector()(nextConfig);

Option 3: Manual Provider (Legacy)

// _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)

{
  theme: 'dark',
  // Dark theme optimized for development
}

Light Theme

{
  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 for details.

📄 License

MIT License - see the LICENSE file for details.

🆘 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Documentation: Full Documentation

🙏 Acknowledgments

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