تصحيح هذه الأخطاء

يعتقد المبتدئون أن المطورين ذوي الخبرة لا يرتكبون الأخطاء.

الحقيقة مختلفة.

المطورون ذوو الخبرة يكتشفون الأخطاء ويصلحونها بشكل أسرع فحسب.

لقد قمت مؤخرًا ببناء تطبيق كامل (full-stack) لإدارة المشاريع باستخدام React و Zustand و Express و Prisma و PostgreSQL. واجهت عشرات الأخطاء البرمجية الصغيرة، وقد علمتني هذه الأخطاء كيفية عمل تطبيقات الواجهة الأمامية (frontend) الحديثة.

إليك الدروس التي تعلمتها:

  • React useEffect و Async لا يمكنك تمرير دالة async مباشرة إلى useEffect. يتوقع React دالة تنظيف (cleanup function) أو لا شيء. دالة async تعيد Promise مما يكسر هذه القاعدة. استخدم دالة داخل الـ effect بدلاً من ذلك.

  • الدالة المنسية كتبت ذات مرة دالة async داخل useEffect ولكنني لم أقم باستدعائها فعليًا. تم تحميل المكون (component mounted)، ولكن لم يحدث شيء. أحيانًا تكون الأخطاء مجرد استدعاءات مفقودة للدوال.

  • هيكل بيانات Axios تعيد Axios كائنًا (object). بياناتك موجودة داخل response.data. إذا حاولت حفظ الاستجابة (response) بالكامل في الحالة (state) الخاصة بك، فسيفشل تطبيقك.

  • تكرار الروابط (URL Duplication) كان لدى مثيل (instance) Axios الخاص بي رابط أساسي (base URL). قمت بإضافة بادئة الـ API مرة أخرى في طلباتي، مما أدى إلى إنشاء مسارات مزدوجة مثل /api/api/projects. تحقق دائمًا من التجريدات (abstractions) التي تستخدمها.

  • أخطاء التنقل (Navigation Errors) يعمل مكون Navigate فقط أثناء عملية التصيير (rendering). إذا كنت تريد نقل المستخدم بعد النقر، فاستخدم useNavigate hook بدلاً من ذلك.

  • عقود الخلفية (Backend Contracts) أرسلت الخلفية (backend) خاصية باسم accessToken. بينما بحثت الواجهة الأمامية (frontend) عن خاصية باسم token. ولأن الأسماء لم تتطابق، ظلت حالة المصادقة (auth state) غير معرفة (undefined). يجب أن تستخدم الواجهة الأمامية والخلفية دائمًا نفس الأسماء.

  • مشكلات التوقيت (Timing Issues) حاول تطبيقي جلب الإشعارات قبل تسجيل دخول المستخدم، مما تسبب في خطأ 401. لم يكن الحل هو عدم التحقق من الإشعارات، بل التحقق من المصادقة (authentication) قبل إجراء الطلب.

كان الدرس الأكبر يتعلق بسير عملي (workflow). توقف عن التخمين.

استخدم هذه العملية بدلاً من ذلك:

  • تحقق من وحدة تحكم المتصفح (browser console).
  • تحقق من علامة تبويب الشبكة (Network tab).
  • افحص استجابة الـ API.
  • تحقق من عقد الخلفية (backend contract).
  • افحص الحالة (state) الخاصة بك.
  • تتبع البيانات من قاعدة البيانات وصولاً إلى واجهة المستخدم (UI).

البرمجيات لا تتعلق بالكتابة السريعة، بل تتعلق بفهم كيفية انتقال البيانات. الدروس التعليمية (Tutorials) تريك المسار السهل، أما المشاريع فتعلمك المسار الحقيقي.

ابنِ شيئًا حقيقيًا. فالأخطاء ستعلمك أكثر من أي درس تعليمي.

المصدر: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5