@tachui/cli 0.8.12 → 0.8.14

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

@@ -1,717 +0,0 @@
-/**
- * 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