ErrorFallback

Purpose

ErrorFallback displays a friendly error message when something goes wrong:

• Clear error messaging
• Retry and home navigation options
• Development-only error details

When to use

Use ErrorFallback for:

• Error boundary fallback UI
• Unrecoverable error states
• Top-level error handling

Basic usage

import ErrorFallback from '@/shared/ui/components/ErrorFallback'

<ErrorFallback
  error={error}
  onReset={() => window.location.reload()}
/>

With ErrorBoundary

import { ErrorBoundary } from '@/app/providers/ErrorBoundary'
import ErrorFallback from '@/shared/ui/components/ErrorFallback'

<ErrorBoundary
  fallback={({ error, resetErrorBoundary }) => (
    <ErrorFallback error={error} onReset={resetErrorBoundary} />
  )}
>
  <App />
</ErrorBoundary>

Props

Prop	Type	Default	Description
error	Error | null	-	Error object
onReset	() => void	-	Retry callback
showDetails	boolean	import.meta.env.DEV	Show stack trace

Notes

• Stack trace only shown in development by default
• "Go to Home" navigates to /
• Centered card layout for visibility
• Use with React error boundaries for automatic error catching