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 calls xxxx.supabase.co (Blocked) পরে: mysite.com calls mysite.com/sb-api (Trusted)
এখন, ব্রাউজার এটিকে একটি same-origin request হিসেবে দেখে। এটি ডেটা কলটিকে সাইটের নিজস্ব অংশ হিসেবে গণ্য করে।
আপনি যদি একই ধরনের সমস্যার সম্মুখীন হন, তবে এই তিনটি বিষয় মনে রাখবেন:
• আপনার websockets-এর দিকে নজর দিন। সাধারণ পাথ রিরাইট (path rewrites) রিয়েল-টাইম কানেকশন ভেঙে দিতে পারে। • আপনার auth storage keys গুলো নির্দিষ্ট করে রাখুন। URL পরিবর্তন করলে ব্রাউজার কীভাবে লগইন সেশন সংরক্ষণ করবে তা বদলে যেতে পারে। • আপনার কন্টেন্ট প্রি-রেন্ডার (Prerender) করুন। আপনার পেজকে পুরোপুরি JavaScript-এর ওপর নির্ভরশীল হতে দেবেন না। যদি কোনো ব্রাউজার আপনার স্ক্রিপ্ট ব্লক করে দেয়, তবুও ব্যবহারকারীর HTML-এ মূল কন্টেন্টটি দেখা উচিত।
এটি ধরে নেওয়া বন্ধ করুন যে Chrome-এ কাজ করলে তা সবার জন্য কাজ করবে। প্রাইভেসি এক্সটেনশন চালু রেখে পরীক্ষা করুন।