La siguiente línea instalará el tracker y, con él, el SDK para que puedas aprovechar todas las funciones del tracker.

npm i @openreplay/tracker

Al instanciar el tracker de OpenReplay, existen varias opciones de configuración que puedes proporcionar para personalizar muchos aspectos de la grabación y de la experiencia de grabación.

Debes establecer la opción projectKey en el constructor. Puedes obtener este valor en tu panel de OpenReplay en ‘Preferences > Projects’.

Si tu sitio web es una aplicación de página única (SPA), puedes usar el tracker como singleton:

import { tracker } from '@openreplay/tracker'

tracker.configure({
	projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
})

tracker.start() // returns a promise with session info (sessionID, sessionHash, userUUID)

Como alternativa, puedes crear una nueva instancia de clase:

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
tracker.start(); // returns a promise with session info (sessionID, sessionHash, userUUID)

De lo contrario, si tu aplicación web utiliza renderizado del lado del servidor (SSR) (es decir, NextJS, NuxtJS), usa el fragmento de código siguiente. Asegúrate de que tracker.start() se llame una vez que la aplicación se haya iniciado (en useEffect o componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY,
      ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});
//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start(); // returns a promise with session info (sessionID, sessionHash, userUUID)
  }, [])
}

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY,
      ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
      capturePerformance: true,
      __DISABLE_SECURE_MODE: true // for local testing
});

Hay un conjunto de opciones que puedes pasar al constructor. Solo projectKey es obligatorio.

• projectKey: string El ID del proyecto que estás rastreando.
• sessionHash?: string El hash de la sesión inicial. Esto resulta útil cuando las sesiones recorren diferentes subdominios de tu aplicación web pero quieres unirlas en una sola grabación. En caso de que no sea posible continuar la sesión (no existe o ha finalizado), el tracker iniciará automáticamente una nueva. También se devuelve en stop(). Más detalles al respecto aquí.
• ingestPoint?: string Tu dominio de OpenReplay (es decir, https://openreplay.mydomain.com/ingest), al que el tracker enviará los eventos. Es opcional para los usuarios de OpenReplay Cloud. Valor predeterminado: https://api.openreplay.com/ingest (que apunta a OpenReplay Cloud).
• revID?: string El ID de revisión de tu aplicación web. Útil al buscar problemas que ocurren en una versión de lanzamiento específica.
• resourceBaseHref?: string Se refiere al dominio de acceso público desde el que OpenReplay puede obtener los recursos (estilos, fuentes e iconos). Dado que son necesarios para una correcta reproducción de la sesión, esta opción resulta útil para sortear la limitación de tener tu sitio (y, por tanto, los recursos) alojado en un dominio privado. Ejemplo: https://mypublicsite.com/assets/.
• captureIFrames?: boolean Para capturar todos los iFrames del mismo dominio en tu aplicación web. Si deseas rastrear un iFrame específico, simplemente añade el atributo HTML data-openreplay-capture a la etiqueta <iframe>. Valor predeterminado: true.
• disableClickmaps?: boolean Para desactivar el cálculo de selectores CSS (utilizado en los mapas de clics). Valor predeterminado: false.
• __debug__: number Para habilitar los registros de depuración. Valor predeterminado: 0 (desactivado).
  • 2: Errores.
  • 3: Errores y advertencias.
  • 4: Errores, advertencias y registros.
  • 5: Detallado.
• autoResetOnWindowOpen?: boolean Habilita esta opción para restablecer el sessionID al abrir una nueva pestaña desde tu aplicación. Esto sobrescribe el método window.open para evitar sessionIDs duplicados debido al almacenamiento de sesión compartido entre las pestañas del navegador. Valor predeterminado: false.
• forceSingleTab: boolean Desactiva la capacidad de grabación multipestaña que une las sesiones de usuario, realizadas en varias pestañas, en una sola reproducción. En su lugar, al habilitar esta opción, las sesiones capturadas en diferentes pestañas del navegador se grabarán en grabaciones separadas. Valor predeterminado: false.
• disableStringDict: boolean Desactiva la lógica del diccionario de cadenas (para optimizar el almacenamiento) en las grabaciones. Valor predeterminado: false.
• fixedCanvasScaling: boolean Fuerza a que las imágenes del canvas se rendericen con una densidad de píxeles de 1 en lugar de devicePixelRatio. (reduce la calidad potencial de una imagen para que el resultado final tenga un tamaño menor). Valor predeterminado: false.
• disableCanvas?: boolean Desactiva la grabación de los elementos canvas. Valor predeterminado: false.
• assistSocketHost?: string Se puede usar para establecer un host específico para la conexión del plugin assist. Su valor predeterminado es el de ingestPoint.
• nodes?: { maintainer: MaintainerOptions } La nueva opción nodes.maintainer ayuda a administrar la memoria y a limpiar los nodos del DOM que ya no se utilizan. Tiene los siguientes parámetros:
  • interval: number: Intervalo de tiempo (en milisegundos) entre las ejecuciones de limpieza. Valor predeterminado: 30 * 1000 (30 segundos).
  • batchSize: number: Número de nodos que se comprueban durante cada ejecución de limpieza. Valor predeterminado: 2500.
  • enabled: boolean: Activa o desactiva el mantenedor de nodos. Valor predeterminado: true.

• inlineCss: number: Fuerza al tracker a grabar y enviar las hojas de estilo remotas como mensajes normales en lugar de almacenarlas en caché en el backend. Esto resulta útil cuando los archivos CSS son privados y, por lo tanto, no pueden ser almacenados en caché por el backend de OpenReplay. Los valores pueden ser:
  • 0: El archivo CSS se almacena en caché en el backend. Comportamiento predeterminado.
  • 1: Intentará grabar el archivo css enlazado como un objeto AdoptedStyleSheet.
  • 2: Obtiene el archivo y luego simula el comportamiento de AdoptedStyleSheets para la reproducción.
  • 3: Obtiene el archivo y luego lo guarda como css plano dentro de un nodo <style> — usa esta opción si tienes muchas propiedades abreviadas en tus archivos CSS (cubre un error de la especificación CSSOM).
• css: CssRulesOptions: Proporciona un mejor soporte para las aplicaciones creadas con la librería emotion-js (es decir, componentes MUI). Viene con los siguientes parámetros:
  • scanInMemoryCSS: boolean: Activa esto si tienes problemas con los estilos creados por emotionjs. Valor predeterminado: false.
  • checkCssInterval: number: Con qué frecuencia se escanean las hojas de estilo rastreadas que tienen reglas vacías. Valor predeterminado: 200 (ms).
  • checkLimit: number: Útil para casos con un número limitado de mutaciones o cuando las hojas de estilo se hidratan en el cliente tras el renderizado inicial. Se aplica a cada hoja de estilo de forma individual. El valor debe ser = X/checkCssInterval, donde X es la duración de la observación en ms. Valor predeterminado: 0 (desactivado).

• respectDoNotTrack?: boolean No inicia el tracker si la opción do-not-track está habilitada en el navegador del usuario. Valor predeterminado: false.
• obscureTextEmails?: boolean Oculta los correos electrónicos en los elementos de texto. Los correos electrónicos se convertirán en una cadena aleatoria de asteriscos. Valor predeterminado: true.
• obscureTextNumbers?: boolean Oculta los números en los elementos de texto. Los números se convertirán en una cadena aleatoria de asteriscos. Valor predeterminado: false.
• obscureInputEmails?: boolean Oculta los correos electrónicos en los campos de entrada. Los valores de correo electrónico se convertirán en una cadena aleatoria de asteriscos. Valor predeterminado: true.
• obscureInputNumbers?: boolean Oculta los números en los campos de entrada. Los valores numéricos se convertirán en una cadena aleatoria de asteriscos. Si se desactiva, asegúrate de sanear los campos de entrada que puedan contener datos sensibles, como códigos postales o datos de tarjetas de crédito. Valor predeterminado: true.
• obscureInputDates?: boolean Oculta las fechas en los campos de entrada. Los valores de fecha se convertirán en una cadena aleatoria de asteriscos. Valor predeterminado: false.
• defaultInputMode?: 0 | 1 | 2 Modo de captura predeterminado para los valores de entrada. Respectivamente: plano, oculto o ignorado. Valor predeterminado: 2 (ignorado).
• urls: Te permite personalizar cómo se graban los eventos de ubicación de página mediante las siguientes opciones:
  • urlSanitizer?: (url: string) => string Te permite sanear la url de la página (para eliminar tokens de uso, por ejemplo).
  • titleSanitizer?: (title: string) => string Te permite sanear el título de la página.
• resourceNameSanitizer?: (url: string) => string Te permite sanear las URLs de los recursos de red grabados.

Ten en cuenta que los datos excluidos se ocultan o suprimen antes de enviarlos a los servidores de OpenReplay. Los cambios aplicados a las opciones anteriores no pueden ser retroactivos y solo se aplicarán a los datos recién recopilados. Consulta Sanitize Data para obtener más detalles.

• consoleMethods?: Array<'log' | 'info' | 'warn' | 'error' 'debug' | 'assert'> | null Especifica la lista de métodos de consola que se capturarán. Valor predeterminado: ['log', 'info', 'warn', 'error', 'debug', 'assert']
• consoleThrottling?: number Número máximo de entradas de consola capturadas por segundo. Valor predeterminado: 30.

• captureExceptions?: boolean Captura las excepciones de JavaScript y los stacktraces. Valor predeterminado: true.

• captureResourceTimings?: boolean Registra los tiempos de los recursos. Valor predeterminado: true.
• capturePageLoadTimings?: boolean Registra los tiempos de carga de la página. Valor predeterminado: true.
• capturePageRenderTimings?: boolean Calcula métricas de renderizado de página como Speed Index, Visually Complete o Time To Interactive. Requiere captureResourceTimings = true. Valor predeterminado: true.

• capturePerformance?: boolean Para capturar métricas de rendimiento como la tasa de fotogramas y el consumo de CPU y memoria. Valor predeterminado: true.
• longTasks?: boolean Para capturar eventos long-animation-frame. Valor predeterminado: false.

La opción network se refiere a la captura de solicitudes de red y cargas útiles para fetch y XHR.

network?: {
    failuresOnly: boolean;
    sessionTokenHeader: string;
    ignoreHeaders: Array<string> | boolean;
    capturePayload: boolean; // make sure you sanitize your data before enabling it
    sanitizer: (RequestResponseData) => RequestResponseData | null;
		captureInIframes: boolean;
  	axiosInstances: AxiosInstance[];
    useProxy?: boolean;
		tokenUrlMatcher?: (url: string) => boolean;
  }

Consulta Network Options para ver ejemplos y obtener más detalles sobre cómo redactar datos sensibles.

La opción canvas se refiere a la captura de elementos canvas/WebGL:

canvas?: {
  disableCanvas?: boolean
  fixedCanvasScaling?: boolean
  useAnimationFrame?: boolean
  fileExt?: 'webp' | 'png' | 'jpeg' | 'avif'
}

Consulta Canvas and WebGL para saber cómo habilitar esta capacidad y obtener más detalles sobre las opciones disponibles.

La opción crossdomain se refiere a la captura de iFrames de diferentes dominios. Se utiliza junto con la opción captureIFrames, que debe establecerse en true.

	crossdomain?: {
		/**
		 * Enable cross-domain tracking
		 * @default false
		 * */
		enabled?: boolean
		/**
		 * Used to specify the parent domain, will be '*' by default
		 * (Check your CSP settings)
		 * @default '*'
		 * */
		parentDomain?: string
	}

A partir de la versión 14.0.10 del Tracker, el atributo data-domain ya no es necesario en los elementos HTML al trabajar con iFrames de dominios cruzados.

Consulta Cross-domain iFrame Tracking para obtener más detalles sobre cómo capturar un iFrame de un dominio diferente.

La opción mouse se refiere a la captura de selectores para los clics con el fin de crear mapas de clics.

mouse?: 
  {
  disableClickmaps?: boolean
  minSelectorDepth?: number
  nthThreshold?: number
  maxOptimiseTries?: number
  }

• disableClickmaps?: boolean Desactiva por completo el cálculo de selectores. Valor predeterminado: false.
• minSelectorDepth?: number Longitud mínima de un selector optimizado (predeterminado 2). Ejemplo: body > div > div > p => body > p
• nthThreshold?: number Número de intentos de selector antes de recurrir a los selectores nth-child. Esta es una operación costosa y puede generar una sobrecarga significativa; no la establezcas por encima de 2000. Valor predeterminado: 1000.
• maxOptimiseTries?: number Número de intentos para optimizar y acortar el selector. Valor predeterminado: 10 000.

• connAttemptCount?: number Número máximo de reintentos cuando las solicitudes HTTP del tracker no logran llegar al backend. Valor predeterminado: 10.
• connAttemptGap?: number Duración entre cada intento de reintento (expresada en ms). Valor predeterminado: 8000.

• __DISABLE_SECURE_MODE?: boolean Para permitir una conexión insegura entre el tracker y el backend en sitios sin SSL. Esto solo debe usarse con fines de desarrollo. Valor predeterminado: false.