Las grabaciones aparecen en el panel unos minutos (~4 min) después de que se completa una sesión. Una sesión se considera finalizada cuando el usuario cierra la pestaña o el navegador, se desconecta (durante más de 2 min) o supera las 2 horas (en cuyo caso comienza una nueva sesión). Cada pestaña genera una nueva grabación, mientras que recargar una pestaña existente no activa una nueva.

Esta sección tiene como objetivo ayudarte a solucionar problemas comunes en las reproducciones de sesiones.

Antes de comenzar a depurar las grabaciones de sesiones, asegúrate de estar capturando todo el tráfico. Haz clic en el botón Manage en la sección Sessions y habilita Capture All.

Otro error común consiste en iniciar el tracker dos veces, lo que impide que las sesiones se graben. Esto suele ocurrir cuando los desarrolladores pasan de la configuración basada en script al uso del paquete npm, así que asegúrate de tener solo una de las dos.

Si no estás seguro de la configuración, abre el inspector del navegador y revisa la pestaña Network para ver si hay solicitudes XHR (busca “ingest”) realizadas a tu IP/dominio (o *.openreplay.com si estás en OpenReplay Cloud).

Otra forma sería actualizar el constructor del tracker y registrar un mensaje al iniciar.

const tracker = new OpenReplay({
	projectKey: PROJECT_KEY,
	onStart: ({ sessionID }) => console.log("OpenReplay tracker started with session: ", sessionID),
});

OpenReplay necesita acceso público para copiar algunos de los recursos de tu aplicación (CSS, fuentes e iconos) y así renderizar correctamente las grabaciones. Tu sitio también debe usar SSL/HTTPS, de lo contrario el tracker no se iniciará. Por estas razones, las sesiones no se capturarán en localhost, a menos que apliques esta solución alternativa.

Por razones de seguridad, el tracker solo se ejecuta en aplicaciones web que usan SSL (HTTPS). Si tu sitio está en HTTP, el tracker no se iniciará.

Si ves un error similar al siguiente, entonces OpenReplay no pudo iniciarse debido a la falta de una política de seguridad de contenido. Consulta aquí la política que debes agregar.

El script de grabación podría estar bloqueado por una extensión del navegador como un bloqueador de anuncios. Usa el inspector de tu navegador para comprobar si las solicitudes están fallando. Si es así, agrega una excepción para el dominio en el que está instalado el backend de OpenReplay (u openreplay.com si estás en la oferta en la nube).

OpenReplay lanza una excepción cuando se ejecuta en un navegador no compatible. Consulta aquí la lista de navegadores compatibles.

OpenReplay necesita acceso a recursos, como tu css, para que las reproducciones funcionen. De hecho, estos archivos se copian y luego se almacenan en caché en nuestro backend para que puedas ver grabaciones antiguas incluso si tu aplicación web ha cambiado. Por eso debes asegurarte de que tus estilos (así como los iconos y las fuentes) sean accesibles públicamente. Si tus recursos están alojados en un dominio restringido (privado o protegido), entonces OpenReplay no podrá copiarlos ni usarlos en las reproducciones. Puedes copiarlos a un dominio de acceso público y luego usar la opción resourceBaseHref para especificar el dominio en el constructor del tracker.

Si tus iFrames del mismo origen tienen marcos anidados, asegúrate de usar rutas absolutas (en los elementos <link> que apuntan a tus archivos CSS) en cada marco incrustado, o usa la opción resourceBaseHref para especificar el dominio en el constructor del tracker.

En caso de que estés haciendo pruebas en localhost, los estilos no se renderizarán ya que OpenReplay no puede acceder a ellos porque están en tu máquina. Sigue esta guía para solucionar la situación.

En raras ocasiones, la reproducción puede aparecer vacía (o en blanco). Aunque las páginas no se rendericen, aún puedes ver el movimiento del ratón del usuario. Intenta establecer la opción disableStringDict en true y comprueba si eso ayuda con las nuevas grabaciones. Esto suele resolver el problema.

Si estás usando un canvas por encima de la capa de tu frontend (con un zIndex mayor), es posible que notes una pantalla negra durante la reproducción de las sesiones grabadas. Eso sucede porque la API web aún no nos permite capturar el canal alfa. Si ese es el caso con tu aplicación web, agrega el atributo HTML data-openreplay-hidden al elemento canvas problemático para ocultarlo por completo de la grabación de la sesión.

A diferencia de los estilos, las imágenes no se almacenan en caché en OpenReplay, sino que se recuperan durante la reproducción de una sesión. Por lo tanto, deben ser accesibles públicamente. Si están en una CDN, asegúrate de conservar las versiones antiguas de tus imágenes para poder reproducir correctamente las grabaciones de sesiones antiguas.

Si tu aplicación web incluye iframes, no podrás reproducir su contenido como parte de tus grabaciones. Aún puedes iniciar OpenReplay dentro de un iframe incluyendo tracker.start(), pero se considerará como una pestaña separada, lo que significa que se capturará en una grabación separada.

Los sitios que se extienden por muchos subdominios generarán múltiples sesiones para la misma visita. Puedes unirlas en una sola grabación pasando sessionHash al método start() del tracker. El sessionHash se puede conservar y luego recuperar desde tu almacenamiento entre dominios (por ejemplo, cookies).

// Initialize the tracker as you would normally do
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
})
...
// Make sure the tracker is stopped when passing subdomains and collect the sessionHash
const sessionHash = tracker.stop(); // This can be saved in cookies or passed through URL (if needed)
...
// Initialize another tracker on the new subdomain with the same projectKey
const trackerNewDomain = new OpenReplay({
  projectKey: PROJECT_KEY
})
// Pass the sessionHash to the newly started session
trackerNewDomain.start({ 
  sessionHash, // This can be retrieved from cookies or URL (if needed)
})

En caso de que no sea posible continuar la sesión (no existe o ha finalizado), el tracker iniciará automáticamente una nueva.

Esto se puede detectar en reproducciones que tienen una sola página visitada y que terminan tan pronto como un usuario navega a otra página. Esto suele ocurrir en sitios web que no son aplicaciones de página única (SPA). Para solucionarlo, se debe llamar a tracker.start() en cada página.

Si no estás autoalojando OpenReplay sino utilizando nuestra solución alojada, es probable que algunas sesiones no se graben porque las solicitudes a nuestros servidores pueden estar bloqueadas. Esto suele deberse a bloqueadores de anuncios, VPN o extensiones del navegador.

Si tienes alguna pregunta sobre este proceso, no dudes en contactarnos en nuestro Slack o consulta nuestro Foro.