Using Openreplay with Electron

There are two different approaches to integrate OpenReplay into Electron app.

Whenever you will chose one of them, you will have to check your CSP settings to allow following APIs:

WebWorkers (used to store, encode and send message batches)
Websockets (used in assist plugin to transmit sessions in real time)
Peers (used in assist plugin for calls)

Adding Snippet Code

You can add OpenReplay snippet code directly to the root of the HTML file of your app. This is the easiest way, its also comes with all restrictions of JS snippet.

Using NPM library

If you’re using React, Angular or Vue, you can use exactly same approach and create tracker instance in rendering process inside your app. This will allow you to use all features of OpenReplay, including all plugins.

In order to use tracker API outside of rendering context, you will have to use IPC to trigger actions be events you’re sending from main process.

Using with Assist Plugin

In case of Tracker-Assist plugin, you will have to add socketHost property which will point to your ingest point without /ingest suffix to correct default WS routing.

for NPM library:

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' }))

for code snippet:

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

Otherwise WS will try to create connection on ws://file/ingest which will fail.