Utiliser OpenReplay avec Electron

Comment enregistrer une application Electron avec OpenReplay.

Utiliser OpenReplay avec Electron

Il existe deux approches différentes pour intégrer OpenReplay dans une application Electron.

Quelle que soit celle que vous choisirez, vous devrez vérifier vos paramètres CSP afin d’autoriser les API suivantes :

  • WebWorkers (utilisés pour stocker, encoder et envoyer des lots de messages)
  • Websockets (utilisés dans le plugin assist pour transmettre les sessions en temps réel)
  • Peers (utilisés dans le plugin assist pour les appels)

Vous pouvez ajouter le code du snippet OpenReplay directement à la racine du fichier HTML de votre application. C’est la méthode la plus simple, mais elle comporte aussi toutes les restrictions du snippet JS.

Si vous utilisez React, Angular ou Vue, vous pouvez adopter exactement la même approche et créer l’instance du tracker dans le processus de rendu au sein de votre application. Cela vous permettra d’utiliser toutes les fonctionnalités d’OpenReplay, y compris tous les plugins.

Pour utiliser l’API du tracker en dehors du contexte de rendu, vous devrez recourir à l’IPC pour déclencher des actions au moyen des événements que vous envoyez depuis le processus principal.

Utilisation avec le plugin Assist

Section titled Utilisation avec le plugin Assist

Dans le cas du plugin Tracker-Assist, vous devrez ajouter la propriété socketHost qui pointera vers votre point d’ingestion sans le suffixe /ingest afin d’assurer un routage WS par défaut correct.

pour la bibliothèque 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' }))

pour le snippet de code :

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

Sinon, WS tentera de créer la connexion sur ws://file/ingest, ce qui échouera.