Las grabaciones aparecen en el panel de control unos minutos (~4 min) después de que finaliza una sesión. Una sesión se considera finalizada cuando el usuario cierra la pestaña o el navegador, se desconecta (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 ninguna nueva.

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

Antes de comenzar a depurar las grabaciones de sesión, asegúrate de estar capturando todo el tráfico. Haz clic en el botón Manage en la sección Sessions y activa 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 opciones.

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 usar el callback de inicio del tracker y registrar un mensaje al iniciar.

const tracker = new OpenReplay({
	projectKey: PROJECT_KEY,
});

tracker.start().then(({sessionID}) => console.log("OpenReplay tracker started with session: ", sessionID))
// OR you can use startCallback method
tracker.start({
	startCallback: ({ sessionID }) => console.log("OpenReplay tracker started with session: ", sessionID)
});
// for snippet, just add startCallback to initOpts

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 de abajo, entonces OpenReplay no pudo iniciarse debido a la falta de una política de seguridad de contenido. Consulta aquí la política que debes añadir.

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í, añade 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, de modo 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 de acceso público. Si tus recursos están alojados en un dominio restringido (privado o protegido), OpenReplay no podrá copiarlos y 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 frames anidados, asegúrate de usar una ruta absoluta (en los elementos <link> que apuntan a tus archivos CSS) en cada frame incrustado, o usa la opción resourceBaseHref para especificar el dominio en el constructor del tracker.

En caso de que estés probando 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 más alto), es posible que notes una pantalla negra durante la reproducción de las sesiones grabadas. Eso ocurre porque la API web aún no nos permite capturar el canal alfa. Si ese es el caso de tu aplicación web, añade el atributo HTML data-openreplay-hidden al elemento canvas problemático para ocultarlo por completo de la grabación de 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 de acceso público. Si están en una CDN, asegúrate de conservar 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 distribuyen entre muchos subdominios generarán múltiples sesiones para la misma visita. Puedes unirlas en una única grabación pasando sessionHash al método start() del tracker. El sessionHash puede guardarse y luego recuperarse desde tu almacenamiento entre dominios (por ejemplo, cookies).

// Initialize the tracker as you would normally do
import { tracker } from '@openreplay/tracker'

tracker.configure({
  projectKey: PROJECT_KEY
})

// or with class instance:
import OpenReplay from '@openreplay/tracker'

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
// then 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 única página visitada y que terminan en cuanto un usuario navega a otra página. Esto suele ocurrir en sitios web que no son aplicaciones de página única (SPAs). Para solucionarlo, se debe llamar a tracker.start() en cada página.

Si no estás autoalojando OpenReplay sino que usas nuestra solución alojada, es probable que algunas sesiones no se graben porque las solicitudes a nuestros servidores pueden estar bloqueadas. Esto suele ser causado por 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.