Chrome কাজ করছিল। Firefox ছিল খালি।
আমি একটি অদ্ভুত বাগ দেখতে পেলাম। আমি একই পেজ দুটি ব্রাউজারে পাশাপাশি খুললাম।
Chrome-এ সবকিছু ঠিকঠাক কাজ করছিল। আমি ছবি, বাটন এবং ডেটা দেখতে পাচ্ছিলাম। Firefox-এ আমি কিছুই দেখতে পাচ্ছিলাম না। আমি শুধু খালি কার্ড এবং "0 results found" লেখা একটি মেসেজ দেখতে পাচ্ছিলাম।
URL একই ছিল। Build একই ছিল। মেশিনও একই ছিল।
এর কারণ ছিল এমন একটি বাগ যা ডেভেলপমেন্টের সময় খুঁজে পাওয়া প্রায় অসম্ভব। ব্রাউজার আমার নিজস্ব API কলগুলো ব্লক করছিল। আমি শুধুমাত্র সেই ব্রাউজারে ডেভেলপমেন্ট করছিলাম যা এগুলো ব্লক করছিল না।
সমস্যাটি ছিল:
- পেজটি একটি থার্ড-পার্টি ডোমেইন (Supabase) থেকে ডেটা ফেচ (fetch) করার জন্য JavaScript ব্যবহার করে।
- Firefox-এ Enhanced Tracking Protection ব্যবহার করা হয়।
- অনেক ব্যবহারকারী uBlock Origin-এর মতো অ্যাড ব্লকারও ব্যবহার করেন।
- এই টুলগুলো থার্ড-পার্টি ডোমেইনটি শনাক্ত করে এবং রিকোয়েস্টটি কম্পিউটার থেকে বের হওয়ার আগেই তা ব্লক করে দেয়।
কোডটি ক্র্যাশ করেনি। কনসোলে কোনো লাল রঙের এরর (error) দেখায়নি। Fetch থেকে শুধু কিছুই রিটার্ন আসছিল না। ফলে আমার কোডটি নির্দেশ অনুযায়ী একটি ফলব্যাক "empty state" দেখিয়েছিল। একজন সাধারণ পর্যবেক্ষকের কাছে পেজটি ঠিকই মনে হচ্ছিল, শুধু এটি খালি দেখাচ্ছিল।
এই বাগটি দুটি কারণে অদৃশ্য ছিল:
- আমি Chrome-এ ডেভেলপমেন্ট করেছিলাম, যা কলটি করতে দিচ্ছিল।
- আমার অ্যানালিটিক্স (analytics) একই API ডোমেইন ব্যবহার করছিল। যেসব ব্যবহারকারী কন্টেন্ট দেখতে পাচ্ছিলেন না, তাদেরও আমার ডেটাতে গণনা করা সম্ভব হচ্ছিল না।
আমি এটি কীভাবে ঠিক করলাম:
আমি রিকোয়েস্টটিকে ট্রাস্টেড (trusted) সাইডে নিয়ে আসার জন্য একটি রিভার্স প্রক্সি (reverse proxy) ব্যবহার করেছি।
পরিবর্তে: mysite.com -> xxxx.supabase.co (Third-party / Blocked)
আমি পরিবর্তন করে এটি করেছি: mysite.com -> mysite.com/sb-api (First-party / Trusted)
API-টিকে আমার নিজস্ব ডোমেইনের মাধ্যমে রাউট করার ফলে ব্রাউজার মনে করে যে রিকোয়েস্টটি সাইটেরই একটি অংশ। Firefox এখন আর এটিকে ট্র্যাকার হিসেবে দেখে না।
আপনি যদি এই পদ্ধতি ব্যবহার করেন তবে তিনটি বিষয় মনে রাখবেন:
- আপনার websockets চেক করুন। সাধারণ রিরাইট (rewrite) রিয়েল-টাইম ফিচারগুলোকে নষ্ট করে দিতে পারে।
- আপনার auth storage key পিন (pin) করে রাখুন। URL পরিবর্তন করলে ব্রাউজার যেভাবে লগইন সেশন স্টোর করে তা বদলে যেতে পারে।
- সার্ভার-সাইড কলগুলো সরাসরি রাখুন। যে কোড ব্রাউজারে চলে না, তার জন্য প্রক্সির প্রয়োজন নেই।
শিক্ষা: "Chrome-এ কাজ করলে সবখানেই