مكوّنات حدود الأخطاء
بناء مكوّن غلاف ErrorBoundary مع منفذ fallback وعرض الخطأ
مكوّنات حدود الأخطاء درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
ما هو حدّ الأخطاء
حدّ الأخطاء هو مكوّن قابل لإعادة الاستخدام يغلّف جزءًا من واجهة المستخدم، ويلتقط الأخطاء التي تحدث داخله، ويعرض محتوى بديلًا بدلًا من السماح بتعطّل التطبيق بأكمله.
الفكرة الأساسية
يحتفظ حدّ الأخطاء براية hasError. وما دامت قيمتها false، فإنه يعرض أبناءه؛ وعند التقاط خطأ، يغيّرها إلى true ويعرض المحتوى البديل.
import { ref } from "vue";
const hasError = ref(false);التقاط الخطأ
استخدم onErrorCaptured لضبط الراية وإيقاف الانتشار، حتى يتولى حدّ الأخطاء الفشل بالكامل.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});حفظ تفاصيل الخطأ
التقط الخطأ نفسه أيضًا، حتى يتمكن المحتوى البديل من عرض رسالة أو إتاحة إعادة المحاولة.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});بنية القالب
اعرض الفتحة الافتراضية (الأبناء) عندما تكون الحالة سليمة، وفتحة بديلة عند حدوث خطأ.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>الفتحة الافتراضية تعرض الأبناء
تحتوي الفتحة الافتراضية على واجهة المستخدم المحمية. وفي الظروف العادية يكون حدّ الأخطاء غير مرئي، إذ يمرّر أبناءه فقط.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>فتحة fallback تظهر عند الخطأ
وفّر فتحة باسم fallback لواجهة الخطأ. ويمكنها تلقي الخطأ عبر خاصية فتحة ذات نطاق.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>إضافة إعادة المحاولة
اعرض وسيلة لإعادة الضبط حتى يتمكن المستخدمون من التعافي. إذ تمسح إحدى الدوال الراية وتعيد عرض الأبناء.
function reset() {
hasError.value = false;
error.value = null;
}إعادة المحاولة في المحتوى البديل
مرّر reset عبر الفتحة ذات النطاق حتى يتمكن المحتوى البديل من توفير زر «حاول مرة أخرى».
<slot v-else name="fallback" :error="error" :reset="reset" />محتوى احتياطي افتراضي
وفّر للمحتوى الاحتياطي محتوى افتراضيًا مناسبًا، حتى تعمل الحدود دون الحاجة إلى توفير محتوى احتياطي مخصص.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>أهمية الحدود
من دون الحدود، قد تتسبب إحدى الواجهات الفاشلة في تعطيل العرض بأكمله. تعزل الحدود حالات الفشل، ما يسمح لبقية التطبيق بالاستمرار في العمل — وهذا نمط أساسي لتعزيز المرونة.
تحقق سريع
كيف تحدد حدود الأخطاء ما يجب عرضه؟
مراجعة
أنشأت حدودًا للأخطاء تتضمن مرجع hasError، وonErrorCaptured الذي يضبطه ويعيد false، وslot افتراضيًا للمكونات الفرعية وslot احتياطيًا (يتضمن الخطأ ووظيفة إعادة الضبط) يظهر عند وقوع خطأ، وبذلك تُعزل حالات الفشل عن بقية التطبيق.
الأسئلة الشائعة
هل درس «مكوّنات حدود الأخطاء» مجاني؟
نعم — نص درس «مكوّنات حدود الأخطاء» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «مكوّنات حدود الأخطاء»؟
بناء مكوّن غلاف ErrorBoundary مع منفذ fallback وعرض الخطأ تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «مكوّنات حدود الأخطاء»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- خطاف دورة الحياة onErrorCaptured
- مكوّنات حدود الأخطاء
- app.config.errorHandler للأخطاء العامة
- معالجة الأخطاء غير المتزامنة في Composables