Uso de OpenReplay con Electron

Cómo grabar una aplicación Electron con OpenReplay.

Uso de OpenReplay con Electron

Existen dos enfoques diferentes para integrar OpenReplay en una aplicación Electron.

Sea cual sea el que elijas, tendrás que revisar la configuración de tu CSP para permitir las siguientes APIs:

  • WebWorkers (se usan para almacenar, codificar y enviar lotes de mensajes)
  • Websockets (se usan en el plugin assist para transmitir las sesiones en tiempo real)
  • Peers (se usan en el plugin assist para las llamadas)

Añadir el código del fragmento

Section titled Añadir el código del fragmento

Puedes añadir el código del fragmento de OpenReplay directamente en la raíz del archivo HTML de tu aplicación. Esta es la forma más sencilla, aunque también conlleva todas las restricciones del fragmento de JS.

Si usas React, Angular o Vue, puedes utilizar exactamente el mismo enfoque y crear la instancia del tracker en el proceso de renderizado dentro de tu aplicación. Esto te permitirá usar todas las funciones de OpenReplay, incluidos todos los plugins.

Para usar la API del tracker fuera del contexto de renderizado, tendrás que usar IPC para activar acciones mediante eventos que envíes desde el proceso principal.

En el caso del plugin Tracker-Assist, tendrás que añadir la propiedad socketHost, que apuntará a tu punto de ingesta sin el sufijo /ingest para que el enrutamiento WS por defecto sea correcto.

para la biblioteca NPM:

new Tracker({ ingestPoint: 'https://mywebsite.com/ingest' })

// ...

// or https://app.openreplay.com if you're using SaaS version
tracker.use(trackerAssist({ socketHost: 'https://mywebsite.com' }))

para el fragmento de código:

  var initOpts = {
    projectKey: "...",
		ingestPoint: "https://mywebsite.com/ingest",
    assistSocketHost: "https://mywebsite.com"
  };

De lo contrario, WS intentará crear la conexión en ws://file/ingest, lo que fallará.