Spot es una extensión de Chrome que hace que el reporte de errores sea increíblemente rápido y sencillo.

Con Spot, puedes grabar errores fácilmente directamente desde tu navegador y compartirlos al instante con tu equipo. El resultado final es un reporte de errores completo y listo para compartir en formato de video, que incluye las acciones del usuario, los registros y errores de la consola, las cargas útiles de red y los datos del agente de usuario. En resumen, obtienes todo lo que necesitas para reportar un error más rápido que nunca, y todo lo que tu equipo necesita para corregirlo con la misma rapidez.

• Spot viene incluido con cada plan de OpenReplay, desde nuestra versión de código abierto hasta nuestras ofertas empresariales.
• Spot es una extensión de Chrome que también funciona en cualquier navegador basado en Chromium, incluidos Microsoft Edge, Brave y Arc.

Instalar la extensión de Chrome Spot es rápido y fácil:

1. Ve a la página de la extensión Spot en la Chrome Web Store y haz clic en Añadir a Chrome.
2. Ancla Spot a tu barra de herramientas de Chrome para acceder fácilmente en el futuro.

Antes de empezar a usar Spot, debes iniciar sesión en tu cuenta de OpenReplay existente o crear una nueva:

• OpenReplay cloud

  Section titled OpenReplay cloud
  • Usuarios nuevos:
    1. Después de anclar Spot, haz clic en el ícono de Spot en tu barra de herramientas.
    2. Selecciona Create Account.
    3. Elige tu caso de uso principal para OpenReplay.
    • Si seleccionas “reportar errores a través de Spot” como tu caso de uso principal, más tarde podrás acceder a todas las funciones de OpenReplay haciendo clic en Setup Tracker.
    
  • Usuarios existentes:
    1. Haz clic en la extensión Spot anclada en tu barra de herramientas.
    2. Selecciona Log in e introduce tus credenciales de OpenReplay.
    • Puedes encontrar tus Spots en el menú Spot en la barra lateral izquierda.
    

• OpenReplay self-host

  Section titled OpenReplay self-host
  • Usuarios nuevos y existentes:
    • Actualiza tu instancia de OpenReplay a la última versión (v1.20.0) que es compatible con Spot.
    • Una vez actualizada, el menú Spot aparecerá en la barra lateral izquierda. Tus Spots se guardarán de forma segura en tu instancia.

Ahora que has iniciado sesión, ya estás listo para empezar a detectar y reportar errores con Spot.

Así es cómo usar las funciones clave de la extensión de Chrome Spot:

• Iniciar grabación: Haz clic en el ícono de Spot en tu barra de herramientas y selecciona Record Tab para capturar todo en la pestaña activa.

• Activar micrófono: Si es necesario, activa la opción del micrófono para incluir audio en tu grabación.

• Pausar grabación: Haz clic en el ícono de pausa en el panel de grabación en cualquier momento.

• Reiniciar grabación: Haz clic en el ícono de reinicio en el panel de grabación para reiniciar la grabación.

• Detener grabación: Haz clic en el ícono de detener en el panel de grabación para detener la grabación.

• Añadir comentarios: Puedes añadir comentarios para proporcionar contexto adicional antes de guardar.

• Guardar Spot: Después de detener la grabación, se guardará automáticamente con todos los detalles técnicos relevantes, como los registros de la consola y los datos de red.

  

• Iniciar grabación: Haz clic en el ícono de Spot y selecciona Record Desktop. Elige grabar toda tu pantalla o una ventana específica.

Spot incluye automáticamente datos de DevTools en cada grabación de errores, brindando a tus desarrolladores el contexto completo para depurar los problemas de manera eficiente. Cada grabación captura lo siguiente:

• Registros de la consola: Todas las salidas, advertencias y mensajes de error de la consola durante la sesión de grabación.
• Solicitudes de red: Registros de toda la actividad de red, incluyendo:
  • Encabezados y cuerpos de solicitud y respuesta: Datos enviados y recibidos en cada solicitud.
  • Códigos de estado: Identifica rápidamente las solicitudes fallidas o problemáticas.
• Datos del agente de usuario: Información sobre el navegador y el dispositivo del usuario para ayudar a los desarrolladores a replicar el entorno donde ocurrió el error.
• Datos de interacción del usuario: Detalles sobre la actividad del usuario, como clics y rutas de navegación, lo que permite a los desarrolladores comprender cómo se encontró el problema.

Nota sobre los errores de GraphQL

GraphQL normalmente devuelve un código de estado 200 OK para todas las respuestas, incluso cuando hay errores presentes en el cuerpo de la respuesta (generalmente ubicados dentro de un campo errors). Esto puede dificultar la detección de problemas basándose únicamente en el código de estado HTTP.

En Spot, detectamos cuándo una respuesta de GraphQL contiene un objeto errors en el cuerpo. Cuando se encuentra dicho error, marcamos la solicitud con un código de estado 400 en lugar de 200. Este ajuste facilita a los desarrolladores la identificación y depuración de solicitudes problemáticas de GraphQL.

• Acceder a la configuración: Haz clic en el ícono de Spot en tu barra de herramientas y selecciona el ícono Settings.
• Ir a la pestaña Spot después de guardar: Activa esta opción para ser dirigido a la grabación de Spot inmediatamente después de guardar.
• Incluir DevTools: Activa esta opción para incluir registros de la consola, llamadas de red y otra información de depuración en tu grabación.

• Enviar invitaciones: Haz clic en Preferences, ve a Team y haz clic en Add Team Member. Introduce su nombre completo y dirección de correo electrónico, luego envía la invitación.
• Acceso del equipo: Todos los miembros del equipo pueden ver las grabaciones de Spot en la vista Spots en OpenReplay

Los Spots no están vinculados a ningún proyecto específico.

• Compartir en privado: Las grabaciones de Spot se pueden compartir mediante enlaces privados para su visualización interna dentro de tu equipo en OpenReplay.
• Compartir en público: Puedes crear enlaces públicos para su visualización externa, accesibles incluso sin una cuenta de OpenReplay.
• Integración con herramientas: Incluye estos enlaces en herramientas de seguimiento de errores o colaboración como Slack, Teams, Jira o Linear para un acceso y trabajo en equipo sencillos.

Si encuentras un error HTTP 520 Unknown Error al intentar guardar las grabaciones de Spot, esto normalmente indica que el tamaño del archivo de video supera el límite de tamaño aceptado por Cloudflare. Esto puede ocurrir al grabar spots más largos o spots con interacciones complejas.

Para resolver este problema:

1. Accede a la configuración de tu despliegue de OpenReplay en: scripts/helmcharts/vars.yaml
2. Localiza la variable proxy-body-size (alrededor de la línea 109)
3. Aumenta el valor desde el valor predeterminado 10m para admitir grabaciones más grandes
   • Por ejemplo, si necesitas subir archivos de alrededor de 36MB, deberías establecerlo en al menos 40m

Ejemplo de ajuste de configuración:

proxy-body-size: 40m  # Increase this value based on your recording size needs

Después de actualizar la configuración, aplica los cambios a tu despliegue para que surtan efecto.

¿Tienes problemas para configurar este complemento? Conéctate a nuestro Slack o consulta nuestro Foro y obtén ayuda de nuestra comunidad.