الگوهای خطا

import { Alert, AlertTitle, AlertDescription } from '@partodata/ui'

{
  error && (
    <Alert variant="destructive">
      <AlertCircle className="h-4 w-4" />
      <AlertTitle>عملیات ناموفق بود</AlertTitle>
      <AlertDescription>{error.message || 'خطایی رخ داده است. لطفاً دوباره تلاش کنید.'}</AlertDescription>
    </Alert>
  )
}

function DashboardSection() {
  const { data, error, isLoading, refetch } = useQuery(...)

  if (isLoading) return <SectionSkeleton />

  if (error) return (
    <div className="bg-surface-100 border border-default rounded-lg p-6 flex flex-col items-center gap-4 text-center">
      <AlertCircle className="h-8 w-8 text-destructive" />
      <div>
        <h3 className="text-foreground font-medium">خطا در بارگذاری</h3>
        <p className="text-light text-sm mt-1">داده‌ها در دسترس نیست</p>
      </div>
      <Button variant="outline" size="sm" onClick={refetch}>
        تلاش مجدد
      </Button>
    </div>
  )

  return <DashboardContent data={data} />
}

{
  isNetworkError && (
    <Alert>
      <WifiOff className="h-4 w-4" />
      <AlertTitle>اتصال به اینترنت برقرار نیست</AlertTitle>
      <AlertDescription>لطفاً اتصال اینترنت خود را بررسی کنید و دوباره تلاش کنید.</AlertDescription>
    </Alert>
  )
}

// خطاها باید توسط screen reader اعلام شوند
<div role="alert" aria-live="assertive">
  {error && (
    <Alert variant="destructive">
      <AlertDescription>{error.message}</AlertDescription>
    </Alert>
  )}
</div>

// برای خطاهای فرم
<div role="alert" aria-live="polite">
  <FormMessage />
</div>

// ❌ غلط — در تم تیره (پیش‌فرض پرتو) شکسته می‌شود
<div className="bg-red-50 border border-red-200 text-red-600 rounded-lg p-4">
  ارسال کمپین تخفیف فصلی ناموفق بود
</div>

// ✅ درست — توکن‌ها در هر دو تم کار می‌کنند
<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>ارسال کمپین ناموفق بود</AlertTitle>
  <AlertDescription>کمپین «تخفیف فصلی» ذخیره نشد. لطفاً دوباره تلاش کنید.</AlertDescription>
</Alert>

// ❌ غلط — در RTL آیکون و دکمه بستن جابه‌جا می‌نشینند
<div className="relative pl-10 text-left">
  <AlertCircle className="absolute left-3 top-3 h-4 w-4" />
  <button className="absolute right-3 top-3" aria-label="بستن">×</button>
</div>

// ✅ درست — در RTL و LTR هر دو درست است
<div className="relative ps-10 text-start">
  <AlertCircle className="absolute start-3 top-3 h-4 w-4" />
  <button className="absolute end-3 top-3" aria-label="بستن">×</button>
</div>

// ❌ غلط — شکست یک صفحه، کل جدول و زمینه کاربر را حذف می‌کند
if (error) return <ErrorState title="خطا در بارگذاری" />

// ✅ درست — جدول می‌ماند؛ خطا inline است و تلاش مجدد همان صفحه را می‌گیرد
const { data, error, refetch, isFetching } = useQuery({
  queryKey: ['packaging-feedback', page],
  queryFn: () => fetchFeedback(page),
  placeholderData: (previous) => previous, // داده صفحه قبلی حفظ می‌شود
})

return (
  <div className="flex flex-col gap-4">
    {error && (
      <Alert variant="destructive">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>بارگذاری این صفحه ناموفق بود</AlertTitle>
        <AlertDescription className="flex items-center gap-2">
          داده‌های صفحه فعلی دریافت نشد.
          <Button variant="outline" size="sm" onClick={() => refetch()}>
            تلاش مجدد
          </Button>
        </AlertDescription>
      </Alert>
    )}
    <DataTable
      columns={columns}
      data={data?.rows ?? []}
      isLoading={isFetching && !data}
      pagination={{
        currentPage: page,
        totalPages: data?.totalPages ?? 1,
        onPageChange: setPage,
      }}
    />
  </div>
)

// ❌ غلط — message سرور متن فنی انگلیسی است و مستقیم نمایش داده می‌شود
<AlertDescription>{error.message}</AlertDescription>

// ✅ درست — نگاشت به فارسی رسمی + fallback عمومی
const errorMessages: Record<string, string> = {
  NETWORK: 'اتصال به اینترنت برقرار نیست. لطفاً اتصال خود را بررسی کنید.',
  FORBIDDEN: 'برای دیدن این بخش، باید وارد حساب کاربری خود شوید.',
  NOT_FOUND: 'اطلاعات مورد نظر یافت نشد.',
}

<AlertDescription>
  {errorMessages[error.code] ?? 'خطایی رخ داده است. لطفاً دوباره تلاش کنید.'}
</AlertDescription>

// ❌ غلط — ناحیه live همراه با خطا mount می‌شود؛ اعلام نمی‌شود
{error && (
  <div aria-live="assertive">
    <Alert variant="destructive">
      <AlertDescription>ارسال بازخورد بسته‌بندی ناموفق بود</AlertDescription>
    </Alert>
  </div>
)}

// ✅ درست — ناحیه live همیشه هست؛ فقط محتوا تغییر می‌کند
<div role="alert" aria-live="assertive">
  {error && (
    <Alert variant="destructive">
      <AlertDescription>ارسال بازخورد بسته‌بندی ناموفق بود</AlertDescription>
    </Alert>
  )}
</div>