gebeya-dala-error-fixer/dist/ErrorBoundary.js

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

'use client';
import { Component } from 'react';
export class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
        this.errorPatterns = new Map();
        this.initializeErrorPatterns();
    }
    initializeErrorPatterns() {
        // React-specific error patterns
        this.errorPatterns.set(/Cannot read propert(y|ies) of undefined/i, {
            title: "Undefined Property in Component",
            description: "A component is trying to access a property on an undefined value.",
            code: "// Add conditional rendering or default values\nreturn (\n  <div>\n    {data ? <p>{data.name}</p> : <p>Loading...</p>}\n  </div>\n);",
            actions: [
                "Add loading states",
                "Use conditional rendering",
                "Provide default props",
                "Check data flow in component"
            ]
        });
        this.errorPatterns.set(/Cannot read propert(y|ies) of null/i, {
            title: "Null Property in Component",
            description: "A component is trying to access a property on a null value.",
            code: "// Add null checks in your component\nreturn (\n  <div>\n    {user && <p>Welcome, {user.name}!</p>}\n  </div>\n);",
            actions: [
                "Add null checks before rendering",
                "Use optional chaining",
                "Provide fallback UI",
                "Check API response handling"
            ]
        });
        this.errorPatterns.set(/Objects are not valid as a React child/i, {
            title: "Invalid React Child",
            description: "You're trying to render an object directly in JSX.",
            code: "// Convert object to string or render specific properties\nreturn (\n  <div>\n    {JSON.stringify(data)} // or\n    <p>{data.message}</p>\n  </div>\n);",
            actions: [
                "Convert object to string",
                "Render specific object properties",
                "Use proper JSX elements",
                "Check data structure"
            ]
        });
        this.errorPatterns.set(/Failed to compile/i, {
            title: "Compilation Error",
            description: "There's a syntax or import error preventing compilation.",
            code: "// Check for:\n// - Missing imports\n// - Syntax errors\n// - Type errors\n// - Missing dependencies",
            actions: [
                "Check import statements",
                "Verify syntax",
                "Fix type errors",
                "Install missing dependencies"
            ]
        });
    }
    static getDerivedStateFromError() {
        return { hasError: true };
    }
    componentDidCatch(error, errorInfo) {
        const errorDetails = {
            message: error.message,
            stack: error.stack,
            componentStack: errorInfo.componentStack || undefined,
            errorBoundary: true,
            timestamp: Date.now()
        };
        const suggestion = this.findSuggestion(error.message);
        this.props.onError(errorDetails, suggestion);
    }
    findSuggestion(errorMessage) {
        for (const [pattern, suggestion] of this.errorPatterns) {
            if (pattern.test(errorMessage)) {
                return suggestion;
            }
        }
        return {
            title: "Component Error",
            description: "An error occurred in a React component.",
            actions: [
                "Check component props",
                "Verify state updates",
                "Check event handlers",
                "Review component lifecycle"
            ]
        };
    }
    render() {
        if (this.state.hasError) {
            // Return null to hide the broken component
            // The error modal will be shown by the parent
            return null;
        }
        return this.props.children;
    }
}