La siguiente línea instalará el rastreador y con él el SDK para que aproveches todas las características del rastreador.

npm i @openreplay/tracker

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

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

Si tu sitio web es una Aplicación de una sola página (SPA), usa 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 es Renderizada en el servidor (SSR) (es decir, NextJS, NuxtJS), usa el fragmento de código a continuación. Asegúrate de que tracker.start() se llame una vez que la aplicación haya comenzado (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 se requiere projectKey.

• 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 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 rastreador automáticamente comenzará una nueva. También se devuelve en stop(). Más detalles aquí.
• ingestPoint?: string Tu dominio OpenReplay (es decir, https://openreplay.mydomain.com/ingest), al que el rastreador enviará eventos. Esto es opcional para los usuarios de OpenReplay Cloud. 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 públicamente accesible donde los activos (estilos, fuentes e íconos) podrían ser obtenidos por OpenReplay. 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 ende los activos) alojados 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 agrega el atributo HTML data-openreplay-capture a la etiqueta <iframe>. Predeterminado: true.
• disableClickmaps?: boolean Para desactivar el cálculo de selectores CSS (utilizado en los mapas de clics). Predeterminado: false.
• verbose?: boolean Para habilitar registros. Predeterminado: false.
• autoResetOnWindowOpen?: boolean Activa esta opción para restablecer el ID de sesión al abrir una nueva pestaña desde tu aplicación. Esto sobrescribe el método window.open para evitar ID de sesión duplicados debido al almacenamiento de sesión compartido entre pestañas del navegador. Predeterminado: false.
• forceSingleTab: boolean Desactiva la capacidad de grabación en múltiples pestañas que une las sesiones de usuario, realizadas en varias pestañas, en una sola reproducción. En cambio, al habilitar esta opción, las sesiones capturadas en diferentes pestañas del navegador se grabarán en grabaciones separadas. Predeterminado: false.
• disableStringDict: boolean Desactiva la lógica del diccionario de cadenas (para optimizar el almacenamiento) en las grabaciones. 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 hacer que el resultado final sea más pequeño en tamaño). Predeterminado: false.
• disableCanvas?: boolean Desactiva la grabación de elementos canvas. Predeterminado: false.
• assistSocketHost?: string Puede usarse para establecer un host específico para la conexión del plugin assist. Su valor predeterminado es el valor de ingestPoint.

• respectDoNotTrack?: boolean No iniciar el rastreador si la bandera de no seguimiento está activada en el navegador del usuario. Predeterminado: false.
• obscureTextEmails?: boolean Oculta correos electrónicos en elementos de texto. Los correos electrónicos se convertirán en una cadena aleatoria de asteriscos. Predeterminado: true.
• obscureTextNumbers?: boolean Oculta números en elementos de texto. Los números se convertirán en una cadena aleatoria de asteriscos. Predeterminado: false.
• obscureInputEmails?: boolean Oculta correos electrónicos en campos de entrada. Los valores de los correos electrónicos se convertirán en una cadena aleatoria de asteriscos. Predeterminado: true.
• defaultInputMode?: 0 | 1 | 2 Modo de captura predeterminado para valores de entrada. Respectivamente: claro, oscurecido o ignorado. Predeterminado: 1 (oscurecido).

Ten en cuenta que los datos excluidos se oscurecen 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 más detalles.

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

• captureExceptions?: boolean Captura excepciones de JavaScript y trazas de pila. Predeterminado: true.

• captureResourceTimings?: boolean Registra los tiempos de los recursos. Predeterminado: true.
• capturePageLoadTimings?: boolean Registra los tiempos de carga de la página. 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. Predeterminado: true.

• capturePerformance?: boolean Para capturar métricas de rendimiento como la tasa de fotogramas, el consumo de CPU y memoria. Predeterminado: true.

La opción network se relaciona con la captura de solicitudes y cargas útiles de red 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 ejemplos y más detalles sobre cómo redactar 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 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
	}

Consulta Seguimiento de iFrames entre dominios 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 completamente el cálculo del selector. 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 incurrir en una sobrecarga significativa, no la establezcas en un valor superior a 2000. Predeterminado: 1000.
• maxOptimiseTries?: number Número de intentos para optimizar y acortar el selector. Predeterminado: 10 000.

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

• onFlagsLoad callback utilizado para realizar una acción una vez que los feature flags se han cargado (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 rastreador y el backend en sitios sin SSL. Esto debería usarse solo con fines de desarrollo. Predeterminado: false.