Chrome работал. Firefox был пустым.
Я столкнулся со странным багом. Я открыл одну и ту же страницу в двух браузерах рядом друг с другом.
В Chrome всё работало. Я видел изображения, кнопки и данные. В Firefox я не видел ничего. Я видел пустые карточки и сообщение «0 результатов найдено».
URL был тот же. Сборка та же. Машина та же.
Причиной был баг, который почти невозможно обнаружить во время разработки. Браузер блокировал мои собственные API-вызовы. Я вел разработку только в том браузере, который их не блокировал.
Проблема: Страница использует JavaScript для получения данных со стороннего домена (Supabase). Firefox использует Enhanced Tracking Protection. Многие пользователи также используют блокировщики рекламы, такие как uBlock Origin. Эти инструменты видят сторонний домен и блокируют запрос еще до того, как он покинет компьютер.
Код не «падал». В консоли не появлялось красных ошибок. fetch просто ничего не возвращал. После этого мой код отображал запасное состояние «пустого экрана» (empty state), как и было предусмотрено. Для случайного наблюдателя страница выглядела нормально. Она просто выглядела пустой.
Этот баг был невидим по двум причинам:
- Я разрабатывал в Chrome, который разрешал вызов.
- Моя аналитика использовала тот же домен API. Пользователи, которые не видели контент, также не учитывались в моих данных.
Как я это исправил:
Я использовал обратный прокси (reverse proxy), чтобы перевести запрос на «доверенную сторону».
Вместо: mysite.com -> xxxx.supabase.co (Сторонний / Заблокирован)
Я переключился на: mysite.com -> mysite.com/sb-api (Собственный / Доверенный)
Пропуская API через мой собственный домен, браузер считает, что запрос является частью самого сайта. Firefox больше не видит в нем трекер.
Три вещи, которые стоит помнить, если вы используете этот метод:
- Проверяйте свои веб-сокеты (websockets). Простые правила перезаписи (rewrites) могут нарушить работу функций реального времени.
- Зафиксируйте ключ хранения авторизации (auth storage key). Изменение URL может изменить способ, которым браузер сохраняет сессии входа.
- Оставляйте серверные вызовы прямыми. Вам не нужен прокси для кода, который не выполняется в браузере.
Урок: Перестаньте полагаться на принцип «если работает в Chrome, значит работает везде».
Тестируйте свой сайт в Firefox со строгими настройками конфиденциальности и блокировщиком рекламы. Это ваше реальное слепое пятно.