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

npm i @openreplay/tracker

Al instanciar el tracker de OpenReplay, hay 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 desde 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 siguiente fragmento. 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 obligatoria.

• projectKey: string El ID del proyecto que estás rastreando.
• sessionHash?: string El hash de la sesión inicial. Esto es útil cuando las sesiones atraviesan diferentes subdominios en tu aplicación web pero deseas unirlas en una única 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 sobre esto aquí.
• ingestPoint?: string Tu dominio de OpenReplay (es decir, https://openreplay.mydomain.com/ingest), al que el tracker enviará los eventos. Esto es opcional para los usuarios de OpenReplay Cloud. Por defecto: 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 donde OpenReplay puede obtener los recursos (estilos, fuentes e iconos). Dado que son necesarios para una reproducción de sesión correcta, esta opción es ú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>. Por defecto: true.
• disableClickmaps?: boolean Para deshabilitar el cálculo de selectores CSS (utilizado en los mapas de clics). Por defecto: false.
• __debug__: number Para habilitar los registros de depuración. Por defecto: 0 (deshabilitado).
  • 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. Por defecto: false.
• forceSingleTab: boolean Deshabilita la capacidad de grabación multipestaña que une las sesiones de usuario, realizadas a través de múltiples pestañas, en una única 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. Por defecto: false.
• disableStringDict: boolean Deshabilita la lógica del diccionario de cadenas (para optimizar el almacenamiento) en las grabaciones. Por defecto: 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 sea de menor tamaño). Por defecto: false.
• disableCanvas?: boolean Deshabilita la grabación de elementos canvas. Por defecto: false.
• assistSocketHost?: string Puede utilizarse para establecer un host específico para la conexión del plugin assist. Por defecto, toma el valor de ingestPoint.
• nodes?: { maintainer: MaintainerOptions } La nueva opción nodes.maintainer ayuda a gestionar la memoria y a limpiar los nodos DOM que ya no se utilizan. Tiene los siguientes parámetros:
  • interval: number: Intervalo de tiempo (en milisegundos) entre las ejecuciones de limpieza. Por defecto: 30 * 1000 (30 segundos).
  • batchSize: number: Número de nodos a comprobar durante cada ejecución de limpieza. Por defecto: 2500.
  • enabled: boolean: Habilita o deshabilita el mantenedor de nodos. Por defecto: true.

• inlineCss: number: Fuerza al tracker a grabar y enviar las hojas de estilo remotas como mensajes regulares en lugar de almacenarlas en caché en el backend. Esto es ú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 es almacenado en caché por el backend. Comportamiento por defecto.
  • 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 aplicaciones construidas con la librería emotion-js (es decir, componentes MUI). Viene con los siguientes parámetros:
  • scanInMemoryCSS: boolean: Actívalo si tienes problemas con los estilos creados por emotionjs. Por defecto: false.
  • checkCssInterval: number: Con qué frecuencia escanear las hojas de estilo rastreadas que tienen reglas vacías. Por defecto: 200 (ms).
  • checkLimit: number: Útil para casos con un número limitado de mutaciones y/o cuando las hojas de estilo se hidratan en el cliente tras el renderizado inicial. Se aplica a cada hoja de estilo individualmente. El valor debe ser = X/checkCssInterval donde X es la duración de la observación en ms. Por defecto: 0 (deshabilitado).

• respectDoNotTrack?: boolean No iniciar el tracker si el indicador do-not-track está habilitado en el navegador del usuario. Por defecto: 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. Por defecto: true.
• obscureTextNumbers?: boolean Oculta los números en los elementos de texto. Los números se convertirán en una cadena aleatoria de asteriscos. Por defecto: 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. Por defecto: 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 deshabilita, asegúrate de sanear los campos de entrada que puedan contener datos sensibles como códigos postales o detalles de tarjetas de crédito. Por defecto: true.
• obscureInputDates?: boolean Oculta las fechas en los campos de entrada. Los valores de fecha se convertirán en una cadena aleatoria de asteriscos. Por defecto: false.
• defaultInputMode?: 0 | 1 | 2 Modo de captura por defecto para los valores de entrada. Respectivamente: plano, oculto o ignorado. Por defecto: 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 se suprimen antes de enviar los datos 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 más detalles.

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

• captureExceptions?: boolean Captura las excepciones de JavaScript y los stacktraces. Por defecto: true.

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

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

La opción network se relaciona con la captura de peticiones de red y payloads 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 más detalles sobre cómo ocultar datos sensibles.

La opción canvas se relaciona con 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 relaciona con la captura de iFrames de diferentes dominios. Se usa en conjunto con la opción captureIFrames, que debe estar establecida 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 dominio cruzado.

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

La opción mouse se relaciona con la captura de selectores para los clics con el fin de construir mapas de clics.

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

• disableClickmaps?: boolean Deshabilita por completo el cálculo de selectores. Por defecto: false.
• minSelectorDepth?: number Longitud mínima de un selector optimizado (por defecto 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. Por defecto: 1000.
• maxOptimiseTries?: number Número de intentos para optimizar y acortar el selector. Por defecto: 10 000.

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

• onFlagsLoad callback utilizado para realizar una acción una vez que se cargan las feature flags (cada vez).

 flags?: {
 	onFlagsLoad?: (flags: IFeatureFlag[]) => void
 } 

// ...
interface IFeatureFlag {
  key: string
  is_persist: boolean
  value: string | boolean
  payload: string
}

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