Error Fallback

Error Handling

Graceful error handling UI with retry options and fallback actions for AI processing failures. Supports default, minimal, and detailed variants with optional stack trace display.

Preview

Default error display with actions

AI Processing Error

Failed to process AI request: Model timeout after 30 seconds

Variants

Three display styles for different contexts

Default

AI Processing Error

Failed to process AI request: Model timeout after 30 seconds

Minimal

Connection to AI service lost

Detailed (with Stack Trace)

AI Processing Error

Failed to process AI request: Model timeout after 30 seconds

View technical details

Error: Failed to process AI request
    at AIProcessor.execute (processor.ts:142)
    at RequestHandler.handle (handler.ts:87)
    at async main (index.ts:23)

Props

ErrorFallback component API reference

Prop	Type	Default	Description
`error*`	`Error \| string`	—	Error object or message string
`onRetry`	`() => void`	—	Callback when retry button is clicked
`onFallbackAction`	`() => void`	—	Callback when fallback action is triggered
`fallbackActionLabel`	`string`	`'Use Fallback'`	Label for the fallback action button
`variant`	`'default' \| 'minimal' \| 'detailed'`	`'default'`	Display variant
`showStackTrace`	`boolean`	`false`	Show stack trace in detailed variant
`className`	`string`	—	Additional CSS classes for the container

Usage

Import and implementation example

import { ErrorFallback } from '@/components/ui/error-fallback'

export default function Example() {
  const handleRetry = () => {
    // Retry the failed request
    retryAIRequest()
  }

  const handleFallback = () => {
    // Use cached or default data
    useCachedResponse()
  }

  return (
    <ErrorFallback
      error={error}
      variant="detailed"
      showStackTrace
      onRetry={handleRetry}
      onFallbackAction={handleFallback}
      fallbackActionLabel="Use Cached Result"
    />
  )
}

This block is self-contained (no UI component dependencies)

Features

Built-in functionality

Three variants: Default card, minimal inline, and detailed with stack
Retry action: Built-in retry button for recoverable errors
Fallback action: Optional alternative action button
Stack trace: Expandable technical details for debugging
Error types: Accepts Error objects or string messages
Custom labels: Configurable fallback button label
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Retry and fallback buttons are native button elementsAlert icon provides visual warning indicationError message is displayed as visible text

Keyboard Navigation

Key	Action
`Tab`	Navigate between retry and fallback buttons
`Enter / Space`	Activate focused button

Notes

Error is communicated through text, not just color
Stack trace is in expandable details element
Consider adding role="alert" for immediate announcement
Rose/red coloring reinforces error state visually

Related Components

Alert Button AI Thinking Indicator