AI Error Recovery
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
Connection Error
Unable to connect to the AI service
The connection was interrupted while processing your request.
Suggestions
- Check your internet connection
- Try refreshing the page
- The service may be temporarily unavailable
Rate Limit Warning
Usage limit reached
Rate Limit Reached
You've reached your request limit
6:15:20 PM
Your rate limit will reset in 5 minutes.
Suggestions
- Wait a few minutes before trying again
- Reduce the frequency of requests
- Consider upgrading your plan for higher limits
Critical Error
System-level critical failure
Model Unavailable
AI model is currently unavailable
The model you requested is experiencing issues and cannot process requests.
Suggestions
- Try a different AI model
- The model may be undergoing maintenance
- Check the status page for updates
AI Suggested Alternatives
- →Try using a different AI model
- →Reduce the complexity of your request
- →Save your work and try again later
Compact Variant
Smaller footprint for inline contexts
Request Timeout
Request timed out
Inline Variant
Minimal display for inline errors
Retry Counter
Shows retry attempts
Request Timeout
Request timed out
Suggestions
- Try a shorter or simpler request
- The AI may be processing a complex task
- Try again in a few moments
Props
AIErrorRecovery component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
errorType* | ErrorType | — | Type 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* | string | — | Main error message |
description | string | — | Detailed error description |
technicalDetails | string | — | Technical details for developers (collapsible) |
errorCode | string | — | Error code if available |
timestamp | Date | — | Timestamp of the error |
recoveryActions | RecoveryAction[] | — | Custom recovery actions |
alternatives | string[] | — | AI-suggested alternatives |
variant | 'default' | 'compact' | 'inline' | 'default' | Display variant |
retryCount | number | 0 | Number of retry attempts |
maxRetries | number | 3 | Maximum retry attempts |
retrying | boolean | false | Whether retry is in progress |
dismissible | boolean | true | Whether error is dismissible |
onRetry | () => void | — | Callback when retry is clicked |
onGoBack | () => void | — | Callback when go back is clicked |
onContactSupport | () => void | — | Callback when contact support is clicked |
onDismiss | () => void | — | Callback to dismiss the error |
onRecoveryAction | (actionId: string) => void | — | Callback 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 componentsThis 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 buttonsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between action buttons |
| Enter / Space | Activate 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