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 los mapas de clics. Predeterminado: true.
• 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 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. Predeterminado: false.
• disableStringDict: boolean Desactiva la lógica del diccionario de cadenas (para optimizar el almacenamiento) en las grabaciones. Predeterminado: false.
• fixedCanvasScaling: boolean Fuerza 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)

• 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 Sanear Datos 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 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 ocultar datos sensibles.

La opción mouse se relaciona con la captura de selectores para clics para 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 establezcas más de 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 intentos de reconexión cuando las solicitudes HTTP del rastreador no logran llegar al backend. Predeterminado: 10.
• connAttemptGap?: number Duración entre cada intento de reconexión (expresada en ms). Predeterminado: 8000.

• __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.