@tachui/cli 0.8.11 → 0.8.12

package/dist/devtools/src/runtime/error-boundary.js

@@ -0,0 +1,717 @@
+/**
+ * Error Boundary and Error Handling System (Phase 3.2.3)
+ *
+ * Comprehensive error handling system for TachUI applications.
+ * Provides error boundaries, recovery mechanisms, and error reporting.
+ */
+import { createEffect, createSignal } from '@tachui/core';
+// import { globalDevTools } from './dev-tools'
+import { globalPerformanceMonitor } from './performance';
+/**
+ * Error boundary component implementation
+ */
+export class ErrorBoundary {
+    state = {
+        hasError: false,
+        error: null,
+        errorInfo: {
+            retryAttempts: 0,
+        },
+    };
+    props;
+    children;
+    errorManager;
+    // Reactive state
+    stateSignal;
+    setState;
+    constructor(props, children, errorManager) {
+        this.props = props;
+        this.children = children;
+        this.errorManager = errorManager;
+        // Initialize reactive state
+        const [stateSignal, setState] = createSignal(this.state);
+        this.stateSignal = stateSignal;
+        this.setState = setState;
+        // Reset error boundary when specific props change
+        if (props.resetOnPropsChange || props.resetKeys) {
+            this.setupPropsWatcher();
+        }
+    }
+    /**
+     * Catch and handle errors in child components
+     */
+    componentDidCatch(error, errorInfo) {
+        const tachUIError = this.errorManager.createTachUIError(error, {
+            category: 'component_error',
+            severity: 'high',
+            componentId: this.props.id,
+            componentName: 'ErrorBoundary',
+            phase: 'render',
+            context: errorInfo,
+        });
+        this.handleError(tachUIError, errorInfo);
+    }
+    /**
+     * Handle error and determine recovery strategy
+     */
+    handleError(error, errorInfo) {
+        const newState = {
+            hasError: true,
+            error,
+            errorInfo: {
+                componentStack: errorInfo?.componentStack,
+                errorBoundary: this.props.id || 'ErrorBoundary',
+                retryAttempts: this.state.errorInfo.retryAttempts,
+            },
+        };
+        this.state = newState;
+        this.setState(newState);
+        // Report error
+        if (this.props.onError) {
+            this.props.onError(error, newState.errorInfo);
+        }
+        // Register with error manager
+        this.errorManager.reportError(error);
+        // Attempt recovery
+        this.attemptRecovery(error);
+        // Add to dev tools if enabled
+        if (process.env.NODE_ENV !== 'production') {
+            const errorObj = new Error(error.message);
+            errorObj.stack = error.stack;
+            console.error('TachUI Error:', error.componentId || 'unknown', errorObj);
+        }
+    }
+    /**
+     * Attempt error recovery based on configured strategies
+     */
+    attemptRecovery(error) {
+        if (!this.props.recovery)
+            return;
+        for (const config of this.props.recovery) {
+            if (config.condition && !config.condition(error))
+                continue;
+            switch (config.strategy) {
+                case 'retry':
+                    this.retryWithConfig(config);
+                    break;
+                case 'fallback':
+                    // Fallback is handled in render method
+                    break;
+                case 'reload':
+                    this.reloadComponent();
+                    break;
+                case 'ignore':
+                    this.resetErrorBoundary();
+                    break;
+                case 'escalate':
+                    if (!this.props.isolate) {
+                        throw error.cause || new Error(error.message);
+                    }
+                    break;
+            }
+            if (config.onRecovery) {
+                config.onRecovery(error);
+            }
+            break; // Use first matching strategy
+        }
+    }
+    /**
+     * Retry failed operation with configuration
+     */
+    retryWithConfig(config) {
+        const maxRetries = config.maxRetries || 3;
+        const retryDelay = config.retryDelay || 1000;
+        if (this.state.errorInfo.retryAttempts >= maxRetries) {
+            console.warn(`Max retry attempts (${maxRetries}) reached for error boundary`);
+            return;
+        }
+        setTimeout(() => {
+            this.retry();
+        }, retryDelay);
+    }
+    /**
+     * Retry the failed operation
+     */
+    retry() {
+        this.state.errorInfo.retryAttempts++;
+        this.resetErrorBoundary();
+    }
+    /**
+     * Reset error boundary to normal state
+     */
+    resetErrorBoundary() {
+        this.state = {
+            hasError: false,
+            error: null,
+            errorInfo: {
+                retryAttempts: this.state.errorInfo.retryAttempts,
+            },
+        };
+        this.setState(this.state);
+    }
+    /**
+     * Reload the component
+     */
+    reloadComponent() {
+        this.resetErrorBoundary();
+        // Force re-render of children
+        // This would need integration with the component system
+    }
+    /**
+     * Setup props watcher for error boundary reset
+     */
+    setupPropsWatcher() {
+        if (this.props.resetKeys) {
+            // Watch specific prop keys
+            createEffect(() => {
+                const currentProps = this.props;
+                if (this.state.hasError && this.shouldResetOnProps(currentProps)) {
+                    this.resetErrorBoundary();
+                }
+            });
+        }
+    }
+    /**
+     * Check if error boundary should reset based on props
+     */
+    shouldResetOnProps(props) {
+        if (!this.props.resetKeys)
+            return false;
+        // This is simplified - in real implementation would track previous props
+        return this.props.resetKeys.some(key => key in props && props[key] !== undefined);
+    }
+    /**
+     * Render error boundary content
+     */
+    render() {
+        if (this.state.hasError && this.state.error) {
+            // Render fallback UI
+            if (this.props.fallback) {
+                if (typeof this.props.fallback === 'function') {
+                    const fallbackInstance = this.props.fallback(this.state.error, () => this.retry());
+                    const result = fallbackInstance.render
+                        ? fallbackInstance.render()
+                        : [];
+                    return Array.isArray(result) ? result : [result];
+                }
+                else {
+                    const result = this.props.fallback.render
+                        ? this.props.fallback.render()
+                        : [];
+                    return Array.isArray(result) ? result : [result];
+                }
+            }
+            // Default error UI
+            return this.renderDefaultErrorUI();
+        }
+        // Render children normally
+        try {
+            return this.children.flatMap(child => {
+                const result = child.render();
+                return Array.isArray(result) ? result : [result];
+            });
+        }
+        catch (error) {
+            this.componentDidCatch(error, {
+                componentStack: 'children rendering',
+            });
+            return this.renderDefaultErrorUI();
+        }
+    }
+    /**
+     * Render default error UI
+     */
+    renderDefaultErrorUI() {
+        const error = this.state.error;
+        return [
+            {
+                type: 'element',
+                tag: 'div',
+                props: {
+                    className: 'tachui-error-boundary',
+                    style: {
+                        padding: '20px',
+                        border: '2px solid #ff6b6b',
+                        borderRadius: '8px',
+                        backgroundColor: '#fff5f5',
+                        color: '#c92a2a',
+                        fontFamily: 'monospace',
+                    },
+                },
+                children: [
+                    {
+                        type: 'element',
+                        tag: 'h3',
+                        props: { style: { margin: '0 0 10px 0' } },
+                        children: [
+                            {
+                                type: 'text',
+                                text: '🚨 Something went wrong',
+                            },
+                        ],
+                    },
+                    {
+                        type: 'element',
+                        tag: 'p',
+                        props: { style: { margin: '0 0 15px 0' } },
+                        children: [
+                            {
+                                type: 'text',
+                                text: error.message,
+                            },
+                        ],
+                    },
+                    {
+                        type: 'element',
+                        tag: 'button',
+                        props: {
+                            onClick: () => this.retry(),
+                            style: {
+                                padding: '8px 16px',
+                                backgroundColor: '#4c6ef5',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                            },
+                        },
+                        children: [
+                            {
+                                type: 'text',
+                                text: `Retry (${this.state.errorInfo.retryAttempts} attempts)`,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ];
+    }
+    /**
+     * Get current error boundary state
+     */
+    getState() {
+        return this.state;
+    }
+    /**
+     * Get reactive state signal
+     */
+    getStateSignal() {
+        return this.stateSignal;
+    }
+}
+/**
+ * Global error manager
+ */
+export class ErrorManager {
+    static instance;
+    config = {
+        enabled: true,
+        captureConsoleErrors: true,
+        captureUnhandledPromises: true,
+        captureReactiveErrors: true,
+        captureComponentErrors: true,
+        maxErrorsPerSession: 100,
+        maxErrorAge: 30 * 60 * 1000, // 30 minutes
+        reportingThrottle: 1000, // 1 second
+        enableStackTrace: true,
+        enableSourceMap: false,
+        development: false,
+    };
+    errors = [];
+    reporters = [];
+    handlers = [];
+    throttleMap = new Map();
+    // Reactive state
+    errorsSignal;
+    setErrors;
+    constructor() {
+        // Initialize reactive state
+        const [errorsSignal, setErrors] = createSignal([]);
+        this.errorsSignal = errorsSignal;
+        this.setErrors = setErrors;
+        this.setupGlobalErrorHandlers();
+    }
+    static getInstance() {
+        if (!ErrorManager.instance) {
+            ErrorManager.instance = new ErrorManager();
+        }
+        return ErrorManager.instance;
+    }
+    /**
+     * Configure error handling
+     */
+    configure(config) {
+        this.config = { ...this.config, ...config };
+        if (config.development !== undefined) {
+            // globalDevTools.configure({ enableErrors: config.development })
+        }
+    }
+    /**
+     * Setup global error handlers
+     */
+    setupGlobalErrorHandlers() {
+        if (typeof window === 'undefined')
+            return;
+        // Capture unhandled errors
+        window.addEventListener('error', event => {
+            if (!this.config.captureConsoleErrors)
+                return;
+            const error = this.createTachUIError(event.error || new Error(event.message), {
+                category: 'unknown_error',
+                severity: 'medium',
+                context: {
+                    filename: event.filename,
+                    lineno: event.lineno,
+                    colno: event.colno,
+                },
+            });
+            this.reportError(error);
+        });
+        // Capture unhandled promise rejections
+        window.addEventListener('unhandledrejection', event => {
+            if (!this.config.captureUnhandledPromises)
+                return;
+            const error = this.createTachUIError(event.reason instanceof Error
+                ? event.reason
+                : new Error(String(event.reason)), {
+                category: 'network_error',
+                severity: 'medium',
+                context: { type: 'unhandled_promise_rejection' },
+            });
+            this.reportError(error);
+        });
+    }
+    /**
+     * Create standardized TachUI error
+     */
+    createTachUIError(error, options = {}) {
+        return {
+            id: `error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+            message: error.message,
+            stack: this.config.enableStackTrace ? error.stack : undefined,
+            cause: error,
+            timestamp: Date.now(),
+            category: options.category || 'unknown_error',
+            severity: options.severity || 'medium',
+            componentId: options.componentId,
+            componentName: options.componentName,
+            phase: options.phase,
+            context: options.context,
+            userAgent: typeof window !== 'undefined' ? window.navigator.userAgent : undefined,
+            url: typeof window !== 'undefined' ? window.location.href : undefined,
+            retryCount: 0,
+            recovered: false,
+        };
+    }
+    /**
+     * Report error to all registered reporters
+     */
+    reportError(error) {
+        if (!this.config.enabled)
+            return;
+        // Throttle reporting to prevent spam
+        const throttleKey = `${error.category}_${error.message}`;
+        const lastReport = this.throttleMap.get(throttleKey) || 0;
+        const now = Date.now();
+        if (now - lastReport < this.config.reportingThrottle) {
+            return;
+        }
+        this.throttleMap.set(throttleKey, now);
+        // Add to errors array
+        this.errors.push(error);
+        // Limit errors array size
+        if (this.errors.length > this.config.maxErrorsPerSession) {
+            this.errors.shift();
+        }
+        // Clean old errors
+        this.cleanOldErrors();
+        // Update reactive signal
+        this.setErrors([...this.errors]);
+        // Track with performance monitor
+        if (globalPerformanceMonitor.isEnabled()) {
+            globalPerformanceMonitor.recordMetric({
+                name: 'error_reported',
+                value: 1,
+                unit: 'count',
+                timestamp: error.timestamp,
+                category: 'component',
+                componentId: error.componentId,
+            });
+        }
+        // Call reporters
+        this.reporters.forEach(reporter => {
+            try {
+                reporter.report(error);
+            }
+            catch (reporterError) {
+                console.error('Error reporter failed:', reporterError);
+            }
+        });
+        // Call handlers
+        this.handlers.forEach(handler => {
+            try {
+                handler(error);
+            }
+            catch (handlerError) {
+                console.error('Error handler failed:', handlerError);
+            }
+        });
+        // Log to console in development
+        if (this.config.development) {
+            console.group(`🚨 TachUI Error [${error.category}]`);
+            console.error(error.message);
+            if (error.stack)
+                console.error(error.stack);
+            if (error.context)
+                console.log('Context:', error.context);
+            console.groupEnd();
+        }
+    }
+    /**
+     * Clean old errors based on max age
+     */
+    cleanOldErrors() {
+        const cutoff = Date.now() - this.config.maxErrorAge;
+        this.errors = this.errors.filter(error => error.timestamp > cutoff);
+    }
+    /**
+     * Add error reporter
+     */
+    addReporter(reporter) {
+        this.reporters.push(reporter);
+        return () => {
+            const index = this.reporters.indexOf(reporter);
+            if (index !== -1) {
+                this.reporters.splice(index, 1);
+            }
+        };
+    }
+    /**
+     * Add error handler
+     */
+    addHandler(handler) {
+        this.handlers.push(handler);
+        return () => {
+            const index = this.handlers.indexOf(handler);
+            if (index !== -1) {
+                this.handlers.splice(index, 1);
+            }
+        };
+    }
+    /**
+     * Get all errors
+     */
+    getErrors() {
+        return [...this.errors];
+    }
+    /**
+     * Get errors signal
+     */
+    getErrorsSignal() {
+        return this.errorsSignal;
+    }
+    /**
+     * Get errors by category
+     */
+    getErrorsByCategory(category) {
+        return this.errors.filter(error => error.category === category);
+    }
+    /**
+     * Get errors by severity
+     */
+    getErrorsBySeverity(severity) {
+        return this.errors.filter(error => error.severity === severity);
+    }
+    /**
+     * Get errors by component
+     */
+    getErrorsByComponent(componentId) {
+        return this.errors.filter(error => error.componentId === componentId);
+    }
+    /**
+     * Mark error as recovered
+     */
+    markErrorRecovered(errorId) {
+        const error = this.errors.find(e => e.id === errorId);
+        if (error) {
+            error.recovered = true;
+            this.setErrors([...this.errors]);
+        }
+    }
+    /**
+     * Clear all errors
+     */
+    clear() {
+        this.errors.length = 0;
+        this.throttleMap.clear();
+        this.setErrors([]);
+    }
+    /**
+     * Get error statistics
+     */
+    getStatistics() {
+        const errorsByCategory = {};
+        const errorsBySeverity = {};
+        for (const error of this.errors) {
+            errorsByCategory[error.category] =
+                (errorsByCategory[error.category] || 0) + 1;
+            errorsBySeverity[error.severity] =
+                (errorsBySeverity[error.severity] || 0) + 1;
+        }
+        const recoveredErrors = this.errors.filter(e => e.recovered).length;
+        const recentErrors = this.errors.filter(e => Date.now() - e.timestamp < 5 * 60 * 1000 // Last 5 minutes
+        ).length;
+        return {
+            totalErrors: this.errors.length,
+            errorsByCategory,
+            errorsBySeverity,
+            recoveredErrors,
+            recentErrors,
+        };
+    }
+}
+/**
+ * Global error manager instance
+ */
+export const globalErrorManager = ErrorManager.getInstance();
+/**
+ * Create error boundary component
+ */
+export function createErrorBoundary(props, children) {
+    return new ErrorBoundary(props, children, globalErrorManager);
+}
+/**
+ * Built-in error reporters
+ */
+export const errorReporters = {
+    /**
+     * Console reporter
+     */
+    console: {
+        report(error) {
+            console.error(`[${error.category}] ${error.message}`, error);
+        },
+    },
+    /**
+     * Local storage reporter
+     */
+    localStorage: {
+        report(error) {
+            try {
+                const stored = JSON.parse(localStorage.getItem('tachui_errors') || '[]');
+                stored.push(error);
+                // Keep only last 50 errors
+                if (stored.length > 50) {
+                    stored.splice(0, stored.length - 50);
+                }
+                localStorage.setItem('tachui_errors', JSON.stringify(stored));
+            }
+            catch (e) {
+                console.error('Failed to store error in localStorage:', e);
+            }
+        },
+    },
+    /**
+     * Remote API reporter
+     */
+    createRemoteReporter(endpoint, apiKey) {
+        return {
+            async report(error) {
+                try {
+                    const headers = {
+                        'Content-Type': 'application/json',
+                    };
+                    if (apiKey) {
+                        headers.Authorization = `Bearer ${apiKey}`;
+                    }
+                    await fetch(endpoint, {
+                        method: 'POST',
+                        headers,
+                        body: JSON.stringify(error),
+                    });
+                }
+                catch (e) {
+                    console.error('Failed to report error to remote endpoint:', e);
+                }
+            },
+        };
+    },
+};
+/**
+ * Error handling utilities
+ */
+export const errorUtils = {
+    /**
+     * Wrap function with error handling
+     */
+    withErrorHandling(fn, options = {}) {
+        return ((...args) => {
+            try {
+                return fn(...args);
+            }
+            catch (error) {
+                const tachUIError = globalErrorManager.createTachUIError(error, {
+                    category: options.category || 'unknown_error',
+                });
+                globalErrorManager.reportError(tachUIError);
+                if (options.onError) {
+                    options.onError(tachUIError);
+                }
+                if (options.fallback !== undefined) {
+                    return options.fallback;
+                }
+                throw error;
+            }
+        });
+    },
+    /**
+     * Wrap async function with error handling
+     */
+    withAsyncErrorHandling(fn, options = {}) {
+        return (async (...args) => {
+            try {
+                return await fn(...args);
+            }
+            catch (error) {
+                const tachUIError = globalErrorManager.createTachUIError(error, {
+                    category: options.category || 'network_error',
+                });
+                globalErrorManager.reportError(tachUIError);
+                if (options.onError) {
+                    options.onError(tachUIError);
+                }
+                if (options.fallback !== undefined) {
+                    return options.fallback;
+                }
+                throw error;
+            }
+        });
+    },
+    /**
+     * Create error boundary with common configurations
+     */
+    createSimpleErrorBoundary(fallbackMessage = 'Something went wrong') {
+        return (children) => createErrorBoundary({
+            fallback: (_error, _retry) => ({
+                type: 'component',
+                id: 'error-fallback',
+                props: {},
+                render: () => [
+                    {
+                        type: 'element',
+                        tag: 'div',
+                        props: { className: 'simple-error-boundary' },
+                        children: [
+                            {
+                                type: 'text',
+                                text: fallbackMessage,
+                            },
+                        ],
+                    },
+                ],
+            }),
+            recovery: [{ strategy: 'retry', maxRetries: 3, retryDelay: 1000 }],
+        }, children);
+    },
+};
+//# sourceMappingURL=error-boundary.js.map