𝗖𝗵𝗿𝗼𝗺𝗲 𝗙𝘂𝗻𝗰𝗶𝗼𝗻𝗢𝗨. 𝗢 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 𝗘𝘀𝘁𝗮́ 𝗩𝗮𝘇𝗶𝗼.
Eu vi um bug estranho. Abri a mesma página em dois navegadores lado a lado.
No Chrome, tudo funcionou. Eu vi imagens, botões e dados. No Firefox, eu não vi nada. Vi cards vazios e uma mensagem dizendo "0 resultados encontrados".
Era a mesma URL. Era o mesmo build. Era a mesma máquina.
A causa foi um bug quase impossível de encontrar durante o desenvolvimento. O navegador estava bloqueando minhas próprias chamadas de API. Eu só desenvolvi no navegador que não as bloqueava.
O problema: A página usa JavaScript para buscar dados de um domínio de terceiros (Supabase). O Firefox usa a Proteção Aprimorada de Rastreamento (Enhanced Tracking Protection). Muitos usuários também usam bloqueadores de anúncios como o uBlock Origin. Essas ferramentas identificam o domínio de terceiros e bloqueiam a requisição antes mesmo de ela sair do computador.
O código não travou. Não exibiu um erro vermelho no console. O fetch simplesmente não retornou nada. Meu código então exibiu um "empty state" de fallback, conforme instruído. Para um observador casual, a página parecia normal. Ela apenas parecia vazia.
Este bug era invisível por dois motivos:
- Eu desenvolvi no Chrome, que permitia a chamada.
- Minha análise (analytics) usava o mesmo domínio da API. Os usuários que não conseguiam ver o conteúdo também não podiam ser contabilizados nos meus dados.
Como eu corrigi:
Eu usei um proxy reverso para mover a requisição para o lado confiável da linha.
Em vez de: mysite.com -> xxxx.supabase.co (Terceiros /