Error Fallback

Feedback

Error Handling

Error boundary fallback UI with retry and fallback action support. Displays error messages with three display variants.

Built With

1 component

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

Button

Default Variant

Standard error display with title, message, and action buttons

AI Processing Error

The AI model failed to generate a response. Please check your API key and try again.

Minimal Variant

Compact inline error display

Connection timed out

Detailed Variant

Error with expandable stack trace

AI Processing Error

TypeError: Cannot read properties of undefined (reading "map")

View technical details

Error: TypeError: Cannot read properties of undefined (reading "map")
    at l (/app/.next/server/chunks/ssr/_785a3d7a._.js:1:10723)
    at ar (/app/node_modules/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js:2:84366)
    at aa (/app/node_modules/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js:2:86185)
    at as (/app/node_modules/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js:2:107952)
    at ao (/app/node_modules/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js:2:105374)
    at an (/app/node_modules/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js:2:84718)
    at aa (/app/node_modules/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js:2:86234)
    at aa (/app/node_modules/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js:2:104714)
    at as (/app/node_modules/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js:2:107952)
    at ao (/app/node_modules/next/dist/compiled/next-server/app-page-turbo.runtime.prod.js:2:105374)

Props

Component API reference

Prop	Type	Default	Description
`error`	`Error \| string`	—	Error object or message string
`variant`	`'default' \| 'minimal' \| 'detailed'`	`'default'`	Display variant
`onRetry`	`() => void`	—	Handler for retry action button
`onFallbackAction`	`() => void`	—	Handler for fallback action button
`fallbackActionLabel`	`string`	`'Use Fallback'`	Label for the fallback action button
`showStackTrace`	`boolean`	`false`	Whether to show stack trace in detailed mode
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

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

export default function Example() {
  return (
    <>
      {/* Simple string error */}
      <ErrorFallback
        error="Something went wrong"
        onRetry={() => location.reload()}
      />

      {/* Error object with stack trace */}
      <ErrorFallback
        error={new Error('API request failed')}
        variant="detailed"
        showStackTrace
        onRetry={() => refetch()}
        onFallbackAction={() => useCachedData()}
        fallbackActionLabel="Use Cached Data"
      />

      {/* Minimal inline error */}
      <ErrorFallback
        error="Network error"
        variant="minimal"
        onRetry={() => retry()}
      />
    </>
  )
}

Features

Built-in functionality

Three variants: Default, minimal, and detailed display modes
Error object support: Accepts both Error objects and plain strings
Stack trace display: Expandable technical details in detailed mode
Retry action: Built-in retry button with callback
Fallback action: Secondary action with customizable label
Ref forwarding: Supports React ref forwarding

Accessibility

Accessibility considerations

ARIA Attributes

Uses semantic heading and paragraph elementsError icon provides visual context

Keyboard Navigation

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

Notes

Error message is visible to screen readers
Stack trace details use expandable disclosure pattern
Action buttons have clear labels

Related Components

Alert Banner Toast