كل مبرمج يكتب أخطاء برمجية كل يوم. وما يميّز المطوّرين ذوي الخبرة عن المبتدئين ليس قلّة الأخطاء، بل طريقة أهدأ وأسرع في العثور عليها. وهذا يبدأ بقراءة ما يقوله لك الحاسوب.
\nحين تعجز JavaScript عن الاستمرار، فإنها ترمي (throw) خطأً، وإن لم يلتقطه شيء، يعرض الـ console شيئًا كهذا:
\nUncaught TypeError: Cannot read properties of undefined (reading 'amount')\n at totalCents (expenses.js:12:31)\n at renderSummary (ui.js:40:17)\n at HTMLFormElement.<anonymous> (main.js:27:5)اقرأه في ثلاثة أجزاء. النوع، TypeError، يقول ما صنف المشكلة: قيمة كان نوعها خاطئًا بالنسبة لما فعلته بها. والرسالة تقول ماذا بالضبط: شيء ما قبل .amount كان undefined. وأثر المكدّس (stack trace) يسرد سلسلة استدعاءات الدوال التي أوصلت إلى هناك، الأحدث أولًا: فشلت totalCents في السطر 12 من expenses.js، وكانت قد استدعتها renderSummary، التي استدعاها معالج الإرسال في النموذج. وفي DevTools، كل موقع منها رابط يأخذك مباشرة إلى ذلك السطر.
الأنواع التي ستصادفها أكثر من غيرها:
\n| النوع | \nيعني عادةً | \n
|---|---|
ReferenceError | \nاسم غير موجود: خطأ إملائي، أو استخدام قبل التصريح | \n
TypeError | \nنوع خاطئ من القيم: استدعاء شيء ليس دالة، أو القراءة من undefined | \n
SyntaxError | \nتعذّر تحليل الكود: قوس أو علامة تنصيص أو فاصلة مفقودة | \n
RangeError | \nرقم خارج المسموح، مثل toFixed(200) | \n
يمكنك أن ترمي الأخطاء بنفسك، وينبغي أن تفعل حين يُعطى كودك شيئًا لا يستطيع التعامل معه بشكل معقول:
\nfunction parseAmount(text) {\n const dollars = Number(text);\n if (text.trim() === \"\" || !Number.isFinite(dollars) || dollars <= 0) {\n throw new Error(`Invalid amount: \"${text}\"`);\n }\n return Math.round(dollars * 100);\n}\n\ntry {\n console.log(parseAmount(\"12.20\"));\n console.log(parseAmount(\"twelve\"));\n console.log(\"this line never runs\");\n} catch (error) {\n console.log(\"Caught:\", error.message);\n} finally {\n console.log(\"finally always runs\");\n}throw توقف الدالة فورًا وتصعد في مكدّس الاستدعاءات حتى تلتقطها كتلة try/catch ما. وإن لم تلتقطها أي كتلة، تصبح خطأً غير ملتقط في الـ console. أما finally فتُنفَّذ سواء رُمي شيء أم لا، وهي المكان المناسب للتنظيف، مثل إخفاء مؤشّر التحميل.
بعض الأخطاء متوقّعة، مثل أن يكتب المستخدم مبلغًا غير صالح؛ وبعضها أخطاء برمجية. ويحتاج المُستدعون إلى التمييز بينها، وصنف الخطأ المخصّص يجعل ذلك ممكنًا:
\nclass ValidationError extends Error {\n constructor(field, message) {\n super(message);\n this.name = \"ValidationError\";\n this.field = field;\n }\n}\n\nfunction addFromForm(label, amountText) {\n if (label.trim() === \"\") {\n throw new ValidationError(\"label\", \"Enter what you spent money on.\");\n }\n return { label: label.trim(), amount: Math.round(Number(amountText) * 100) };\n}\n\ntry {\n addFromForm(\" \", \"4.50\");\n} catch (error) {\n if (error instanceof ValidationError) {\n console.log(`Show next to ${error.field}: ${error.message}`);\n } else {\n throw error; // not ours to handle\n }\n}extends Error تجعل ValidationError نوعًا من Error له أثر مكدّس، وsuper(message) تنفّذ الـ constructor الخاص بالصنف الأب، والخاصية الإضافية field تخبر النموذج أين يعرض الرسالة. وكتلة catch لا تتعامل إلا مع ما تفهمه، وتعيد رمي كل ما عداه، فتظل الأخطاء البرمجية الحقيقية تطفو إلى السطح.
console.log أداة أولى جيدة، لكنها لا تُريك إلا ما خطر لك أن تطبعه. أما مصحّح الأخطاء (debugger) في DevTools فيوقف برنامجك مؤقتًا عند سطر ما ويُريك كل شيء.
في Chrome أو Edge، افتح DevTools، واذهب إلى لوحة Sources، وافتح ملفك، وانقر على رقم سطر. هذا يضع نقطة توقّف (breakpoint). وفي المرة التالية التي يوشك فيها هذا السطر أن يُنفَّذ، يتوقّف كل شيء مؤقتًا، وتستطيع:
\nانقر بالزر الأيمن على رقم سطر لتضيف نقطة توقّف مشروطة، مثل expense.amount > 100000، لا تتوقّف إلا حين يكون الشرط صحيحًا. ويمكنك أيضًا أن تكتب التعليمة debugger; في كودك: فحين تكون DevTools مفتوحة، يتوقّف التنفيذ هناك. احذفها قبل أن تُجري commit.
والإغراء، خاصة حين تكون متعبًا، هو القفز مباشرة إلى تغيير الكود حتى يختفي العَرَض. وهذا يُنتج عادةً خطأً ثانيًا. عشر دقائق من النظر في القيم الحقيقية خير من ساعة من التخمين.
\nصار لديك الآن كل قطعة يحتاجها Pocket. وفي الدرس التالي تجمعها في التطبيق المكتمل.
\n","toc":[{"id":"sec-1","text":"قراءة الخطأ","level":2},{"id":"sec-2","text":"رمي الأخطاء عن قصد","level":2},{"id":"sec-3","text":"أنواع أخطاء مخصّصة","level":3},{"id":"sec-4","text":"مصحّح الأخطاء: توقّف وانظر","level":2},{"id":"sec-5","text":"طريقة تصلح لكل خطأ","level":2}],"takeaways":["رسالة الخطأ تسمّي نوع الخطأ، وتقول ما الذي حدث، وأثر المكدّس (stack trace) الخاص بها يشير إلى الملف والسطر حيث وقع.","ارمِError حين يعجز كودك عن الاستمرار بشكل معقول؛ والتقطه فقط حيث تستطيع فعل شيء مفيد، وأعِد رمي كل ما لم تتوقّعه.","صنف خطأ مخصّص (class ValidationError extends Error) يتيح للمُستدعين التمييز بين المشاكل المتوقّعة والأخطاء البرمجية الحقيقية باستخدام instanceof.","نقطة التوقّف (breakpoint) توقف كودك مؤقتًا عند سطر ما كي تفحص كل متغيّر وتتقدّم فيه سطرًا سطرًا؛ وdebugger; تضع واحدة من داخل الكود.","صحّح الأخطاء بالأدلة لا بالتخمين؛ أعِد إنتاج الخطأ، وجد أول سطر يختلف فيه الواقع عن توقّعك، ثم أصلحه."],"further":[{"title":"Control flow and error handling (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling"},{"title":"What went wrong? Troubleshooting JavaScript (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong"},{"title":"Error (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error"}],"quiz":[{"q":"TypeError: expenses.map is not a function عند renderExpenses (ui.js:14). ما الخطوة الأولى الأنفع؟
try/catch كي تظل الصفحة تعمل.","why":"هذا يُخفي العَرَض ويترك السبب. وستتوقّف القائمة عن العرض بصمت."},{"text":"أعِد كتابة renderExpenses بحلقة for بدلًا من map.","why":"الحلقة ستفشل أيضًا، أو ستتصرّف بغرابة. السؤال الحقيقي هو ما الذي تكونه expenses فعلًا."},{"text":"أعِد تشغيل خادم التطوير وامسح ذاكرة التخزين المؤقت في المتصفّح.","why":"الرسالة تصف مشكلة منطقية، قيمة من نوع خاطئ، لا ملفًا قديمًا."},{"text":"توقّف عند السطر 14 من ui.js وافحص ما تحمله expenses فعلًا، ثم تتبّع مصدر تلك القيمة.","why":"صحيح. map مفقودة، إذن expenses ليست مصفوفة، ربما null قادمة من التخزين أو كائن. اكتشف أيّهما، ثم أصلح المصدر."}],"answer":3},{"q":"كتلة catch في دالة الحفظ في Pocket مكتوبة هكذا: catch (error) {}. ما المشكلة؟
error دائمًا وإلا فلن يعمل الكود.","why":"المعامل غير المستخدم مسموح. بل يمكنك كتابة catch {}. المشكلة في التخلّص من الأخطاء بصمت."},{"text":"كتل catch لا تعمل إلا داخل دوال async.","why":"try/catch تعمل في أي دالة. ومع الكود غير المتزامن عليك فقط أن تستخدم await داخل try."}],"answer":0},{"q":"تريد أن تعرف لماذا يكون المجموع خاطئًا فقط عند المصروف رقم 40 في حلقة. أيّ ميزة في DevTools أنسب؟
","options":[{"text":"console.log قبل الحلقة.","why":"هذا يُنفَّذ مرة واحدة، قبل الجزء المهم. ولا يستطيع أن يُريك الدورة الأربعين."},{"text":"لوحة Network.","why":"لوحة Network تعرض الطلبات إلى الخوادم. وهذه عملية حسابية داخل كودك أنت."},{"text":"نقطة توقّف مشروطة داخل الحلقة، مثل i === 39.","why":"صحيح. يتوقّف مصحّح الأخطاء في تلك الدورة فقط، وتستطيع فحص كل متغيّر في تلك اللحظة."},{"text":"إعادة تحميل الصفحة مع تعطيل ذاكرة التخزين المؤقت.","why":"التخزين المؤقت لا يغيّر طريقة تنفيذ عملية حسابية. تحتاج إلى النظر في القيم أثناء الحلقة."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// 1. An error type for problems the user can fix\nclass ValidationError extends Error {\n constructor(field, message) {\n super(message);\n // set name and field here\n }\n}\n\n// 2. Return whole cents, or throw a ValidationError for the \"amount\" field\nfunction parseAmount(text) {\n return Math.round(Number(text) * 100);\n}\n\n// 3. Return { ok: true, list } with the new expense added, or\n// { ok: false, field, message } for a ValidationError.\n// Any other error must NOT be swallowed.\nfunction tryAdd(list, label, amountText) {\n try {\n const expense = { label: label.trim(), amount: parseAmount(amountText) };\n return { ok: true, list: [...list, expense] };\n } catch (error) {\n return { ok: false };\n }\n}\n\nconsole.log(tryAdd([], \"Tea\", \"abc\"));\n"},"solution":{"js":"class ValidationError extends Error {\n constructor(field, message) {\n super(message);\n this.name = \"ValidationError\";\n this.field = field;\n }\n}\n\nfunction parseAmount(text) {\n const dollars = Number(text);\n if (text.trim() === \"\" || !Number.isFinite(dollars) || dollars <= 0) {\n throw new ValidationError(\"amount\", \"Enter an amount greater than zero.\");\n }\n return Math.round(dollars * 100);\n}\n\nfunction tryAdd(list, label, amountText) {\n try {\n if (label.trim() === \"\") {\n throw new ValidationError(\"label\", \"Enter what you spent money on.\");\n }\n const expense = { label: label.trim(), amount: parseAmount(amountText) };\n return { ok: true, list: [...list, expense] };\n } catch (error) {\n if (error instanceof ValidationError) {\n return { ok: false, field: error.field, message: error.message };\n }\n throw error;\n }\n}\n\nconsole.log(tryAdd([], \"Tea\", \"abc\"));\n"},"checks":[{"id":"error-class","test":"const e = new ValidationError('amount', 'Bad');\nreturn e instanceof Error && e.name === 'ValidationError' && e.field === 'amount' && e.message === 'Bad';\n"},{"id":"parse-ok","test":"return parseAmount('4.10') === 410 && parseAmount(' 12 ') === 1200;\n"},{"id":"parse-throws","test":"const bad = ['', ' ', 'abc', '0', '-5', 'Infinity'];\nreturn bad.every((t) => { try { parseAmount(t); return false; } catch (e) { return e instanceof ValidationError && e.field === 'amount'; } });\n"},{"id":"try-add-ok","test":"const r = tryAdd([{ label: 'Bus', amount: 270 }], ' Tea ', '3');\nreturn r.ok === true && r.list.length === 2 && r.list[1].label === 'Tea' && r.list[1].amount === 300;\n"},{"id":"try-add-invalid","test":"const a = tryAdd([], 'Tea', 'abc');\nconst b = tryAdd([], ' ', '3');\nreturn a.ok === false && a.field === 'amount' && typeof a.message === 'string' && a.message.length > 0 && b.ok === false && b.field === 'label';\n"},{"id":"rethrows","test":"try { tryAdd(null, 'Tea', '3'); return false; } catch (e) { return e instanceof TypeError; }\n"}],"title":"ارمِ ما يستطيع المستخدمون إصلاحه، وأعِد رمي الباقي","prompt":"ValidationError بحيث تكون قيمة name في الـ instances هي "ValidationError"، وتكون لها خاصية field.parseAmount(text) تُرجع سنتات صحيحة، أو ترمي ValidationError بالحقل "amount" حين يكون النص فارغًا، أو ليس رقمًا منتهيًا، أو ليس أكبر من 0.tryAdd(list, label, amountText). مع الإدخال الصالح تُرجع { ok: true, list } وقد أُضيف إليها المصروف الجديد (بتسمية مشذّبة، والمبلغ بالسنتات). والتسمية الفارغة ترمي ValidationError بالحقل "label". وأخطاء التحقّق تتحوّل إلى { ok: false, field, message }. وأي خطأ آخر يجب أن يُعاد رميه، لا أن يُبتلع.super(message): this.name = "ValidationError"; this.field = field;.","Number("") تساوي 0 وNumber("Infinity") تساوي Infinity، لذلك افحص text.trim() === "" وNumber.isFinite(dollars) && dollars > 0.","في الـ catch: if (error instanceof ValidationError) { return { ok: false, field: error.field, message: error.message }; } throw error;."],"explanation":"يرث ValidationError من Error، فيحتفظ برسالة وأثر مكدّس، ويضيف الحقل field الذي يحتاجه النموذج لوضع الرسالة. وترمي parseAmount خطأً بدلًا من إرجاع قيمة خاصة، فلا يستطيع المُستدعون معاملة مبلغ غير صالح على أنه رقم عن طريق الخطأ. وفي tryAdd، تفحص catch الشرط instanceof ValidationError ولا تحوّل إلى نتيجة ودودة إلا هذه الأخطاء؛ أما أي شيء آخر، مثل الـ TypeError الناتج عن نشر null، فهو خطأ برمجي في الكود المُستدعي، فيُعاد رميه كي يظهر في الـ console بدلًا من أن يختفي.
ValidationError هو Error له name وfield","parse-ok":"parseAmount تُرجع سنتات صحيحة مع النص الصالح","parse-throws":"parseAmount ترمي ValidationError مع المدخلات الفارغة أو غير الرقمية أو الصفرية أو السالبة أو اللانهائية","try-add-ok":"tryAdd تضيف المصروف الصالح","try-add-invalid":"tryAdd تُرجع { ok: false, field, message } مع المدخلات غير الصالحة","rethrows":"tryAdd تعيد رمي الأخطاء التي ليست من نوع ValidationError"}},"words":664,"readMinutes":4}