Chrome працював. Firefox не спрацював.
Я бачив одну й ту саму сторінку в двох браузерах поруч.
У Chrome: сторінка працювала ідеально. Там були зображення, кнопки та повний список результатів.
У Firefox: сторінка була порожньою. Вона показувала картки-заглушки без зображень і повідомлення про те, що знайдено 0 результатів.
Код був той самий. URL був той самий. Сервер працював справно.
Проблема була в браузері.
Firefox використовує Enhanced Tracking Protection. Багато користувачів також використовують такі інструменти, як uBlock Origin. Ці інструменти блокують запити до доменів, які вони вважають трекерами.
Мій застосунок отримував дані з домену Supabase. Для Firefox цей домен виглядав як сторонній трекер. Браузер заблокував запит ще до того, як він покинув комп'ютер.
Оскільки запит (fetch) не вдався, мій код показав резервний стан (fallback state). Він не «впав». Він не видав помилку в консолі. Він просто показав порожню сторінку.
Це створило подвійну «сліпу зону»:
- Мій браузер для розробки (Chrome) працював ідеально. Я ніколи не бачив цього багу.
- Моя аналітика використовувала той самий домен. Користувачі, які не могли бачити контент, також не могли бути відстежені. Вони були невидимими.
Я виправив це, перейшовши від стороннього запиту (third-party request) до запиту від першої сторони (first-party request).
Замість того, щоб звертатися безпосередньо до домену вендора, я використав зворотний проксі (reverse proxy). Я спрямував API через власний домен.
До: mysite.com викликає xxxx.supabase.co (Заблоковано) Після: mysite.com викликає mysite.com/sb-api (Довірено)
Тепер браузер бачить запит того самого походження (same-origin request). Він сприймає виклик даних як частину самого сайту.
Якщо ви стикаєтеся з подібними проблемами, пам'ятайте про ці три речі:
• Стежте за своїми websockets. Просте переписування шляхів може порушити роботу з'єднань у реальному часі. • Фіксуйте ключі сховища автентифікації (auth storage keys). Зміна URL може змінити те, як браузер зберігає сесії входу. • Використовуйте попередній рендеринг (prerender) вашого контенту. Не дозволяйте сторінці повністю залежати від JavaScript. Якщо браузер заблокує ваш скрипт, користувач все одно має бачити основний контент у HTML.
Перестаньте вважати, що якщо це працює в Chrome, то це працює для всіх. Тестуйте з увімкненими розширеннями для конфіденційності.