@tachui/core 0.7.0-alpha1

package/src/runtime/error-boundary.ts

@@ -0,0 +1,955 @@
+/**
+ * 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 '../reactive'
+import { globalDevTools } from './dev-tools'
+import { globalPerformanceMonitor } from './performance'
+import type { ComponentInstance, ComponentProps, DOMNode } from './types'
+
+/**
+ * Error severity levels
+ */
+export type ErrorSeverity = 'low' | 'medium' | 'high' | 'critical'
+
+/**
+ * Error categories for classification
+ */
+export type ErrorCategory =
+  | 'component_error' // Component rendering/lifecycle errors
+  | 'reactive_error' // Signal/computed/effect errors
+  | 'render_error' // DOM rendering errors
+  | 'lifecycle_error' // Component lifecycle errors
+  | 'network_error' // Network/async operation errors
+  | 'validation_error' // Props/data validation errors
+  | 'unknown_error' // Uncategorized errors
+
+/**
+ * Comprehensive error information
+ */
+export interface TachUIError {
+  id: string
+  message: string
+  stack?: string
+  cause?: Error
+  timestamp: number
+  category: ErrorCategory
+  severity: ErrorSeverity
+  componentId?: string
+  componentName?: string
+  phase?: string
+  context?: Record<string, any>
+  userAgent?: string
+  url?: string
+  retryCount: number
+  recovered: boolean
+}
+
+/**
+ * Error boundary state
+ */
+export interface ErrorBoundaryState {
+  hasError: boolean
+  error: TachUIError | null
+  errorInfo: {
+    componentStack?: string
+    errorBoundary?: string
+    retryAttempts: number
+  }
+}
+
+/**
+ * Error recovery strategies
+ */
+export type ErrorRecoveryStrategy =
+  | 'retry' // Retry the failed operation
+  | 'fallback' // Show fallback content
+  | 'reload' // Reload the component
+  | 'redirect' // Navigate away
+  | 'ignore' // Ignore the error
+  | 'escalate' // Pass error to parent boundary
+
+/**
+ * Error recovery configuration
+ */
+export interface ErrorRecoveryConfig {
+  strategy: ErrorRecoveryStrategy
+  maxRetries?: number
+  retryDelay?: number
+  fallbackComponent?: ComponentInstance
+  onRecovery?: (error: TachUIError) => void
+  condition?: (error: TachUIError) => boolean
+}
+
+/**
+ * Error boundary props
+ */
+export interface ErrorBoundaryProps extends ComponentProps {
+  fallback?: ComponentInstance | ((error: TachUIError, retry: () => void) => ComponentInstance)
+  onError?: (error: TachUIError, errorInfo: ErrorBoundaryState['errorInfo']) => void
+  recovery?: ErrorRecoveryConfig[]
+  isolate?: boolean // Prevent error propagation to parent boundaries
+  resetOnPropsChange?: boolean
+  resetKeys?: string[] // Props that trigger error boundary reset
+}
+
+/**
+ * Error reporter interface
+ */
+export interface ErrorReporter {
+  report(error: TachUIError): void | Promise<void>
+}
+
+/**
+ * Error handler function type
+ */
+export type ErrorHandler = (error: TachUIError) => void | Promise<void>
+
+/**
+ * Global error handling configuration
+ */
+export interface ErrorHandlingConfig {
+  enabled: boolean
+  captureConsoleErrors: boolean
+  captureUnhandledPromises: boolean
+  captureReactiveErrors: boolean
+  captureComponentErrors: boolean
+  maxErrorsPerSession: number
+  maxErrorAge: number // milliseconds
+  reportingThrottle: number // milliseconds
+  enableStackTrace: boolean
+  enableSourceMap: boolean
+  development: boolean
+}
+
+/**
+ * Error boundary component implementation
+ */
+export class ErrorBoundary {
+  private state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+    errorInfo: {
+      retryAttempts: 0,
+    },
+  }
+
+  private props: ErrorBoundaryProps
+  private children: ComponentInstance[]
+  private errorManager: ErrorManager
+
+  // Reactive state
+  private stateSignal: () => ErrorBoundaryState
+  private setState: (value: ErrorBoundaryState) => void
+
+  constructor(
+    props: ErrorBoundaryProps,
+    children: ComponentInstance[],
+    errorManager: ErrorManager
+  ) {
+    this.props = props
+    this.children = children
+    this.errorManager = errorManager
+
+    // Initialize reactive state
+    const [stateSignal, setState] = createSignal<ErrorBoundaryState>(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: Error, errorInfo: any): void {
+    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
+   */
+  private handleError(error: TachUIError, errorInfo: any): void {
+    const newState: ErrorBoundaryState = {
+      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 (globalDevTools.isEnabled()) {
+      const errorObj = new Error(error.message)
+      errorObj.stack = error.stack
+      globalDevTools.addError(error.componentId || 'unknown', errorObj)
+    }
+  }
+
+  /**
+   * Attempt error recovery based on configured strategies
+   */
+  private attemptRecovery(error: TachUIError): void {
+    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
+   */
+  private retryWithConfig(config: ErrorRecoveryConfig): void {
+    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(): void {
+    this.state.errorInfo.retryAttempts++
+    this.resetErrorBoundary()
+  }
+
+  /**
+   * Reset error boundary to normal state
+   */
+  resetErrorBoundary(): void {
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: {
+        retryAttempts: this.state.errorInfo.retryAttempts,
+      },
+    }
+    this.setState(this.state)
+  }
+
+  /**
+   * Reload the component
+   */
+  private reloadComponent(): void {
+    this.resetErrorBoundary()
+    // Force re-render of children
+    // This would need integration with the component system
+  }
+
+  /**
+   * Setup props watcher for error boundary reset
+   */
+  private setupPropsWatcher(): void {
+    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
+   */
+  private shouldResetOnProps(props: ErrorBoundaryProps): boolean {
+    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 as keyof ErrorBoundaryProps] !== undefined
+    )
+  }
+
+  /**
+   * Render error boundary content
+   */
+  render(): DOMNode[] {
+    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 as Error, { componentStack: 'children rendering' })
+      return this.renderDefaultErrorUI()
+    }
+  }
+
+  /**
+   * Render default error UI
+   */
+  private renderDefaultErrorUI(): DOMNode[] {
+    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(): ErrorBoundaryState {
+    return this.state
+  }
+
+  /**
+   * Get reactive state signal
+   */
+  getStateSignal(): () => ErrorBoundaryState {
+    return this.stateSignal
+  }
+}
+
+/**
+ * Global error manager
+ */
+export class ErrorManager {
+  private static instance: ErrorManager
+
+  private config: ErrorHandlingConfig = {
+    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,
+  }
+
+  private errors: TachUIError[] = []
+  private reporters: ErrorReporter[] = []
+  private handlers: ErrorHandler[] = []
+  private throttleMap = new Map<string, number>()
+
+  // Reactive state
+  private errorsSignal: () => TachUIError[]
+  private setErrors: (value: TachUIError[]) => void
+
+  constructor() {
+    // Initialize reactive state
+    const [errorsSignal, setErrors] = createSignal<TachUIError[]>([])
+    this.errorsSignal = errorsSignal
+    this.setErrors = setErrors
+
+    this.setupGlobalErrorHandlers()
+  }
+
+  static getInstance(): ErrorManager {
+    if (!ErrorManager.instance) {
+      ErrorManager.instance = new ErrorManager()
+    }
+    return ErrorManager.instance
+  }
+
+  /**
+   * Configure error handling
+   */
+  configure(config: Partial<ErrorHandlingConfig>): void {
+    this.config = { ...this.config, ...config }
+
+    if (config.development !== undefined) {
+      globalDevTools.configure({ enableErrors: config.development })
+    }
+  }
+
+  /**
+   * Setup global error handlers
+   */
+  private setupGlobalErrorHandlers(): void {
+    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: Error,
+    options: {
+      category?: ErrorCategory
+      severity?: ErrorSeverity
+      componentId?: string
+      componentName?: string
+      phase?: string
+      context?: Record<string, any>
+    } = {}
+  ): TachUIError {
+    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: TachUIError): void {
+    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
+   */
+  private cleanOldErrors(): void {
+    const cutoff = Date.now() - this.config.maxErrorAge
+    this.errors = this.errors.filter((error) => error.timestamp > cutoff)
+  }
+
+  /**
+   * Add error reporter
+   */
+  addReporter(reporter: ErrorReporter): () => void {
+    this.reporters.push(reporter)
+
+    return () => {
+      const index = this.reporters.indexOf(reporter)
+      if (index !== -1) {
+        this.reporters.splice(index, 1)
+      }
+    }
+  }
+
+  /**
+   * Add error handler
+   */
+  addHandler(handler: ErrorHandler): () => void {
+    this.handlers.push(handler)
+
+    return () => {
+      const index = this.handlers.indexOf(handler)
+      if (index !== -1) {
+        this.handlers.splice(index, 1)
+      }
+    }
+  }
+
+  /**
+   * Get all errors
+   */
+  getErrors(): TachUIError[] {
+    return [...this.errors]
+  }
+
+  /**
+   * Get errors signal
+   */
+  getErrorsSignal(): () => TachUIError[] {
+    return this.errorsSignal
+  }
+
+  /**
+   * Get errors by category
+   */
+  getErrorsByCategory(category: ErrorCategory): TachUIError[] {
+    return this.errors.filter((error) => error.category === category)
+  }
+
+  /**
+   * Get errors by severity
+   */
+  getErrorsBySeverity(severity: ErrorSeverity): TachUIError[] {
+    return this.errors.filter((error) => error.severity === severity)
+  }
+
+  /**
+   * Get errors by component
+   */
+  getErrorsByComponent(componentId: string): TachUIError[] {
+    return this.errors.filter((error) => error.componentId === componentId)
+  }
+
+  /**
+   * Mark error as recovered
+   */
+  markErrorRecovered(errorId: string): void {
+    const error = this.errors.find((e) => e.id === errorId)
+    if (error) {
+      error.recovered = true
+      this.setErrors([...this.errors])
+    }
+  }
+
+  /**
+   * Clear all errors
+   */
+  clear(): void {
+    this.errors.length = 0
+    this.throttleMap.clear()
+    this.setErrors([])
+  }
+
+  /**
+   * Get error statistics
+   */
+  getStatistics(): {
+    totalErrors: number
+    errorsByCategory: Record<ErrorCategory, number>
+    errorsBySeverity: Record<ErrorSeverity, number>
+    recoveredErrors: number
+    recentErrors: number
+  } {
+    const errorsByCategory = {} as Record<ErrorCategory, number>
+    const errorsBySeverity = {} as Record<ErrorSeverity, number>
+
+    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: ErrorBoundaryProps,
+  children: ComponentInstance[]
+): ErrorBoundary {
+  return new ErrorBoundary(props, children, globalErrorManager)
+}
+
+/**
+ * Built-in error reporters
+ */
+export const errorReporters = {
+  /**
+   * Console reporter
+   */
+  console: {
+    report(error: TachUIError): void {
+      console.error(`[${error.category}] ${error.message}`, error)
+    },
+  } as ErrorReporter,
+
+  /**
+   * Local storage reporter
+   */
+  localStorage: {
+    report(error: TachUIError): void {
+      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)
+      }
+    },
+  } as ErrorReporter,
+
+  /**
+   * Remote API reporter
+   */
+  createRemoteReporter(endpoint: string, apiKey?: string): ErrorReporter {
+    return {
+      async report(error: TachUIError): Promise<void> {
+        try {
+          const headers: HeadersInit = {
+            '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<T extends (...args: any[]) => any>(
+    fn: T,
+    options: {
+      category?: ErrorCategory
+      onError?: (error: TachUIError) => void
+      fallback?: ReturnType<T>
+    } = {}
+  ): T {
+    return ((...args: Parameters<T>): ReturnType<T> => {
+      try {
+        return fn(...args)
+      } catch (error) {
+        const tachUIError = globalErrorManager.createTachUIError(error as Error, {
+          category: options.category || 'unknown_error',
+        })
+
+        globalErrorManager.reportError(tachUIError)
+
+        if (options.onError) {
+          options.onError(tachUIError)
+        }
+
+        if (options.fallback !== undefined) {
+          return options.fallback
+        }
+
+        throw error
+      }
+    }) as T
+  },
+
+  /**
+   * Wrap async function with error handling
+   */
+  withAsyncErrorHandling<T extends (...args: any[]) => Promise<any>>(
+    fn: T,
+    options: {
+      category?: ErrorCategory
+      onError?: (error: TachUIError) => void
+      fallback?: Awaited<ReturnType<T>>
+    } = {}
+  ): T {
+    return (async (...args: Parameters<T>): Promise<Awaited<ReturnType<T>>> => {
+      try {
+        return await fn(...args)
+      } catch (error) {
+        const tachUIError = globalErrorManager.createTachUIError(error as Error, {
+          category: options.category || 'network_error',
+        })
+
+        globalErrorManager.reportError(tachUIError)
+
+        if (options.onError) {
+          options.onError(tachUIError)
+        }
+
+        if (options.fallback !== undefined) {
+          return options.fallback
+        }
+
+        throw error
+      }
+    }) as T
+  },
+
+  /**
+   * Create error boundary with common configurations
+   */
+  createSimpleErrorBoundary(
+    fallbackMessage: string = 'Something went wrong'
+  ): (children: ComponentInstance[]) => ErrorBoundary {
+    return (children: ComponentInstance[]) =>
+      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
+      )
+  },
+}