Chrome عمل بشكل صحيح. Firefox كان فارغاً.
رأيت خطأً برمجياً غريباً. فتحت نفس الصفحة في متصفحين جنباً إلى جنب.
في Chrome، كان كل شيء يعمل. رأيت الصور، والأزرار، والبيانات. في Firefox، لم أرَ شيئاً. رأيت بطاقات فارغة ورسالة تقول "0 results found."
كان نفس الرابط (URL). كان نفس الإصدار (build). كانت نفس الجهاز.
كان السبب خطأً برمجياً يكاد يكون من المستحيل اكتشافه أثناء عملية التطوير. كان المتصفح يحظر استدعاءات الـ API الخاصة بي. لقد كنت أطور باستخدام المتصفح الوحيد الذي لم يحظرها.
المشكلة:
- تستخدم الصفحة JavaScript لجلب البيانات من نطاق طرف ثالث (Supabase).
- يستخدم Firefox ميزة "Enhanced Tracking Protection" (حماية التتبع المحسنة).
- يستخدم العديد من المستخدمين أيضاً أدوات حظر الإعلانات مثل uBlock Origin.
- ترى هذه الأدوات نطاق الطرف الثالث وتقوم بحظر الطلب قبل أن يغادر الجهاز حتى.
لم يتوقف الكود عن العمل (crash). ولم يظهر خطأ أحمر في وحدة التحكم (console). ببساطة، لم تُرجع عملية الـ fetch أي شيء. عندها قام الكود الخاص بي بعرض "حالة فارغة" (empty state) كخيار بديل كما هو مبرمج. بالنسبة للمراقب العادي، بدت الصفحة طبيعية، لكنها بدت فارغة فقط.
كان هذا الخطأ غير مرئي لسببين:
- طورت المشروع في Chrome، الذي سمح بالاستدعاء.
- استخدمت تحليلاتي (analytics) نفس نطاق الـ API. المستخدمون الذين لم يتمكنوا من رؤية المحتوى لم يتم احتسابهم أيضاً في بياناتي.
كيف قمت بإصلاحه:
استخدمت وكيلًا عكسيًا (reverse proxy) لنقل الطلب إلى الجانب الموثوق.
بدلاً من: mysite.com -> xxxx.supabase.co (طرف ثالث / محظور)
انتقلت إلى: mysite.com -> mysite.com/sb-api (طرف أول / موثوق)
من خلال توجيه الـ API عبر نطاقي الخاص، يعتقد المتصفح أن الطلب جزء من الموقع نفسه. لم يعد Firefox يراه كأداة تتبع.
ثلاثة أشياء يجب تذكرها إذا استخدمت هذه الطريقة:
- تحقق من الـ websockets الخاصة بك. قد تؤدي عمليات إعادة الكتابة البسيطة إلى تعطل ميزات الوقت الفعلي (real-time).
- قم بتثبيت مفتاح تخزين المصادقة (auth storage key). تغيير الرابط قد يغير طريقة تخزين المتصفح لجلسات تسجيل الدخول.
- اجعل استدعاءات جانب الخادم (server-side) مباشرة. لست بحاجة إلى وكيل (proxy) للكود الذي لا يعمل في المتصفح.
الدرس المستفاد: توقف عن افتراض أنه "إذا كان يعمل في Chrome، فهو يعمل".
اختبر موقعك في Firefox مع إعدادات خصوصية صارمة وأداة حظر إعلانات. تلك هي نقطة الضعف الحقيقية لديك.