app.config.errorHandler للأخطاء العامة
معالج أخطاء عام، وتسجيل الأخطاء في Sentry/Datadog، وعرض الأخطاء وفق البيئة
app.config.errorHandler للأخطاء العامة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
معالج الأخطاء العام
يتيح Vue الخاصية app.config.errorHandler، وهي دالة واحدة تلتقط الأخطاء من أي مكان في التطبيق ما لم تتم معالجتها محليًا. إنها خط دفاعك الأخير.
توقيع المعالج
يتلقى المعالج الوسائط الثلاثة نفسها التي يتلقاها onErrorCaptured: الخطأ، ومثيل المكون، وسلسلة معلومات.
app.config.errorHandler = (err, instance, info) => {
// global handling
};إعداده
اضبطه على مثيل التطبيق في ملف الدخول، قبل تنفيذ عملية التركيب.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");التقاط الأخطاء غير المعالجة
يلتقط الأخطاء الناتجة عن عرض المكونات، وhooks دورة الحياة، وwatchers، ومعالجات الأحداث في جميع أنحاء التطبيق، بما في ذلك الأخطاء التي تجاوزت hooks المحلية الخاصة بـ onErrorCaptured.
إرسال التقارير إلى Sentry في بيئة الإنتاج
في بيئة الإنتاج، أرسل الأخطاء إلى خدمة مراقبة مثل Sentry حتى تعرف حالات الفشل التي يواجهها المستخدمون.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};تسجيل تفاصيل موسعة في بيئة التطوير
أثناء التطوير، سجّل تفاصيل أكثر في وحدة التحكم لتتمكن من تصحيح الأخطاء بسرعة.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};التفرع بحسب البيئة
ينبغي للمعالج المتين أن ينفذ الأمرين معًا: يرسل التقارير في بيئة الإنتاج ويسجل تفاصيل موسعة في بيئة التطوير، وذلك داخل دالة واحدة.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};الأخطاء غير المتزامنة
يلتقط المعالج العام أيضًا الأخطاء التي تُطرح داخل hooks دورة الحياة وwatchers غير المتزامنة. أما بالنسبة إلى حالات رفض الوعود غير المعالجة مباشرة خارج Vue، فأضف مستمعًا لـ window أيضًا.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});العلاقة بالحدود
تعالج الحدود المحلية وonErrorCaptured الأخطاء وتحتويها بالقرب من موضع حدوثها، بينما يعمل المعالج العام كشبكة أمان لكل ما يفلت منها. استخدمهما معًا.
لا تتجاهل الأخطاء بصمت
تجنب استخدام معالج فارغ يخفي الأخطاء. احرص دائمًا على تسجيل الخطأ أو إرسال تقرير عنه على الأقل، فحالات الفشل الصامتة تجعل الأخطاء غير مرئية ومن الصعب جدًا تتبعها.
إضافة السياق
أثرِ التقارير بالمسار الحالي، أو معرّف المستخدم، أو إصدار التطبيق، حتى تتمكن من فرز أخطاء الإنتاج ومعالجتها بسرعة أكبر.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});تحقق سريع
ما الذي يعالجه app.config.errorHandler؟
مراجعة
تعلمت أن app.config.errorHandler = (err, instance, info) => {} هو المعالج العام الشامل: يرسل التقارير إلى Sentry في بيئة الإنتاج، ويسجل التفاصيل أثناء التطوير، ويعمل مع الحدود المحلية لتوفير معالجة أخطاء مرنة ومتعددة الطبقات.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «app.config.errorHandler للأخطاء العامة» مجاني؟
نعم — نص درس «app.config.errorHandler للأخطاء العامة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «app.config.errorHandler للأخطاء العامة»؟
معالج أخطاء عام، وتسجيل الأخطاء في Sentry/Datadog، وعرض الأخطاء وفق البيئة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «app.config.errorHandler للأخطاء العامة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- خطاف دورة الحياة onErrorCaptured
- مكوّنات حدود الأخطاء
- app.config.errorHandler للأخطاء العامة
- معالجة الأخطاء غير المتزامنة في Composables