Vue Academy · درس

خطاف دورة الحياة onErrorCaptured

التقاط الأخطاء من المكوّنات الابنة، وإرجاع false لإيقاف الانتشار، والتعامل مع كائنات الأخطاء

خطاف دورة الحياة onErrorCaptured درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

التقاط الأخطاء في المكوّنات

يوفر Vue خطاف دورة الحياة onErrorCaptured لالتقاط الأخطاء التي تطرحها المكوّنات التابعة. ويسمح للمكوّن الأب باعتراض حالات الفشل في شجرته الفرعية.

توقيع الخطاف

يستقبل onErrorCaptured ثلاث وسائط: الخطأ، ومثيل المكوّن الذي طرحه، وسلسلة info التي تصف موضع حدوثه.

import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
  // handle it
});

المعامل err

المعامل الأول هو كائن الخطأ المطروح، وعادةً ما يكون مثيلًا من Error يتضمن رسالة ومسارًا زمنيًا يمكنك تسجيله أو عرضه.

onErrorCaptured((err) => {
  console.error("Captured:", err.message);
});

المعامل instance

المعامل الثاني هو مثيل المكوّن الذي تسبب في الخطأ، وهو مفيد لتصحيح الأخطاء أو لإضافة سياق إلى تقاريرك.

onErrorCaptured((err, instance) => {
  console.log("From component:", instance);
});

المعامل info

المعامل الثالث سلسلة تخبرك بدورة الحياة أو العملية التي تسببت في الخطأ، مثل "render function" أو "setup function" أو خطاف محدد.

onErrorCaptured((err, instance, info) => {
  console.log("Vue context:", info);
});

أخطاء المكوّنات التابعة فقط

من المهم أن onErrorCaptured يلتقط الأخطاء من المكوّنات التابعة، وليس من setup أو render الخاصين بالمكوّن نفسه. ضع الخطاف في مكوّن سلف للشيفرة التي تريد حمايتها.

إيقاف الانتشار

ينتشر الخطأ الملتقط افتراضيًا إلى معالجات الأسلاف وإلى المعالج العام. أعد false لمنع انتقاله إلى مستويات أعلى.

onErrorCaptured((err) => {
  reportError(err);
  return false; // do not propagate
});

لماذا نوقف الانتشار

يؤدي إرجاع false إلى احتواء الخطأ محليًا، وهو أمر مفيد عندما يعالج هذا المكوّن الفشل بالكامل (مثل عرض بديل) ولا يريد تشغيل المعالج العام أيضًا.

السماح بانتشار الخطأ

إذا أردت أن ترى المعالجات الأعلى مستوى، أو المعالج العام، الخطأ أيضًا، فلا تُعد false. عندها يسجّل الخطاف الخطأ محليًا ويسمح له بالاستمرار إلى الأعلى.

onErrorCaptured((err) => {
  logLocally(err);
  // no return -> still propagates
});

استخدام عملي

من الاستخدامات الشائعة الجمع بين التسجيل وراية للتعافي. اضبط راية تفاعلية لعرض محتوى بديل، مع الإبلاغ عن الخطأ لأغراض التشخيص.

const failed = ref(false);
onErrorCaptured((err) => {
  failed.value = true;
  report(err);
  return false;
});

ملاحظات حول العمليات غير المتزامنة

يلتقط onErrorCaptured الأخطاء في عرض المكوّنات التابعة، وفي دورة الحياة، وفي المعالجات المتزامنة. أما بعض الأخطاء غير المتزامنة (مثل حالات رفض الوعود غير المعالَجة) فمن الأفضل معالجتها على المستوى العام، وهو ما سنغطيه لاحقًا.

اختبار سريع

ماذا يفعل إرجاع false من onErrorCaptured؟

مراجعة

تعلّمت أن onErrorCaptured((err, instance, info)) يلتقط الأخطاء من المكوّنات التابعة. وتوفر سلسلة info سياقًا عن دورة الحياة، بينما يوقف إرجاع false انتشار الخطأ حتى يتمكن المكوّن من معالجة الفشل محليًا.

الأسئلة الشائعة

هل درس «خطاف دورة الحياة onErrorCaptured» مجاني؟

نعم — نص درس «خطاف دورة الحياة onErrorCaptured» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «خطاف دورة الحياة onErrorCaptured»؟

التقاط الأخطاء من المكوّنات الابنة، وإرجاع false لإيقاف الانتشار، والتعامل مع كائنات الأخطاء تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «خطاف دورة الحياة onErrorCaptured»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

خطاف دورة الحياة onErrorCaptured
مكوّنات حدود الأخطاء
‏app.config.errorHandler للأخطاء العامة
معالجة الأخطاء غير المتزامنة في Composables

← العودة إلى Vue Academy