إزاي أعرف أفرق بين Frontend Bug & Backend Bug ؟

📌 أولاً: خلينا نعرف الفرق بين Frontend و Backend؟
Frontend 🔹 هو الجزء الذي يراه المستخدم ويتفاعل معه، مثل الأزرار، النماذج، الجداول، والصور. يتم تنفيذه باستخدام HTML، CSS، JavaScript.
Backend 🔹 هو الجزء المسؤول عن معالجة البيانات، الاتصال بقاعدة البيانات، وتنفيذ العمليات المنطقية. يستخدم لغات مثل Python، Java، PHP، أو Node.js، ويتواصل مع frontend من خلال API
📌ثانيا: عشان تعرف المشكلة عندك في الفرونت إند ولا الباك إند، فيه خطوات بسيطة ممكن تتبعها، وده بيخليك تحدد السبب بالضبط:

🧐🤔 اسأل نفسك: المشكلة فين؟
👈لو المشكلة حاجة واضحة للمستخدم زي: ا
• الأزرار مش شغالة.
• البيانات مش بتظهر أو التصميم بايظ.
كده احتمال كبير تكون مشكلة في الفرونت إند.
👈لو المشكلة في حاجة زي:
• بيانات بتظهر غلط.
• مفيش استجابة أصلاً من السيستم.
 ممكن تكون في الباك إند.

📌ثالثا:
🛠 أخطاء الـ Frontend
تحدث هذه الأخطاء على مستوى المتصفح (Client-side)، وعادةً تكون بسبب مشاكل في HTML، CSS، أو JavaScript.
🔍 كيف تكتشفها؟
1. افتح (DevTools) في المتصفح
o في Google Chrome أو Edge: اضغط F12 أو Ctrl + Shift + I.
o انتقل إلى علامة Console للبحث عن أخطاء JavaScript.
o انتقل إلى Network لمعرفة إذا كانت الطلبات ترسل بشكل صحيح أم لا.
2. أمثلة على أخطاء الـFrontend
o ❌ أزرار لا تعمل
 السبب: خطأ في JavaScript يمنع تنفيذ الحدث.
 الحل: فتح Console ورؤية إن كان هناك خطأ يمنع تنفيذ الكود.
o ❌ صفحة لا يتم تحديثها بالبيانات الجديدة
 السبب: ربما لم يتم جلب البيانات بشكل صحيح بسبب خطأ في عرضها.
 الحل: التحقق من الـ API في Network Tab لمعرفة إن كان الرد سليمًا واذا كانت الـ API تعرض الرد بشكل سليم فهنا ستكون مشكلة Frontend
o ❌ تصميم غير متناسق أو مكسور
 السبب: مشاكل في CSS أو عدم تحميل المكتبات الصحيحة.
 الحل: التحقق من Console لمعرفة إن كان هناك أخطاء في تحميل الملفات.
________________________________________
⚙ أخطاء الـBackend
تحدث هذه الأخطاء على مستوى السيرفر (Server-side)، وعادةً تكون بسبب مشاكل في API، قاعدة البيانات، أو الخادم نفسه.
🔍 كيف تكتشفها؟
1. افتح DevTools وانتقل إلى تبويب Network
o ابحث عن الطلبات التي يتم إرسالها إلى الخادم.
o تحقق مما إذا كانت هناك أخطاء HTTP مثل:
 500 (Internal Server Error) → خطأ في الكود البرمجي في السيرفر.
 404 (Not Found) → لم يتم العثور على المسار المطلوب في API.
 401 →أو 403 Unauthorized أو Forbidden مشكلة في الصلاحيات أو المصادقة.
 400 (Bad Request) → الطلب المرسل غير صحيح أو البيانات ناقصة.
2. استخدم Postman لاختبار API مباشرةً
o إذا أرسلت نفس الطلب عبر Postman وحصلت على خطأ، فهذا يعني أن المشكلة في الـBackend.
o إذا عملت API في Postman ولكن لم تعمل في المتصفح، فهذا يشير إلى مشكلة في الـFrontend.
3. أمثلة على أخطاء الـBackend
o ❌ البيانات لا تظهر في التطبيق رغم أن الطلب أُرسل بنجاح.
 السبب: ربما لم يُرجع السيرفر بيانات صحيحة.
 الحل: فحص استجابة الـAPI في Postman.
o ❌ خطأ 500 عند محاولة تسجيل الدخول
 السبب: خطأ في قاعدة البيانات أو في منطق المصادقة بالسيرفر.
 الحل: مراجعة سجل الأخطاء (Logs) في السيرفر وتحليل المشكلة.
o ❌ استجابة بطيئة جدًا عند تحميل الصفحة
 السبب: استعلامات بطيئة في قاعدة البيانات أو مشكلة في السيرفر.
 الحل: تحسين الاستعلامات وتحليل أداء السيرفر باستخدام أدوات مثل APM (Application Performance Monitoring).
🎯 خلاصة
• إذا كان الخطأ يظهر في Console أو التصميم مكسور المشكلة في Frontend.
• إذا لم يتم جلب البيانات أو هناك خطأ في Network تحقق من Backend.
• إذا كان الطلب يعمل في Postman ولكن لا يعمل في التطبيق المشكلة في Frontend.
• إذا كان الطلب يعطي خطأ في Postman المشكلة في Backend.
• إذا اكان جمع رقمين وليكن (2+2) إذا الناتج راجع 6 فكده هرجع للـ API
 إذا كان الـ API مرجع 4  المشكلة في Frontend.
 إذا كان الـ API مرجع 6  المشكلة في Backend.
 إذا كان الـ API مرجع 8 يعني لا 4 زي الصح ولا 6 زي المعروض  المشكلة مشتركة بين الـ Front و Back