أخطاء عدم الوجود (Not Found Errors)

الدرس 26 من 34 · دورة TanStack Router الكاملة · 7 دقيقة و31 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع الكود لهذا الدرس

الفرع: error-handling-2

[00:00] في تطبيقنا هذا، يمكن أن تكون لَدَينا أخطاء أخرى أيضًا، مثل أخطاء 404 مثلًا عندما لا يوجد مسار. فلنحاول هنا زيارة مسارٍ لا يوجد في مجلّدنا. سأكتب أيّ شيء هنا وسأحصل على مكوّن

[00:15] عدم الوجود (not found component) هذا هنا. فهذا مكوّن افتراضي (default component) سيعرضه TanStack Router إذا كتبتَ مسارًا لا يوجد له تطابق في مجلّدك. ومع ذلك يمكننا بالطبع تخصيصه أيضًا. ولفعل ذلك، يمكننا إنشاء مكوّن عدم الوجود

[00:31] لتطبيقنا كلّه عبر تعريف هذا في مسارنا الجذري (root route). فلنذهب إذًا إلى مسارنا الجذري. وفي هذا المكان، عندما نُعرِّف مسارَنا هنا، يمكننا تحديد مكوّن عدم الوجود هكذا. فليكن لهذا أن نُرجع ربّما وسم

[00:47] div، ولنكتب هنا صراحةً root not found كي نعرف أيّ مكوّن يُصَيَّر بالضبط. فبحفظ هذا وتحديث الصفحة سنحصل على root not found، وأعني بـ root not found أنّه مكوّن عدم الوجود

[01:03] الآتي من المسار الجذري. ويمكننا مع ذلك أن نكون أكثر تحديدًا قليلًا. فتذكّر أنّه لَدَينا في تطبيقنا مسار الإعدادات (settings)، وفي settings كان لَدَينا general، وكان لَدَينا payment، وكان لَدَينا profile.

[01:17] فماذا لو كتبنا هنا شيئًا مثل settings/ ثم شيئًا لا يوجد؟

[01:23] تذكّر في مسار الإعدادات لدينا أنّ settings هو الأب (parent). فإذا تأمّلنا هنا، فـ settings هو الأب لـ payment وprofile. وفي هذا الأب، إذا ذهبنا في مجلّدنا إلى settings، أي إلى ملف settings.tsx،

[01:40] فهذا الأب يملك منفذ تصيير (outlet) ويعرض الأبناء (children) وما إلى ذلك. فإذا حصل خطأ، أي خطأ 404، حيث كان الأب هو settings والابن غير موجود، فسيُستخدَم مخطّط (layout) settings هذا، و

[01:57] سيُستخدَم مكوّن الخطأ الافتراضي 404 بدلًا من هذا المنفذ. وكما ترى نحصل على مخطّطنا، أي مخطّط settings، كما يحدث عادةً.

[02:06] لكنّنا نحصل هنا على مكوّن عدم الوجود الافتراضي. ويمكننا تخصيص ذلك عبر تحديد مكوّن عدم الوجود في الأب settings نفسه.

[02:17] فلنقل هنا نضيف بعض النصّ settings not found هكذا.

[02:25] فالآن إذا حدّثنا الصفحة سنحصل على settings not found.

[02:30] فما سيحدث أنّ الموجّه (router) سيحاول استخدام أقرب مسارٍ مطابقٍ يملك منفذ تصيير، وسيعرض مكوّن عدم الوجود مستعملًا هذا المسار. غير أنّه يمكننا تخصيص هذا السلوك أيضًا. إذا أردنا

[02:46] أن يُستخدَم مكوّن عدم الوجود الجذري (root not found) لكلّ مساراتنا. فعندما نُعرِّف موجّهَنا، أي في ملف main.tsx، يمكننا هنا تحديد خيارٍ (option) يُدعى notFoundMode. إذا ضبطنا هذا على root فإنّ

[03:05] مكوّن عدم الوجود الجذري سيُستخدَم كما ترى. غير أنّ الخيار الافتراضي هو fuzzy، وهو أكثر ذكاءً قليلًا إذ يحاول استخدام أقرب مسارٍ ذي أبناء كي يعرض مكوّن عدم الوجود هكذا.

[03:20] لذا سأتركه كما هو، fuzzy، وهو الافتراضي أيضًا. فيمكنك ربّما إزالة هذا الخيار، لكن تذكّر أنّه إذا لم يكن لَدَينا مكوّن عدم الوجود إمّا في مسارنا الجذري أو ربّما في الأب settings هنا. فلنقل ربّما

[03:34] نُعلِّق هذا مؤقّتًا ونحدّث الصفحة؛ حينها سيُستخدَم مكوّن عدم الوجود الافتراضي هذا. فربّما تحبّ أن يكون لَدَيك مكوّن عدم الوجود الافتراضي (defaultNotFoundComponent) مختلف، بدلًا من الاضطرار إلى تحديد مكوّن عدم الوجود

[03:47] لكل مسار أو لكل مكوّن أب، أي لكل مكوّن أب تحتاجُ فيه إلى عرض خطأ 404. في هذه الحالة يمكنك، هنا في ملف main.tsx، عندما نُعرِّف موجّهَنا، تحديد مكوّن عدم الوجود الافتراضي هكذا.

[04:05] فلنقل لهذا، سأكتب ببساطة default not found كنصٍّ هنا.

[04:11] والآن، كما ترى، نحصل على هذا بدلًا منه. لكننا مع ذلك نستطيع تجاوزه بالذهاب إلى مخطّط settings وإلغاء التعليق على هذا. فالآن سيكون له أولوية أكبر، وسنحصل عليه

[04:24] هنا. حسنًا. أرجو أن يكون هذا واضحًا. أحيانًا مع ذلك قد يكون لَدَينا مسارٌ مطابق، لكنّ المورد (resource) الذي نحاول جلبه لا يوجد. فلنقل مثلًا أنّ لَدَينا مسارًا هو posts/ معرّف (ID). لذا

[04:40] هذا المسار موجود. غير أنّه ربّما لا يوجد في واجهتنا الخلفية (back end) هذا المعرّف الذي مرّرناه هنا. فلنمرّر ربّما رقمًا كبيرًا هنا لا وجود له على الأرجح. فهذا المسار موجود. لكن عندما نجلب بياناتنا من الـ API،

[04:55] سنحصل على 404 من الـ API.

[04:58] ما سيحدث — أو عذرًا، هذه هي posts.

[05:05] ما سيحدث — تذكّر أنّنا نعالج الأخطاء، فلنعُد إلى مسار التدوينة posts/ id — باستخدام مكوّن الخطأ (error component) هذا. وعندما نجلب بياناتنا، وهي في ملف posts.ts، فإنّ أيّ خطأ

[05:21] سنحصل عليه؛ أنّنا ببساطة نرمي خطأ. في الواقع، ليس هنا، بل هنا في getPost نرمي خطأً لأيّ خطأ سنحصل عليه. فعبر رمي خطأ هنا سيُعرَض مكوّن الخطأ هذا.

[05:36] غير أنّه علينا أن نكون أكثر تحديدًا ونعرض خطأ 404 تحديدًا إذا حصلنا على خطأ 404 من الـ API. فإذا فحصتَ هنا وفتحتَ شبكتَنا وحدّثتَ الصفحة، فعند إرسال هذا الطلب سنحصل في الاستجابة (response)، فلنأخذ

[05:55] نظرة هنا.

[05:57] في الاستجابة سنحصل على خطأ 404 not found. لذا ربّما يمكننا التحقّق هنا، عند إرسالنا هذا الطلب، إن لم تكن الاستجابة سليمة (if the response is not okay)، وربّما قبل رمي الخطأ يمكننا أن نتحقّق ما إذا

[06:12] كانت حالة الاستجابة (response status) هي 404. ففي هذه الحالة يمكننا أن نجعل TanStack Router يعرض مكوّن 404 بدلًا من مكوّن الخطأ عبر رَمْي notFound. ويمكننا استيراد notFound

[06:27] من TanStack Router ورميها بدلًا من رمي خطأ.

[06:35] عذرًا، عندي خطأ إملائي هنا.

[06:38] لستُ متأكّدًا لماذا لا يُستورَد تلقائيًا (auto import)، لكن فلنضعه هنا هكذا فقط؛ عبر رمي notFound عندما نحصل على خطأ 404. فإذا حدّثنا الآن فسنحصل على مكوّن عدم الوجود الافتراضي.

[06:52] تذكّر أنّنا حدّدناه في main.tsx ليكون مكوّننا الافتراضي. ومع ذلك يمكننا بالطبع تخصيصه لهذا المسار تحديدًا عبر تمرير — عذرًا — هنا في ملف posts، في مسار posts id، إضافةً إلى

[07:08] مكوّننا، يمكننا أن نملك مكوّن عدم الوجود كذلك. وفي هذا المكان لهذا واحد، لنقل post not found. وإذا حفظنا هذا وحدّثنا الصفحة فسنحصل على post not found. هذا هو أساس كلّ شيء.

[07:21] ويمكنك أيضًا أن تجد صفحةً هنا في المستندات (docs) عن أخطاء عدم الوجود إن أردتَ قراءة المزيد عن هذا الموضوع. ومع ذلك، غطّينا هنا كلّ شيء تقريبًا.