create-fluxstack 1.0.13 → 1.0.14

package/app/client/src/components/ErrorBoundary.tsx

@@ -0,0 +1,107 @@
+import React, { Component, type ErrorInfo, type ReactNode } from 'react'
+import { logClientError } from '../lib/errors'
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+  onError?: (error: Error, errorInfo: ErrorInfo) => void
+  showErrorDetails?: boolean
+}
+
+interface State {
+  hasError: boolean
+  error?: Error
+  errorInfo?: ErrorInfo
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Log the error
+    logClientError(error, { componentStack: errorInfo.componentStack || '' })
+    
+    // Call custom error handler if provided
+    this.props.onError?.(error, errorInfo)
+    
+    this.setState({
+      error,
+      errorInfo
+    })
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: undefined, errorInfo: undefined })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Custom fallback UI
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      // Default error UI
+      return (
+        <div className="error-boundary">
+          <div className="error-boundary-content">
+            <h2>Something went wrong</h2>
+            <p>We're sorry, but something unexpected happened.</p>
+            
+            {this.props.showErrorDetails && this.state.error && (
+              <details className="error-details">
+                <summary>Error Details</summary>
+                <pre>{this.state.error.message}</pre>
+                {this.state.errorInfo && (
+                  <pre>{this.state.errorInfo.componentStack}</pre>
+                )}
+              </details>
+            )}
+            
+            <div className="error-actions">
+              <button onClick={this.handleRetry} className="retry-button">
+                Try Again
+              </button>
+              <button onClick={() => window.location.reload()} className="reload-button">
+                Reload Page
+              </button>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+// Hook version of ErrorBoundary for functional components
+export function useErrorBoundary() {
+  const [error, setError] = React.useState<Error | null>(null)
+
+  const resetError = React.useCallback(() => {
+    setError(null)
+  }, [])
+
+  const captureError = React.useCallback((error: Error) => {
+    setError(error)
+  }, [])
+
+  React.useEffect(() => {
+    if (error) {
+      throw error
+    }
+  }, [error])
+
+  return { captureError, resetError }
+}

package/app/client/src/components/ErrorDisplay.css

@@ -0,0 +1,365 @@
+/* Error Display Components Styles */
+
+.error-display {
+  border-radius: 8px;
+  padding: 16px;
+  margin: 8px 0;
+  border: 1px solid;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.error-display--inline {
+  background-color: #fef2f2;
+  border-color: #fecaca;
+  color: #991b1b;
+}
+
+.error-display--toast {
+  background-color: #ffffff;
+  border-color: #e5e7eb;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  max-width: 400px;
+  animation: slideIn 0.3s ease-out;
+}
+
+.error-display--modal {
+  background-color: #ffffff;
+  border-color: #e5e7eb;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1001;
+  max-width: 500px;
+  width: 90%;
+}
+
+.error-display--warning {
+  background-color: #fffbeb;
+  border-color: #fed7aa;
+  color: #92400e;
+}
+
+.error-display--severe {
+  background-color: #fef2f2;
+  border-color: #fca5a5;
+  color: #dc2626;
+}
+
+.error-display__content {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.error-display__icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.error-display__message {
+  flex: 1;
+}
+
+.error-display__text {
+  margin: 0 0 8px 0;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.error-display__correlation {
+  margin: 0;
+  font-size: 12px;
+  opacity: 0.7;
+  font-family: monospace;
+}
+
+.error-display__actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.error-display__button {
+  padding: 6px 12px;
+  border: 1px solid;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.error-display__button--retry {
+  border-color: #3b82f6;
+  color: #3b82f6;
+}
+
+.error-display__button--retry:hover {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.error-display__button--dismiss {
+  border-color: #6b7280;
+  color: #6b7280;
+}
+
+.error-display__button--dismiss:hover {
+  background-color: #6b7280;
+  color: white;
+}
+
+/* Error Boundary Styles */
+.error-boundary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: 20px;
+}
+
+.error-boundary-content {
+  text-align: center;
+  max-width: 500px;
+}
+
+.error-boundary-content h2 {
+  color: #dc2626;
+  margin-bottom: 16px;
+}
+
+.error-boundary-content p {
+  color: #6b7280;
+  margin-bottom: 20px;
+}
+
+.error-details {
+  text-align: left;
+  margin: 16px 0;
+  padding: 12px;
+  background-color: #f9fafb;
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;
+}
+
+.error-details summary {
+  cursor: pointer;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.error-details pre {
+  font-size: 12px;
+  color: #374151;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.error-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.retry-button, .reload-button {
+  padding: 8px 16px;
+  border: 1px solid #3b82f6;
+  border-radius: 4px;
+  background: #3b82f6;
+  color: white;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.retry-button:hover, .reload-button:hover {
+  background-color: #2563eb;
+}
+
+.reload-button {
+  background: transparent;
+  color: #3b82f6;
+}
+
+.reload-button:hover {
+  background-color: #3b82f6;
+  color: white;
+}
+
+/* Toast Container */
+.error-toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+/* Inline Error */
+.inline-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 4px;
+  color: #dc2626;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.inline-error__icon {
+  font-size: 16px;
+}
+
+.inline-error__message {
+  flex: 1;
+}
+
+/* Loading Spinner */
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  gap: 16px;
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #e5e7eb;
+  border-top: 3px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-spinner p {
+  color: #6b7280;
+  margin: 0;
+}
+
+/* Error Summary */
+.error-summary {
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 16px 0;
+}
+
+.error-summary__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #fecaca;
+}
+
+.error-summary__header h3 {
+  margin: 0;
+  color: #dc2626;
+  font-size: 16px;
+}
+
+.error-summary__actions {
+  display: flex;
+  gap: 8px;
+}
+
+.error-summary__button {
+  padding: 4px 8px;
+  border: 1px solid #dc2626;
+  border-radius: 4px;
+  background: transparent;
+  color: #dc2626;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.error-summary__button:hover {
+  background-color: #dc2626;
+  color: white;
+}
+
+.error-summary__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.error-summary__item {
+  padding: 8px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+}
+
+.error-summary__more {
+  padding: 8px;
+  text-align: center;
+  color: #6b7280;
+  font-style: italic;
+  font-size: 14px;
+}
+
+/* Animations */
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+  .error-display--toast {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    max-width: none;
+  }
+  
+  .error-display--modal {
+    top: 20px;
+    left: 10px;
+    right: 10px;
+    transform: none;
+    width: auto;
+    max-width: none;
+  }
+  
+  .error-display__content {
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .error-display__actions {
+    justify-content: center;
+    width: 100%;
+  }
+  
+  .error-summary__header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+}

package/app/client/src/components/ErrorDisplay.tsx

@@ -0,0 +1,258 @@
+import React from 'react'
+import { ClientAPIError } from '../lib/errors'
+import { getErrorMessage, isRetryableError } from '../lib/eden-api'
+
+interface ErrorDisplayProps {
+  error: Error | null
+  onRetry?: () => void
+  onDismiss?: () => void
+  showRetryButton?: boolean
+  showDismissButton?: boolean
+  className?: string
+  variant?: 'inline' | 'toast' | 'modal'
+}
+
+export function ErrorDisplay({
+  error,
+  onRetry,
+  onDismiss,
+  showRetryButton = true,
+  showDismissButton = true,
+  className = '',
+  variant = 'inline'
+}: ErrorDisplayProps) {
+  if (!error) return null
+
+  const errorMessage = getErrorMessage(error)
+  const canRetry = isRetryableError(error)
+  const isClientError = error instanceof ClientAPIError
+
+  const baseClasses = {
+    inline: 'error-display error-display--inline',
+    toast: 'error-display error-display--toast',
+    modal: 'error-display error-display--modal'
+  }
+
+  const severityClass = isClientError && error.statusCode >= 500 
+    ? 'error-display--severe' 
+    : 'error-display--warning'
+
+  return (
+    <div className={`${baseClasses[variant]} ${severityClass} ${className}`}>
+      <div className="error-display__content">
+        <div className="error-display__icon">
+          {isClientError && error.statusCode >= 500 ? '⚠️' : '❌'}
+        </div>
+        
+        <div className="error-display__message">
+          <p className="error-display__text">{errorMessage}</p>
+          
+          {isClientError && error.correlationId && (
+            <p className="error-display__correlation">
+              Reference ID: {error.correlationId}
+            </p>
+          )}
+        </div>
+        
+        <div className="error-display__actions">
+          {showRetryButton && canRetry && onRetry && (
+            <button 
+              onClick={onRetry}
+              className="error-display__button error-display__button--retry"
+            >
+              Try Again
+            </button>
+          )}
+          
+          {showDismissButton && onDismiss && (
+            <button 
+              onClick={onDismiss}
+              className="error-display__button error-display__button--dismiss"
+            >
+              Dismiss
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Toast notification component for errors
+interface ErrorToastProps {
+  error: Error | null
+  onRetry?: () => void
+  onDismiss?: () => void
+  autoHide?: boolean
+  hideDelay?: number
+}
+
+export function ErrorToast({
+  error,
+  onRetry,
+  onDismiss,
+  autoHide = true,
+  hideDelay = 5000
+}: ErrorToastProps) {
+  const [isVisible, setIsVisible] = React.useState(!!error)
+
+  React.useEffect(() => {
+    if (error) {
+      setIsVisible(true)
+      
+      if (autoHide && !isRetryableError(error)) {
+        const timer = setTimeout(() => {
+          setIsVisible(false)
+          onDismiss?.()
+        }, hideDelay)
+        
+        return () => clearTimeout(timer)
+      }
+    } else {
+      setIsVisible(false)
+    }
+  }, [error, autoHide, hideDelay, onDismiss])
+
+  if (!isVisible || !error) return null
+
+  return (
+    <div className="error-toast-container">
+      <ErrorDisplay
+        error={error}
+        onRetry={onRetry}
+        onDismiss={() => {
+          setIsVisible(false)
+          onDismiss?.()
+        }}
+        variant="toast"
+        showDismissButton={true}
+      />
+    </div>
+  )
+}
+
+// Inline error component for forms
+interface InlineErrorProps {
+  error: Error | null
+  field?: string
+  className?: string
+}
+
+export function InlineError({ error, field, className = '' }: InlineErrorProps) {
+  if (!error) return null
+
+  // Check if error is related to specific field
+  const isFieldError = error instanceof ClientAPIError && 
+    error.details?.field === field
+
+  if (field && !isFieldError) return null
+
+  const errorMessage = getErrorMessage(error)
+
+  return (
+    <div className={`inline-error ${className}`}>
+      <span className="inline-error__icon">⚠️</span>
+      <span className="inline-error__message">{errorMessage}</span>
+    </div>
+  )
+}
+
+// Loading state with error fallback
+interface LoadingWithErrorProps {
+  loading: boolean
+  error: Error | null
+  onRetry?: () => void
+  children: React.ReactNode
+  loadingComponent?: React.ReactNode
+  errorComponent?: React.ReactNode
+}
+
+export function LoadingWithError({
+  loading,
+  error,
+  onRetry,
+  children,
+  loadingComponent,
+  errorComponent
+}: LoadingWithErrorProps) {
+  if (loading) {
+    return loadingComponent || (
+      <div className="loading-spinner">
+        <div className="spinner"></div>
+        <p>Loading...</p>
+      </div>
+    )
+  }
+
+  if (error) {
+    return errorComponent || (
+      <ErrorDisplay
+        error={error}
+        onRetry={onRetry}
+        variant="inline"
+      />
+    )
+  }
+
+  return <>{children}</>
+}
+
+// Error summary component for multiple errors
+interface ErrorSummaryProps {
+  errors: Error[]
+  onRetryAll?: () => void
+  onDismissAll?: () => void
+  maxVisible?: number
+}
+
+export function ErrorSummary({
+  errors,
+  onRetryAll,
+  onDismissAll,
+  maxVisible = 3
+}: ErrorSummaryProps) {
+  if (errors.length === 0) return null
+
+  const visibleErrors = errors.slice(0, maxVisible)
+  const hiddenCount = errors.length - maxVisible
+
+  return (
+    <div className="error-summary">
+      <div className="error-summary__header">
+        <h3>Multiple Errors Occurred ({errors.length})</h3>
+        
+        <div className="error-summary__actions">
+          {onRetryAll && (
+            <button onClick={onRetryAll} className="error-summary__button">
+              Retry All
+            </button>
+          )}
+          {onDismissAll && (
+            <button onClick={onDismissAll} className="error-summary__button">
+              Dismiss All
+            </button>
+          )}
+        </div>
+      </div>
+      
+      <div className="error-summary__list">
+        {visibleErrors.map((error, index) => (
+          <div key={index} className="error-summary__item">
+            <ErrorDisplay
+              error={error}
+              variant="inline"
+              showRetryButton={false}
+              showDismissButton={false}
+            />
+          </div>
+        ))}
+        
+        {hiddenCount > 0 && (
+          <div className="error-summary__more">
+            +{hiddenCount} more errors
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}