Chrome काम कर रहा था। Firefox विफल रहा।
मैंने दो ब्राउज़रों में एक ही पेज को अगल-बगल देखा।
Chrome में: पेज बिल्कुल सही काम कर रहा था। इसमें इमेज, बटन और परिणामों की पूरी सूची थी।
Firefox में: पेज खाली था। इसमें बिना इमेज वाले प्लेसहोल्डर कार्ड्स और '0 results found' का मैसेज दिख रहा था।
कोड वही था। URL भी वही था। सर्वर भी ठीक था।
समस्या ब्राउज़र में थी।
Firefox 'Enhanced Tracking Protection' का उपयोग करता है। कई उपयोगकर्ता uBlock Origin जैसे टूल्स का भी उपयोग करते हैं। ये टूल्स उन डोमेन के लिए रिक्वेस्ट को ब्लॉक कर देते हैं जिन्हें वे ट्रैकर समझते हैं।
मेरा ऐप Supabase डोमेन से डेटा फेच (fetch) कर रहा था। Firefox के लिए, वह डोमेन एक थर्ड-पार्टी ट्रैकर जैसा लग रहा था। ब्राउज़र ने रिक्वेस्ट को मशीन से बाहर निकलने से पहले ही ब्लॉक कर दिया।
क्योंकि फेच (fetch) विफल रहा, मेरे कोड ने फॉलबैक स्टेट (fallback state) दिखाई। यह क्रैश नहीं हुआ। इसने कंसोल में कोई एरर भी नहीं दिखाया। इसने बस एक खाली पेज दिखाया।
इससे एक डबल ब्लाइंड स्पॉट (double blind spot) पैदा हो गया:
- मेरा डेवलपमेंट ब्राउज़र (Chrome) बिल्कुल सही काम कर रहा था। मैंने कभी बग देखा ही नहीं।
- मेरे एनालिटिक्स भी उसी डोमेन का उपयोग कर रहे थे। जिन उपयोगकर्ताओं को कंटेंट नहीं दिख रहा था, उन्हें ट्रैक भी नहीं किया जा सका। वे अदृश्य थे।
मैंने थर्ड-पार्टी रिक्वेस्ट से फर्स्ट-पार्टी रिक्वेस्ट पर स्विच करके इसे ठीक किया।
वेंडर डोमेन को सीधे कॉल करने के बजाय, मैंने एक रिवर्स प्रॉक्सी (reverse proxy) का उपयोग किया। मैंने API को अपने स्वयं के डोमेन के माध्यम से रूट किया।
पहले: mysite.com xxxx.supabase.co को कॉल करता है (Blocked) बाद में: mysite.com mysite.com/sb-api को कॉल करता है (Trusted)
अब, ब्राउज़र इसे 'सेम-ओरिजिन रिक्वेस्ट' (same-origin request) के रूप में देखता है। यह डेटा कॉल को साइट के ही एक हिस्से की तरह मानता है।
यदि आप ऐसी ही समस्याओं का सामना करते हैं, तो इन तीन बातों को याद रखें:
• अपने websockets पर ध्यान दें। साधारण पाथ रीराइट्स (path rewrites) रियलटाइम कनेक्शन को तोड़ सकते हैं। • अपनी auth storage keys को पिन करें। URL बदलने से ब्राउज़र द्वारा लॉगिन सेशन स्टोर करने का तरीका बदल सकता है। • अपने कंटेंट को प्रिरेंडर (Prerender) करें। अपने पेज को पूरी तरह से JavaScript पर निर्भर न रहने दें। यदि ब्राउज़र आपके स्क्रिप्ट को ब्लॉक कर देता है, तो उपयोगकर्ता को HTML में मुख्य कंटेंट फिर भी दिखना चाहिए।
यह मानना बंद करें कि अगर यह Chrome में काम कर रहा है, तो यह सबके लिए काम करेगा। प्राइवेसी एक्सटेंशन चालू रखकर टेस्ट करें।