عرض الـ error لو الـ response مش متوقع

نوعين… أربعة أخطاء

لازم نفرّق بين أنواع الأخطاء، لأن التعامل مش واحد:

نوع الخطأ	مثال	التعامل المناسب
Network error	السيرفر مش متاح	رسالة اتصال أو إعادة المحاولة
HTTP error	`401` أو `500`	التعامل مع الـ status code
Validation error	`id` رجع string بدل number	تسجيل الخطأ ومراقبته، ورسالة مناسبة للمستخدم حسب الشاشة
Business error	المستخدم مش مسموح له ينفذ العملية	رسالة مفهومة للمستخدم

TanStack Query بتاخد الـ throw

لو بنستخدم TanStack Query، فالـ validation error اللي بترميه parse() هيخلي الـ Query تدخل حالة error تلقائيًا.

UsersList.tsx

const userQuery = useQuery({  queryKey: ["user"],  queryFn: getUser,});if (userQuery.isPending) {  return <div>Loading...</div>;}if (userQuery.isError) {  return <div>Failed to load user</div>;}return <div>{userQuery.data.name}</div>;

ده كفاية عشان تمنع عرض الداتا غير الصحيحة.

خلّصت الفصل لما

تفرّق بين network وHTTP وvalidation وbusiness error
تعرف إن parse اللي بترمي خطأ بتدخّل الـ query في isError
تعرض رسالة عامة للمستخدم وتبعت التفاصيل للـ logging

🧠 اختبر نفسك

١) خطأ الـ validation هيوصل للشاشة إزاي مع TanStack Query؟

parse() بترمي ZodError، فالـ query بتدخل isError، والـ UI بيعرض حالة الخطأ.

٢) المستخدم يشوف Expected number, received string at id؟

لأ. رسالة عامة للشاشة، وتفاصيل الخطأ للـ logging أو الـ monitoring.