𝗖𝗵𝗿𝗼𝗺𝗲 𝗪𝗼𝗿𝗸𝗲𝗱. 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 𝗙𝗮𝗶𝗹𝗲𝗱.
രണ്ട് ബ്രൗസറുകളിൽ ഒരേ പേജ് അടുത്തടുത്തായി ഞാൻ കണ്ടു.
Chrome-ൽ: പേജ് കൃത്യമായി പ്രവർത്തിച്ചു. അതിൽ ചിത്രങ്ങളും ബട്ടണുകളും ഫലങ്ങളുടെ (results) പൂർണ്ണമായ പട്ടികയും ഉണ്ടായിരുന്നു.
Firefox-ൽ: പേജ് ശൂന്യമായിരുന്നു. ചിത്രങ്ങളില്ലാത്ത പ്ലേസ്ഹോൾഡർ കാർഡുകളും (placeholder cards) '0 results found' എന്ന സന്ദേശവും മാത്രമാണ് അവിടെ കണ്ടത്.
കോഡ് ഒന്നായിരുന്നു. URL ഒന്നായിരുന്നു. സെർവറും ശരിയായിരുന്നു.
പ്രശ്നം ബ്രൗസിലായിരുന്നു.
Firefox 'Enhanced Tracking Protection' ഉപയോഗിക്കുന്നു. പല ഉപയോക്താക്കളും uBlock Origin പോലുള്ള ടൂളുകളും ഉപയോഗിക്കാറുണ്ട്. ഇവ ട്രാക്കറുകളാണെന്ന് കരുതുന്ന ഡൊമെയ്നുകളിലേക്കുള്ള റിക്വസ്റ്റുകൾ തടയുന്നു.
എന്റെ ആപ്പ് ഒരു Supabase ഡൊമെയ്നിൽ നിന്ന് ഡാറ്റ ശേഖരിക്കുകയായിരുന്നു (fetch). Firefox-നെ സംബന്ധിച്ചിടത്തോളം, ആ ഡൊമെയ്ൻ ഒരു തേർഡ് പാർട്ടി ട്രാക്കർ പോലെയായിരുന്നു. റിക്വസ്റ്റ് മെഷീനിൽ നിന്ന് പുറത്തേക്ക് പോകുന്നതിന് മുമ്പ് തന്നെ ബ്രൗസർ അത് തടഞ്ഞു.
Fetch പരാജയപ്പെട്ടതിനാൽ, എന്റെ കോഡ് 'fallback state' ആണ് കാണിച്ചത്. അത് ക്രാഷ് ആയില്ല. കൺസോളിൽ (console) ഒരു എററും കാണിച്ചില്ല. വെറുമൊരു ശൂന്യമായ പേജ് മാത്രമാണ് അത് കാണിച്ചത്.
ഇത് ഇരട്ടമായ ഒരു അജ്ഞത (double blind spot) സൃഷ്ടിച്ചു:
- എന്റെ ഡെവലപ്മെന്റ് ബ്രൗസർ (Chrome) കൃത്യമായി പ്രവർത്തിച്ചു. അതിനാൽ എനിക്ക് ആ ബഗ് (bug) ഒരിക്കലും കണ്ടില്ല.
- എന്റെ അനലിറ്റിക്സും (analytics) അതേ ഡൊമെയ്ൻ തന്നെയായിരുന്നു ഉപയോഗിച്ചിരുന്നത്. ഉള്ളടക്കം കാണാൻ കഴിയാത്ത ഉപയോക്താക്കളെ ട്രാക്ക് ചെയ്യാനും സാധിച്ചില്ല. അവർ അദൃശ്യരായിരുന്നു.
ഒരു തേർഡ് പാർട്ടി റിക്വസ്റ്റിന് പകരം ഫസ്റ്റ് പാർട്ടി റിക്വസ്റ്റിലേക്ക് മാറിയതിലൂടെ ഞാൻ ഇത് പരിഹരിച്ചു.
വെണ്ടർ ഡൊമെയ്നെ നേരിട്ട് വിളിക്കുന്നതിന് പകരം, ഞാൻ ഒരു റിവേഴ്സ് പ്രോക്സി (reverse proxy) ഉപയോഗിച്ചു. ഞാൻ എന്റെ സ്വന്തം ഡൊമെയ്നിലൂടെ API റൂട്ട് ചെയ്തു.
Before: mysite.com calls xxxx.supabase.co (Blocked) After: mysite.com calls mysite.com/sb-api (Trusted)
ഇപ്പോൾ, ബ്രൗസർ ഇതിനെ ഒരു same-origin request ആയി കാണുന്നു. ഡാറ്റാ കോളിനെ സൈറ്റിന്റെ തന്നെ ഭാഗമായി ബ്രൗസർ കണക്കാക്കുന്നു.
സമാനമായ പ്രശ്നങ്ങൾ നേരിടുന്നുണ്ടെങ്കിൽ, ഈ മൂന്ന് കാര്യങ്ങൾ ഓർക്കുക:
• നിങ്ങളുടെ websockets ശ്രദ്ധിക്കുക. ലളിതമായ പാത്ത് റീറൈറ്റുകൾ (path rewrites) റിയൽ ടൈം കണക്ഷനുകളെ തകരാറിലാക്കിയേക്കാം. • നിങ്ങളുടെ auth storage keys ഉറപ്പുവരുത്തുക. URL മാറ്റുന്നത് ബ്രൗസർ ലോഗിൻ സെഷനുകൾ സൂക്ഷിക്കുന്ന രീതിയെ മാറ്റിയേക്കാം. • നിങ്ങളുടെ ഉള്ളടക്കം പ്രീ-റെൻഡർ (Prerender) ചെയ്യുക. നിങ്ങളുടെ പേജ് പൂർണ്ണമായും JavaScript-നെ മാത്രം ആശ്രയിക്കുന്നത് ഒഴിവാക്കുക. ബ്രൗസർ നിങ്ങളുടെ സ്ക്രിപ്റ്റ് തടഞ്ഞാലും, ഉപയോക്താവിന് HTML-ൽ പ്രധാന ഉള്ളടക്കം കാണാൻ കഴിയണം.
Chrome-ൽ പ്രവർത്തിക്കുന്നുണ്ടെങ്കിൽ അത് എല്ലാവർക്കും പ്രവർത്തിക്കും എന്ന് കരുതുന്നത് നിർത്തുക. പ്രൈവസി എക്സ്റ്റൻഷനുകൾ (privacy extensions) ഓൺ ചെയ്ത നിലയിൽ ടെസ്റ്റ് ചെയ്യുക.