Solución de problemas de compilación y vista previa

Cuando una compilación falla o tu vista previa no carga, comienza con el primer error visible y sigue la ruta de recuperación para ese síntoma. Esta página cubre el Visor de Apps, la vista previa, los errores de compilación y los pasos que debes seguir antes de reportar un problema.

Comienza aquí

Después de que un Agente termina una tarea, el Visor de Apps carga tu app. La Terminal muestra la actividad de la tarea y los errores, mientras que la barra de herramientas del Visor de Apps te ofrece un control de Reload App Viewer, un selector de vista de dispositivo, una opción para abrir la vista previa en una nueva pestaña y la Console.

1. Guarda el cambio más reciente y espera a que termine la tarea o compilación actual.
2. Selecciona Reload App Viewer una vez si la vista previa parece desactualizada o permanece en una pantalla de carga.
3. Abre la vista previa en una nueva pestaña si el Visor de Apps integrado está bloqueado o no responde.
4. Abre Console y copia el primer error visible. Conserva el enlace del proyecto y la hora de la falla.

Cuando la compilación falla

Prueba Resolve primero

Cuando Atoms detecta un problema de compilación, aparece una notificación de Reporte de problemas en la esquina inferior izquierda. Si la notificación incluye Resolve, inicia un intento de reparación antes de realizar otra acción.

1. Selecciona Resolve y espera a que termine el intento actual.
2. No selecciones Resolve de nuevo mientras está en ejecución.
3. Si el intento no termina, registra el estado visible y continúa con los pasos de reporte a continuación. No inicies otro intento de Resolve.
4. Cuando termine el intento, revisa la vista previa actualizada. Si no se actualiza, actualiza el navegador una vez.
5. Repite la acción que causó el problema. Si el problema persiste, expande el Reporte de problemas y continúa con los pasos de reporte a continuación.

Error de compilación o dependencia faltante

Si el panel Preview muestra un error de compilación, un banner de error rojo o un mensaje sobre un paquete faltante, usa el mensaje exacto para acotar el siguiente paso.

1. Abre Console y copia el mensaje de error completo que sea visible allí.
2. Si Resolve está disponible, úsalo una vez y espera a que termine el intento.
3. Si no hay un botón Resolve, pega el error exacto en el chat del proyecto y pídele al Agente que corrija ese error de compilación.
4. Si el error comenzó después de un cambio específico, abre History y compara la versión actual con la última versión que funcionaba.
5. Si el error es difícil de aislar, haz Remix desde la última versión estable y vuelve a aplicar los cambios de forma incremental.

Los errores que mencionan el Visor de Apps, el script de inicio, Publish, un registro de despliegue o los archivos internos de un paquete de terceros pueden indicar un problema de la plataforma. Incluye el mensaje de error completo cuando contactes a Support.

La compilación sigue en progreso

Revisa la Terminal para ver la actividad actual de la tarea antes de volver a intentarlo. Si la tarea o compilación aún está en ejecución, espera a que termine. Si sigue en progreso después de que finalice el intento actual, registra el estado, la marca de tiempo, el enlace del proyecto y cualquier detalle de error visible, y luego reporta el problema.

Cuando la vista previa o el Visor de Apps no cargan

Pantalla de carga o vista previa que no responde

Primero verifica si solo el Visor de Apps integrado está afectado o si la URL de Preview y el sitio publicado también están afectados.

1. Confirma si la tarea o compilación actual aún está en ejecución.
2. Selecciona Reload App Viewer una vez.
3. Abre Preview en una nueva pestaña del navegador.
4. Prueba la misma URL en una ventana de incógnito.
5. Si la última versión conocida que funcionaba carga, compárala con el cambio reciente que introdujo el problema.

Si el producto informa explícitamente un saldo insuficiente de Cloud & AI o una app suspendida, abre Settings → Cloud & AI y revisa ese estado. No recargues saldo basándote solo en una pantalla en blanco.

Vista previa en blanco o incompleta

Verifica si la pantalla en blanco afecta a toda la app o solo a una página o componente. Si solo un área está afectada, usa el selector de páginas para abrir esa página directamente y repite el recorrido de usuario más pequeño que llegue a ella. Si toda la vista previa está en blanco, vuelve al resultado de la compilación y resuelve el primer error de compilación o de ejecución antes de volver a probar.

Registra cualquier error de Console o Network sin compartir cookies, tokens o valores secretos. Si el problema continúa, incluye los detalles del error saneados en tu reporte.

Preview muestra una versión anterior

Preview y el sitio publicado son canales separados. Asegúrate de que los cambios más recientes se hayan guardado y de que la compilación más reciente haya finalizado antes de actualizar la vista previa. Vuelve a abrir Preview después de que termine la compilación. Si aún muestra contenido anterior, compara la versión actual con la última versión conocida que funcionaba en History.

Cuando la vista previa se ve mal

Las interacciones o la navegación no funcionan

Una página que se renderiza no es lo mismo que una página que funciona. Abre cada enlace de navegación importante, presiona los botones principales, envía los formularios clave y sigue el recorrido principal del usuario de principio a fin. Cuando una interacción falla, registra la acción exacta en la que se detiene el resultado esperado y prueba esa ruta de nuevo después de cada corrección.

El diseño móvil está roto

1. Usa el selector de dispositivo en la barra de herramientas del Visor de Apps para cambiar a la vista móvil.
2. Selecciona el elemento roto en el modo Design cuando esté disponible.
3. Describe el diseño móvil esperado y lo que no debe cambiar.
4. Aplica un cambio y luego verifica las vistas de escritorio y móvil, además de los estados de carga, vacío, hover y error.

Faltan imágenes u otros recursos

1. Abre la sección Files y confirma que el archivo referenciado existe.
2. Verifica que la ruta, el nombre del archivo y el formato coincidan con la referencia usada por la app.
3. Si el recurso se movió o renombró recientemente, restaura la referencia o actualízala deliberadamente.
4. Selecciona Reload App Viewer y prueba de nuevo la página afectada.

El Agente cambió el elemento equivocado o rompió otra área

1. Abre History y haz Remix desde la última versión estable.
2. Usa el modo Design para apuntar al elemento exacto cuando esté disponible.
3. Indica qué no debe cambiar y haz un cambio por prompt.
4. Verifica el resultado antes de continuar con el siguiente cambio.

Reportar un problema

Reporta el problema cuando Resolve no esté disponible, el problema persista después de un intento de Resolve completado, Preview no responda pero el chat del proyecto siga funcionando, o el comportamiento inesperado continúe después de que el Agente investigue.

Abre Feedback desde el chat del proyecto

1. Abre el chat del proyecto afectado y encuentra el mensaje relevante más reciente del Agente.
2. Selecciona ... (más opciones) y luego selecciona Feedback.
3. En el mensajero de soporte, selecciona Send us a message y envía el reporte en la conversación existente cuando ya haya una.

Para ver el flujo completo de Reporte de problemas, consulta Report an Issue.

Incluye suficientes detalles para reproducir el problema

• Resumen del problema. Describe el problema en una o dos oraciones.
• Enlace del proyecto o del chat. Incluye la URL donde ocurrió el problema.
• Fecha y hora. Incluye tu zona horaria.
• Pasos para reproducir. Enumera las acciones exactas en orden.
• Resultado esperado y resultado real. Indica qué debería haber pasado y qué pasó en su lugar.
• Lo que ya intentaste. Indica si apareció Resolve, qué pasó después de que terminó y si actualizar o Remix cambió el resultado.
• Navegador y dispositivo. Incluye el navegador, el sistema operativo y el tipo de dispositivo.
• Evidencia. Adjunta una captura de pantalla o grabación y los detalles visibles relevantes del Reporte de problemas o de Console.

Elimina contraseñas, claves de API, tokens de autenticación, cookies, detalles de pago y datos personales o confidenciales no relacionados antes de compartir capturas de pantalla o registros.

Después de que se solucione el problema

Ejecuta el recorrido principal del usuario de principio a fin. Revisa Preview tanto en vista de escritorio como móvil, abre cada página desde el selector de páginas y confirma que Console no tenga mensajes de error en rojo. Si la app está lista para publicar, reemplaza cualquier contenido de marcador de posición y completa las comprobaciones de publicación en el Visor de Apps.

Preguntas frecuentes