إزاي تقرأ رسالة الخطأ في JavaScript من غير ما تتخض

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

اقرا الرسالة من الآخر للأول

رسالة الخطأ في المتصفح بتيجي في سطرين مهمين:

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at showUser (app.js:42:18)

• السطر التاني (at ...): فين المشكلة بالظبط — ملف، رقم سطر، رقم عمود.
• السطر الأول: نوع المشكلة ووصفها.

ابدأ من السطر التاني دائمًا. مكان الخطأ أهم من وصفه، لأن الوصف أحيانًا مضلّل.

أشهر ٥ رسائل ومعناها الحقيقي

1. Cannot read properties of undefined → بتقرا خاصية من حاجة مش موجودة. يعني العنصر اللي بتدور عليه مش موجود في الصفحة، أو الدالة رجّعت undefined.
2. is not a function → الاسم موجود لكن مش دالة. غالبًا غلطة كتابة، أو الحاجة لسه ماتحمّلتش.
3. X is not defined → الاسم مش معرّف أصلًا. يا إما ناسي تعرّفه، يا إما خارج نطاق الاستخدام (scope).
4. Unexpected token → خطأ صياغة: قوس ناقص، أو فاصلة زيادة، أو علامة تنصيص مش مقفولة.
5. Failed to fetch → الطلب نفسه فشل: مسار غلط، أو CORS، أو نت مقطوع. مش خطأ في الكود.

أدوات بتوفر ساعات

• console.log — مش عيب. حط طباعة قبل السطر المشكوك فيه وشوف القيم الحقيقية بدل التخمين.
• debugger; — سطر واحد بيوقف التنفيذ في المتصفح، وتقدر تمشي خطوة خطوة وتشوف كل متغير.
• Network tab — لأخطاء الطلبات. لو fetch فشل، هنا السبب الحقيقي (كود الحالة والرد).

القاعدة اللي بتفرق

لو مش عارف تقرا الخطأ — اقرا السطر اللي قبله. ٨٠٪ من الأخطاء سببها سطر اتنفّذ قبل الخطأ بخطوة، مش الخطأ نفسه.

ودرّب نفسك على حاجة: كل مرة تحل خطأ، اكتب في سطر واحد إيه السبب الحقيقي. بعد شهر هتلاقي نفسك بتعرف ٩٠٪ منهم من أول نظرة — وده الفرق بين مبتدئ ومحترف، مش عدد اللغات اللي يعرفها.