مكوّن اصطياد الأخطاء (CatchBoundary)
الدرس 27 من 34 · دورة TanStack Router الكاملة · 2 دقيقة و41 ثانية
الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.
مستودع الكود لهذا الدرس
الفرع:
error-handling-3
[00:01] فلنتحدّث عن أمرٍ أخير واحد يتعلّق بمعالجة الأخطاء. فلنقل أنّنا نزور تدوينةً ما، وتذكّر في مسارات posts لدينا أنّنا كنّا نحمّل التدوينة، أو كنّا ننتظر اكتمال تحميل التدوينة قبل تصيير مسارنا، و
[00:14] حينها حمّلنا التعليقات (comments) في الخلفية.
[00:17] فلنسلّم أنّ بعض الأخطاء حصلت عندما نحمّل التعليقات. فلنذهب إلى دالة التعليقات (comments) هنا، وفلنُعِد هذا التأخير (timeout)، ثم فلنقل أنّه بعد هذا التأخير حدث خطأٌ ما. فلنرمي خطأً جديدًا و
[00:35] فلنقل failed to fetch comments أيضًا.
[00:38] فإذا حاولنا الآن تحديثَ الصفحة، فستُحمَّل تعليقاتنا ثم ستتحطّم كلّ صفحتنا.
[00:46] سيكون الأمر أجمل بكثير لو أبقينا تدوينتَنا كما هي، وعرضنا خطأً هنا فقط مكان التعليقات. ولفعل ذلك، تذكّر أنّه في مسار التدوينة لدينا نُصيّر مكوّن التدوينة هذا. وفي مكوّن التدوينة هذا نملك
[01:01] أمر انتظار (await) هنا كي ننتظر اكتمال تحميل التعليقات ثم نعرضها. وما علينا فعله أنّه إذا حصل أيّ خطأ في هذا المكوّن المنتظِر فعلينا عرض مكوّن خطأ بدلًا من تحطيم
[01:14] كلّ الصفحة. فما يمكننا فعله أنّه يمكننا أن نغلّف هذا بمكوّن CatchBoundary يمكننا استيراده من TanStack، ونغلّف كلّ شيء هكذا. وعبر هذا، إذا رُمي أيّ خطأ من
[01:32] أبناء CatchBoundary، فيمكننا بدلًا من تحطيم الصفحة كلّها أن نلتقط هذا الخطأ ونعرض مكوّن خطأ بدلًا منه. فلنَسُب بعض النصّ هنا failed to load comments
[01:47] وكذلك إن أردتَ تسجيل هذا الخطأ يمكننا أن نملك هنا استدعاءً راجعًا onCatch. لكنّه اختياري، أمّا المطلوب فهو خاصية تُدعى getResetKey، وهي هنا تُرجِع دالّة، وفي هذه الدالة يمكننا
[02:02] أن نُرجع مفتاحًا معيّنًا، أيّ مفتاحٍ كان، وكلّما تغيّر هذا المفتاح فسيُعاد ضبط حدّ الخطأ هذا، أي هذا CatchBoundary. فيمكننا أن نضع هنا شيئًا ديناميكيًا نحتاجه، فكلّما تغيّرَ سيُعاد ضبط CatchBoundary
[02:16] هذا. غير أنّه في الوقت الحاضر فلنضع سلسلةً نصّيةً ثابتة (static string) فقط. وربّما يمكنك أن تنفّذ وسيلةً لتحديث هذا المفتاح كي يُعاد ضبط حدّ الخطأ. لكنّني سأبقيه هكذا في الوقت الحاضر. وإذا حفظنا الآن
[02:29] وحدّثنا الصفحة وانتظرنا الخطأ، فمن المفترض أن نحصل الآن على failed to load comments وحدها هنا.
[02:36] لكنّنا ما زلنا نملك تدوينتَنا، ولم نحطّم صفحتَنا بالكامل. فلنتحدّث