𝗖𝗵𝗿𝗼𝗺𝗲 𝗳𝘂𝗻𝗰𝗶𝗼𝗻𝗮𝗯𝗮. 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 𝗲𝘀𝘁𝗮 𝘃𝗮𝗰í𝗼.
Vi un error extraño. Abrí la misma página en dos navegadores, uno al lado del otro.
En Chrome, todo funcionaba. Vi imágenes, botones y datos. En Firefox, no vi nada. Vi tarjetas vacías y un mensaje que decía "0 resultados encontrados".
Era la misma URL. Era la misma versión. Era la misma máquina.
La causa fue un error que es casi imposible de encontrar durante el desarrollo. El navegador estaba bloqueando mis propias llamadas a la API. Solo desarrollé en el único navegador que no las bloqueaba.
El problema: La página utiliza JavaScript para obtener datos de un dominio de terceros (Supabase). Firefox utiliza la Protección de rastreo mejorada (Enhanced Tracking Protection). Muchos usuarios también utilizan bloqueadores de anuncios como uBlock Origin. Estas herramientas detectan el dominio de terceros y bloquean la solicitud incluso antes de que salga del ordenador.
El código no falló. No mostró un error rojo en la consola. El fetch simplemente no devolvió nada. Mi código entonces mostró un "estado vacío" de respaldo, tal como estaba instruido. Para un observador casual, la página parecía estar bien. Simplemente parecía vacía.
Este error era invisible por dos razones:
- Desarrollé en Chrome, que permitía la llamada.
- Mis analíticas utilizaban el mismo dominio de la API. Los usuarios que no podían ver el contenido tampoco podían ser contabilizados en mis datos.
Cómo lo solucioné:
Utilicé un proxy inverso para mover la solicitud al lado confiable de la línea.
En lugar de: mysite.com -> xxxx.supabase.co (Terceros / Bloqueado)
Cambié a: mysite.com -> mysite.com/sb-api (Primera parte / Confiable)
Al enrutar la API a través de mi propio dominio, el navegador piensa que la solicitud es parte del propio sitio. Firefox ya no la ve como un rastreador.
Tres cosas para recordar si utilizas este método:
- Revisa tus websockets. Las reescrituras simples podrían romper las funciones en tiempo real.
- Fija tu clave de almacenamiento de autenticación (auth storage key). Cambiar la URL puede cambiar la forma en que el navegador almacena las sesiones de inicio de sesión.
- Mantén las llamadas del lado del servidor directas. No necesitas un proxy para el código que no se ejecuta en un navegador.
La lección: Deja de asumir que "si funciona en Chrome, funciona".
Prueba tu sitio en Firefox con una configuración de privacidad estricta y un bloqueador de anuncios. Ese es tu verdadero punto ciego.