Chrome मध्ये काम झाले. Firefox मध्ये काहीच दिसत नव्हते.
मला एक विचित्र बग (bug) आढळला. मी एकाच वेळी दोन ब्राउझरमध्ये तीच पेज बाजूला-बाजूला उघडली.
Chrome मध्ये सर्व काही व्यवस्थित चालले होते. मला चित्रे, बटणे आणि डेटा दिसत होता. Firefox मध्ये मला काहीच दिसत नव्हते. मला फक्त रिकामे कार्ड्स आणि "0 results found" असा संदेश दिसत होता.
URL तीच होती. Build तीच होती. मशीन सुद्धा तेच होते.
याचे कारण असा एक बग होता जो डेव्हलपमेंट दरम्यान शोधणे जवळजवळ अशक्य आहे. ब्राउझर माझ्या स्वतःच्या API कॉल्सना ब्लॉक करत होता. मी फक्त अशा ब्राउझरमध्ये डेव्हलपमेंट केले होते ज्याने त्यांना ब्लॉक केले नव्हते.
समस्या: पेज तिसऱ्या पक्षाच्या डोमेनवरून (Supabase) डेटा मिळवण्यासाठी JavaScript वापरते. Firefox 'Enhanced Tracking Protection' वापरते. अनेक वापरकर्ते uBlock Origin सारखे ॲड ब्लॉकर्स (ad blockers) देखील वापरतात. ही साधने तिसऱ्या पक्षाचे डोमेन ओळखतात आणि विनंती (request) संगणकावरून बाहेर पडण्यापूर्वीच ती ब्लॉक करतात.
कोड क्रॅश झाला नाही. कन्सोलमध्ये (console) कोणतीही लाल रंगाची एरर (error) दिसली नाही. 'fetch' ने फक्त काहीच परत केले नाही. त्यानंतर माझ्या कोडने सूचनांनुसार 'fallback "empty state"' दाखवला. वरवर पाहणाऱ्या व्यक्तीला पेज व्यवस्थित वाटले असते, फक्त ते रिकामे दिसत होते.
हा बग दोन कारणांमुळे अदृश्य होता:
- मी Chrome मध्ये डेव्हलपमेंट केले होते, ज्याने कॉलला परवानगी दिली होती.
- माझे ॲनालिटिक्स (analytics) देखील त्याच API डोमेनचा वापर करत होते. ज्या वापरकर्त्यांना मजकूर दिसत नव्हता, त्यांना माझ्या डेटामध्ये मोजलेही जाऊ शकले नाही.
मी हे कसे ठीक केले:
मी विनंतीला (request) विश्वसनीय बाजूला नेण्यासाठी 'reverse proxy' चा वापर केला.
याऐवजी: mysite.com -> xxxx.supabase.co (Third-party / Blocked)
मी याकडे वळलो: mysite.com -> mysite.com/sb-api (First-party / Trusted)
API माझ्या स्वतःच्या डोमेनद्वारे रूट केल्यामुळे, ब्राउझरला वाटते की ही विनंती स्वतः साइटचाच एक भाग आहे. Firefox आता त्याला ट्रॅकर (tracker) म्हणून पाहत नाही.
जर तुम्ही ही पद्धत वापरत असाल, तर या तीन गोष्टी लक्षात ठेवा:
- तुमचे websockets तपासा. साध्या rewrites मुळे रिअल-टाइम फीचर्समध्ये बिघाड होऊ शकतो.
- तुमची auth storage key निश्चित करा. URL बदलल्यामुळे ब्राउझर लॉगिन सेशन्स (login sessions) कशा प्रकारे स्टोअर करतो यात बदल होऊ शकतो.
- सर्व्हर-साइड कॉल्स थेट ठेवा. ब्राउझरमध्ये न चालणाऱ्या कोडसाठी तुम्हाला प्रॉक्सीची गरज नाही.
धडा: "जर ते Chrome मध्ये चालते, तर ते सर्वत्र चालते" असे गृहीत धरणे थांबवा.
तुमच्या साइटची Firefox मध्ये कडक प्रायव्हसी सेटिंग्स आणि ॲड ब्लॉकरसह चाचणी घ्या. तोच तुमचा खरा blind spot आहे.