Использование OpenReplay с Electron

Как записать приложение Electron с помощью OpenReplay.

Использование OpenReplay с Electron

Существует два различных подхода к интеграции OpenReplay в приложение Electron.

Какой бы из них вы ни выбрали, вам потребуется проверить настройки CSP, чтобы разрешить следующие API:

  • WebWorkers (используются для хранения, кодирования и отправки пакетов сообщений)
  • Websockets (используются в плагине assist для передачи сессий в реальном времени)
  • Peers (используются в плагине assist для звонков)

Добавление кода сниппета

Section titled Добавление кода сниппета

Вы можете добавить код сниппета OpenReplay непосредственно в корень HTML-файла вашего приложения. Это самый простой способ, но он также имеет все ограничения JS-сниппета.

Использование библиотеки NPM

Section titled Использование библиотеки NPM

Если вы используете React, Angular или Vue, вы можете применить точно такой же подход и создать экземпляр трекера в процессе рендеринга внутри вашего приложения. Это позволит вам использовать все возможности OpenReplay, включая все плагины.

Чтобы использовать API трекера вне контекста рендеринга, вам потребуется задействовать IPC для запуска действий с помощью событий, которые вы отправляете из основного процесса.

Использование с плагином Assist

Section titled Использование с плагином Assist

В случае плагина Tracker-Assist вам потребуется добавить свойство socketHost, которое будет указывать на вашу точку приёма данных без суффикса /ingest, чтобы обеспечить корректную маршрутизацию WS по умолчанию.

для библиотеки 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' }))

для сниппета кода:

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

В противном случае WS попытается создать соединение по адресу ws://file/ingest, что приведёт к ошибке.