SDK de JavaScript ⁠-⁠ Inicialización del SDK

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 ‘Preferencias > Proyectos’.

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(); // devuelve una promesa con información de la sesión (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(() => { // usa componentDidMount en caso de un Componente de Clase React
tracker.start(); // devuelve una promesa con información de la sesión (sessionID, sessionHash, userUUID)
}, [])
}

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY,
ingestPoint: "https://openreplay.mydomain.com/ingest", // al tratar con la versión autoalojada de OpenReplay
capturePerformance: true,
__DISABLE_SECURE_MODE: true // para pruebas locales
});

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://misitiopublico.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 las capacidades de grabación en múltiples pestañas. Predeterminado: false.
• disableStringDict: boolean Desactiva la lógica del diccionario de cadenas (para optimizar el almacenamiento) en las grabaciones. Predeterminado: false.

• 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.
• obscureInputNumbers?: boolean Oculta números en campos de entrada. Los valores de los números se convertirán en una cadena aleatoria de asteriscos. Predeterminado: false.
• obscureInputDates?: boolean Oculta fechas en campos de entrada. Los valores de las fechas se convertirán en una cadena aleatoria de asteriscos. Predeterminado: false.
• defaultInputMode?: 0 | 1 | 2 Modo de captura predeterminado para valores de entrada. Respectivamente: claro, oscurecido o ignorado. Predeterminado: 1 (oscurecido).

Tenga 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. Vea 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 el índice de velocidad, completitud visual o tiempo hasta interactividad. 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; // asegúrate de desinfectar tus datos antes de habilitarlo
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 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 establezca 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.