socorrist.app

Pantalla en blanco en producción

Tu app se ha publicado, el servidor responde, pero el navegador pinta una página vacía. Casi siempre significa que el JavaScript ha fallado nada más arrancar y se ha parado antes de dibujar nada.

Ya de paso: ¿tu app está exponiendo datos?

Analízala gratis mientras lees. Tarda treinta segundos y no toca nada.

Solo leemos lo que tu app ya le entrega a cualquier visitante.

Por qué te pasa

Una app moderna se dibuja entera desde JavaScript: el HTML que llega al navegador está prácticamente vacío y es el código el que lo rellena. Si ese código se cae en la primera línea, nadie rellena nada y te quedas con el fondo blanco. No es que falte la página, es que se ha interrumpido antes de pintarla.

Las causas más frecuentes, por orden: una variable de entorno que falta en producción y hace que algo llegue vacío, y ahí entra el clásico supabaseUrl is required; una ruta de ficheros que en tu ordenador funciona y en el servidor no, porque el editor no distingue mayúsculas y el servidor sí; o una llamada a datos que falla y no está controlada, de modo que el error tumba la aplicación entera en vez de mostrar un aviso.

El diagnóstico es siempre el mismo y lleva dos minutos: abre la app publicada, pulsa F12, ve a la pestaña Console y recarga. El primer mensaje en rojo es tu causa. La pantalla en blanco no es el problema, es el síntoma, y ese mensaje es el problema.

Lo que este error no significa

Arréglalo tú, gratis

Primero encuentra el mensaje real, luego actúa. Saltarse este orden es lo que hace que la gente pase horas redesplegando sin cambiar nada.

  1. 1Abre tu app publicada, pulsa F12 y ve a la pestaña Console. Recarga la página con la consola abierta y apunta el primer mensaje en rojo.
  2. 2Si el mensaje habla de una variable, una URL o una clave (por ejemplo supabaseUrl is required), la causa es una variable de entorno que falta en producción. Ve al panel de tu hosting, añádela y vuelve a desplegar. Recuerda que necesita el prefijo VITE_ o NEXT_PUBLIC_ según tu proyecto.
  3. 3Si el mensaje habla de un fichero que no se encuentra o de un módulo que no existe, suele ser un problema de mayúsculas en el nombre de un fichero: tu ordenador no las distingue y el servidor sí. Comprueba que el nombre en el código coincide letra por letra con el nombre real del fichero.
  4. 4Si el mensaje menciona que algo es undefined o null, tu código está dando por hecho que ha recibido unos datos que no han llegado. Es el caso que sí necesita tocar código, y va en el prompt de abajo.
  5. 5Mira también la pestaña Network de esa misma ventana: si ves peticiones en rojo, el problema está en la conexión con tu backend y no en el código de la app.

Si la consola sale limpia y aun así ves blanco, mira la pestaña Network y comprueba que los ficheros de JavaScript se están descargando con código 200 y no con 404.

Y esto para la parte de código

Pégaselo tal cual al agente que escribió tu app. Está redactado para que te diga lo que ha hecho, no solo para que lo haga.

Prompt para pegarle a tu agente

Mi app se ve bien en el editor pero sale completamente en blanco al publicarla. En la consola del navegador, el primer error en rojo dice: [PEGA AQUÍ EL MENSAJE COMPLETO].

Necesito que hagas esto:
1. Identifica qué parte del código provoca ese error concreto y explícame en dos frases por qué falla solo en producción y no en local.
2. Añade un límite de error en la raíz de la aplicación, de forma que si algo falla al arrancar se muestre un mensaje comprensible en pantalla en vez de dejarla en blanco. Ese mensaje no debe enseñar detalles técnicos al visitante.
3. Revisa todas las variables de entorno que la app necesita para arrancar y añade una comprobación al inicio que, si falta alguna, diga por su nombre cuál falta.
4. Revisa que las llamadas a datos del arranque tengan manejo de errores y que un fallo de red no tumbe la aplicación entera.

Al terminar, dime la lista exacta de variables de entorno que tengo que tener dadas de alta en mi hosting.

¿Lo has intentado y sigue sin salir?

O el escáner de arriba ha encontrado algo y prefieres no tocarlo solo. En cualquiera de los dos casos esto ya es de los gordos y merece un humano: no es que no hayas sabido, es que has llegado al punto en que hace falta alguien que entre y lo vea por dentro.

Cita a partir de mañana

Agendar revisión

99 €

Elegimos hueco, miro tu app con calma y te digo qué pasa y cómo se arregla.

  • Sesión de trabajo en directo contigo
  • Diagnóstico del error y del riesgo real
  • Te quedas con el arreglo aplicado
Ver huecos disponibles

Hoy, en cola prioritaria

Rescate exprés

199 €

Entras en la cola de hoy. Reservas hueco y lo dejamos resuelto en el día.

  • Hueco el mismo día
  • Prioridad sobre las revisiones agendadas
  • Mismo trabajo, antes
Ver huecos de hoy

Quién lo arregla

Marc Sala

IT Manager

  • Analista de ciberseguridad certificado por Google

No es un rating anónimo de un marketplace: es la persona que va a entrar en tu app. Reviso el código, encuentro qué falla y lo arreglo contigo delante.

Errores que suelen venir con este