مدیریت خطا (ErrorBoundary)

معرفی

کامپوننت ErrorBoundary یک React Error Boundary است که خطاهای رندر را می‌گیرد و به‌جای crash کردن کل صفحه، یک UI جایگزین نمایش می‌دهد. به‌طور پیش‌فرض از کامپوننت ErrorState استفاده می‌کند.

چه زمانی استفاده کنیم:

• برای محافظت بخش‌های مستقل صفحه تا خطا در یک بخش، کل صفحه را crash نکند
• برای نمایش UI جایگزین مناسب هنگام خطاهای render
• برای ارسال خطا به سرویس مانیتورینگ (مثل Sentry) با استفاده از onError

چه زمانی استفاده نکنیم:

• برای خطاهای async (API calls) — ErrorBoundary فقط خطاهای render React را catch می‌کند
• برای خطاهای event handler — آن‌ها را با try/catch handle کنید

استفاده

import { ErrorBoundary } from '@parto-system-design/ui'

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

مثال‌ها

با fallback سفارشی

<ErrorBoundary
  fallback={({ error, reset }) => (
    <div className="p-4 text-center">
      <p>خطایی رخ داد: {error.message}</p>
      <button onClick={reset}>تلاش مجدد</button>
    </div>
  )}
>
  <MyComponent />
</ErrorBoundary>

با callback خطا

<ErrorBoundary
  onError={(error, errorInfo) => {
    // ارسال به سرویس مانیتورینگ (مثلاً Sentry)
    console.error('Error caught:', error, errorInfo)
  }}
>
  <MyComponent />
</ErrorBoundary>

با fallback ثابت

<ErrorBoundary fallback={<p>مشکلی پیش آمده است.</p>}>
  <MyComponent />
</ErrorBoundary>

راهنمای استفاده

جدول ویژگی‌ها

دسترسی‌پذیری

• UI پیش‌فرض خطا دارای role="alert" است
• دکمه تلاش مجدد با کیبورد قابل دسترسی است

کامپوننت‌های مرتبط

• ErrorState — وقتی می‌خواهید خطای API را دستی نمایش دهید (ErrorBoundary فقط خطاهای render را catch می‌کند)
• Alert — برای پیام‌های هشدار inline که خطای بحرانی نیستند