حالت خطا (ErrorState)
نمایش وضعیت خطا با پیام و دکمه تلاش مجدد
معرفی
کامپوننت ErrorState برای نمایش وضعیت خطا در هنگام بارگذاری داده استفاده میشود.
چه زمانی استفاده کنیم:
- برای نمایش خطاهای API و بارگذاری داده با امکان تلاش مجدد
- برای حالتهای empty state که به خطا تبدیل شدهاند
- وقتی یک بخش از صفحه (نه کل صفحه) دچار خطا شده است
چه زمانی استفاده نکنیم:
- برای خطاهای validation فرم — از
FormMessageاستفاده کنید - برای اعلانهای خطای toast — از
Sonnerاستفاده کنید - برای پیامهای warning — از
Alertاستفاده کنید
اتصال به سرور ممکن نشد
استفاده
import { ErrorState } from '@parto-system-design/ui'
;<ErrorState onRetry={() => refetch()} />با پیام سفارشی
<ErrorState message="اتصال به سرور ممکن نشد" retryLabel="تلاش دوباره" onRetry={() => refetch()} />اندازهها
<ErrorState size="sm" onRetry={() => {}} />
<ErrorState size="md" onRetry={() => {}} />
<ErrorState size="lg" onRetry={() => {}} />بدون دکمه تلاش مجدد
<ErrorState message="خطایی رخ داد" />راهنمای استفاده
بکنید
- همیشه
onRetryرا ارائه دهید تا کاربر بتواند بدون refresh صفحه تلاش مجدد کند - پیام خطا را واضح و کاربرپسند بنویسید (نه پیام فنی سرور) - ازsizeمناسب استفاده کنید —smبرای کارتها،mdبرای بخشها،lgبرای صفحه کامل
نکنید
- پیامهای خطای فنی (stack trace، کد خطا) را مستقیماً نمایش ندهید - از ErrorState برای خطاهای validation فرم استفاده
نکنید — از
FormMessageاستفاده کنید - بدون دکمه تلاش مجدد، کاربر را در وضعیت خطا رها نکنید
دسترسیپذیری
- از
role="alert"برای اعلام خطا به screen readers استفاده میشود - دکمه تلاش مجدد با کیبورد قابل دسترسی است
- آیکون خطا دارای
aria-hiddenاست تا screen reader فقط متن را بخواند
جدول ویژگیها
کامپوننتهای مرتبط
- ErrorBoundary — وقتی میخواهید خطاهای runtime React را catch کنید و خودکار ErrorState نمایش دهید
- Alert — وقتی پیام warning یا اطلاعاتی inline نیاز دارید (نه خطای بارگذاری)
- Sonner — وقتی خطا گذرا است و نیاز به اقدام فوری ندارد