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

npm i @openreplay/tracker

Al instanciar el tracker de OpenReplay, dispones de varias opciones de configuración 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), utiliza el siguiente código:

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,
});
//...
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 atraviesan diferentes subdominios de tu aplicación web pero quieres 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. 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 donde OpenReplay podría obtener los recursos (estilos, fuentes e iconos). Dado que son necesarios para una correcta reproducción de la sesión, 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>. Valor predeterminado: true.
• disableClickmaps?: boolean Para desactivar el cálculo de selectores CSS (utilizado en los mapas de clics). Valor predeterminado: false.
• verbose?: boolean Para habilitar los registros. Valor predeterminado: false.
• 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 ú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. 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 elementos canvas. Valor predeterminado: false.
• assistSocketHost?: string Se puede usar para establecer un host específico para la conexión del plugin Assist. De forma predeterminada toma el valor de ingestPoint.

• 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. Valor predeterminado: false.
• 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: en texto plano, oculto o ignorado. Valor predeterminado: 1 (oculto).

Ten en cuenta que los datos excluidos se ocultan o 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 Sanear Datos para 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 la 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, el consumo de CPU y de memoria. Valor predeterminado: true.

La opción network se relaciona con la captura de las solicitudes de red y las 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 Opciones de Red para ver ejemplos y más detalles sobre cómo censurar 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 y 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 utiliza junto 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
	}

Consulta Seguimiento de iFrames de dominios cruzados 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 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 acarrear 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.

• onFlagsLoad callback que se utiliza para realizar una acción una vez que se cargan los 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 solo debe utilizarse con fines de desarrollo. Valor predeterminado: false.