TypeError: Failed to fetch من أكثر الأخطاء إحباطًا، لأنه ما يقول لك شي. يطلع في Console لما صفحتك تطلب بيانات من سيرفر وما يوصلها رد أصلًا. في Safari يطلع باسم Load failed، وفي Firefox NetworkError when attempting to fetch resource. المعنى واحد: الطلب ما رجع.
ليش ما يقول السبب
المتصفح يخفي التفاصيل عن الكود عن قصد، لأسباب أمنية، فالكود يعرف فقط إن الطلب فشل. لكن المتصفح نفسه يعرف السبب ويكتبه لك في مكانين: سطر ثاني في Console قريب من الخطأ، وعمود Status في تبويب Network. يعني الجواب موجود، لكن مو في رسالة الخطأ.
كيف توصل للسبب في دقيقتين
- افتح F12، ثم Network، وأعد الشي اللي يطلع الخطأ.
- دوّر على الطلب الأحمر، واقرأ عمود Status، أو اضغط عليه وشوف التفاصيل.
- قارن اللي تشوفه بالقائمة تحت.
الأسباب الأشهر، وكيف تعرف كل واحد
- خطأ CORS: في Console سطر فيه
blocked by CORS policy. السيرفر ما سمح لموقعك. شوف خطأ CORS. - الرابط يأشّر على جهاز المطوّر: الطلب رايح لـ
localhostأو127.0.0.1. يشتغل عندك فقط. السبب غالبًا متغير إعدادات ما انضبط في النشر، شوف متغيرات البيئة undefined بعد النشر. - `net::ERR_NAME_NOT_RESOLVED`: الدومين غلط أو ما له وجود. تأكد من الرابط حرف بحرف، وإن الخدمة اللي يطلبها ما انحذفت أو تغيّر رابطها. وإذا الرابط رابط Supabase، تأكد إن المشروع مو موقوف (Paused) من لوحته: المشاريع المجانية توقف بعد 7 أيام بدون نشاط، ورابطها يوقف حتى ترجّعه.
- `net::ERR_CONNECTION_REFUSED` أو انتهاء الوقت: السيرفر طافي أو نايم. والتطبيقات على Replit ممكن تنام، شوف مشاكل Replit.
- `(blocked:mixed-content)`: صفحتك على
httpsوتطلب رابطhttp. شوف Mixed Content. - `net::ERR_BLOCKED_BY_CLIENT`: إضافة في المتصفح، غالبًا مانع إعلانات، منعت الطلب. يصير لما يكون في الرابط كلمات مثل
analyticsأوtrackأوads. عندك يمكن ما يصير، وعند جزء من عملائك يصير. - الطلب انلغى لأن المستخدم انتقل لصفحة ثانية: قبل ما يرجع الرد. هذا عادي، ويكفي إن الكود يتجاهله بدل ما يعرض رسالة خطأ.
اختبار سريع: المشكلة عندك أو عند الكل؟
- افتح الموقع في نافذة خاصة (Incognito) بدون إضافات. إذا اشتغل، المشكلة إضافة في متصفحك.
- إذا الطلب من نوع GET، افتح رابطه نفسه في تبويب جديد. إذا ما فتح، السيرفر هو المشكلة، مو كود الواجهة.
- جرّب من الجوال على بيانات الجوال بدل شبكة المكتب. بعض الشبكات تحجب خدمات معيّنة.
لما يطلع عند بعض العملاء فقط
أصعب حالة: عندك كل شي يشتغل، وعميل يقول «ما يفتح». هنا F12 عندك ما يفيد، لأن الخطأ صار على جهازه هو. اللي يفيد:
- أداة تراقب الأخطاء في المتصفح وترسلها لك، مثل Sentry، مع نوع المتصفح والجهاز والرابط اللي فشل. بعدها تشوف إذا كل الفشل من Safari على iPhone مثلًا، أو من شبكة معيّنة.
- سجل السيرفر في نفس الوقت: إذا الطلب ما وصل السيرفر أبد، المشكلة بين المتصفح والسيرفر (شبكة، أو إضافة، أو DNS). وإذا وصل وأخذ وقت طويل، المشكلة في السيرفر.
- اسأل العميل سؤالين بسيطين: من أي جهاز ومتصفح؟ وعلى واي فاي ولا بيانات الجوال؟
الحل اللي لا تسويه
الاقتراح الشائع: لف الطلب بـ try/catch وإخفاء الخطأ، أو إعادة المحاولة بدون نهاية. الأول يخلّي المستخدم قدام صفحة فاضية ما يعرف إيش صار، والثاني يضغط سيرفرك وقت ما هو أصلًا متعب. الصح: تعرف السبب من Network وتصلّحه، والكود يعرض للمستخدم رسالة واضحة وزر «حاول مرة ثانية»، ويسجّل الخطأ عندك عشان تعرف إنه صار.
تحتاج أحد يشوفه معك؟
إذا الخطأ يطلع عند بعض العملاء فقط وما تقدر تكرره عندك، هذا بالضبط نوع المشكلة اللي تنحل أسرع مع مهندس يشوف السجلات معك في مكالمة استشارية. وإذا الخطأ بدأ بعد النشر بالذات، ابدأ من يشتغل عندك ثم يتعطّل بعد النشر؟.