Eidetic

AI Error Recovery

AI
Trust
Governor

Display AI errors with clear explanations, recovery suggestions, and actionable steps. Supports multiple error types, severity levels, and variants for different contexts.

Network Error

Connection issues with retry option

Rate Limit Warning

Usage limit reached

Critical Error

System-level critical failure

Compact Variant

Smaller footprint for inline contexts

Inline Variant

Minimal display for inline errors

Retry Counter

Shows retry attempts

Props

AIErrorRecovery component API reference

PropTypeDefaultDescription
errorType*ErrorTypeType of error (network, timeout, rate_limit, context_overflow, content_filter, model_unavailable, invalid_request, system_limit_exceeded, unknown)
severity'warning' | 'error' | 'critical''error'Error severity level
message*stringMain error message
descriptionstringDetailed error description
technicalDetailsstringTechnical details for developers (collapsible)
errorCodestringError code if available
timestampDateTimestamp of the error
recoveryActionsRecoveryAction[]Custom recovery actions
alternativesstring[]AI-suggested alternatives
variant'default' | 'compact' | 'inline''default'Display variant
retryCountnumber0Number of retry attempts
maxRetriesnumber3Maximum retry attempts
retryingbooleanfalseWhether retry is in progress
dismissiblebooleantrueWhether error is dismissible
onRetry() => voidCallback when retry is clicked
onGoBack() => voidCallback when go back is clicked
onContactSupport() => voidCallback when contact support is clicked
onDismiss() => voidCallback to dismiss the error
onRecoveryAction(actionId: string) => voidCallback when a recovery action is clicked

Usage

Import and implementation example

import { AIErrorRecovery } from '@/blocks/ai-transparency/ai-error-recovery'
export default function ChatInterface() {
const [error, setError] = useState<{
type: ErrorType
message: string
} | null>(null)
const [retryCount, setRetryCount] = useState(0)
const [retrying, setRetrying] = useState(false)
const handleRetry = async () => {
setRetrying(true)
try {
await retryRequest()
setError(null)
setRetryCount(0)
} catch (e) {
setRetryCount(prev => prev + 1)
} finally {
setRetrying(false)
}
}
if (error) {
return (
<AIErrorRecovery
errorType={error.type}
severity="error"
message={error.message}
retryCount={retryCount}
retrying={retrying}
onRetry={handleRetry}
onGoBack={() => router.back()}
onContactSupport={() => openSupportChat()}
onDismiss={() => setError(null)}
/>
)
}
return <ChatMessages />
}

Built With

2 components

This block uses the following UI components from the design system:

Features

Built-in functionality

  • Multiple error types: 9 pre-configured error types with appropriate icons and suggestions
  • Three severity levels: Warning, error, and critical with distinct visual styles
  • Three variants: Default (full), compact, and inline display modes
  • Smart suggestions: Context-aware recovery suggestions for each error type
  • AI alternatives: Display AI-suggested alternatives to help users
  • Technical details: Collapsible technical details with copy functionality
  • Retry tracking: Track retry attempts with visual counter
  • Custom actions: Support for custom recovery actions
  • Loading states: Show spinning indicator during retry
  • Dismissible: Optional dismiss button to close error
  • Timestamps: Display when the error occurred
  • Dark mode: Full dark mode support

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

Uses role="alert" for screen reader announcementsError severity communicated through visual styling and badgesAll interactive elements are focusable buttons

Keyboard Navigation

KeyAction
TabNavigate between action buttons
Enter / SpaceActivate focused button

Notes

  • Error types use both color and icons for identification
  • Technical details are hidden by default to reduce cognitive load
  • Copy button provides feedback when details are copied
  • Consider adding aria-live for dynamic error updates