Установка трекера OpenReplay в проект на основе Svelte относительно проста.

Ключом к тому, чтобы это заработало, будет использование контекста, который, хотя и звучит похоже на то, как мы это делаем с Next.js, реализуется иначе.

Поскольку нашему трекеру для работы требуется контекст браузера, вам может понадобиться скорректировать пример «Создание контекста трекера», как показано ниже, чтобы гарантировать, что он импортируется и создаётся на стороне клиента:

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    if (process.browser) {
			// singleton approach
			const { tracker } = await import('@openreplay/tracker');
			tracker.configure({
				projectKey: "<your project key>", 
        ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
			});
			tracker.start();
			
			// or you can use a class based approach
      const Tracker = await import('@openreplay/tracker');
      const tracker = new Tracker({
	      projectKey: "", // pKey
	      ingestPoint: "ingestPoint",
      })
      
      tracker.start()
    }
  })
</script>

Если вы хотите ознакомиться с полным кодом этого проекта, посмотрите репозиторий, который мы будем использовать на протяжении всего этого руководства.

Это пример приложения на SvelteKit, которое вы можете клонировать и протестировать самостоятельно, следуя инструкциям в файле Readme. После развёртывания и настройки вы сможете записывать повторы сессий.

Это решение будет использовать контекст Svelte, который позволяет обмениваться данными между родительским компонентом и всеми его дочерними элементами (во многом подобно провайдерам контекста в React).

В этом конкретном примере мы добавим трекер для раздела Admin нашего приложения, поэтому установим контекст в файле layout раздела Admin (src/layout/Admin.svelte). Затем мы запустим его на первой странице, отрендеренной внутри этого раздела.

Внутри файла src/layout/Admin.svelte, в теге script, добавим следующий код:

import {Tracker, key} from "../context/tracker"

let tracker = new Tracker({
    projectKey: __myapp.env.OPENREPLAY_PROJECT_KEY
});
  
setContext(key, {
 getTracker: () => tracker
} )

Разумеется, в этом файле будет больше кода, но то, что вы видите выше, важно для нас сейчас.

1. Сначала мы импортируем Tracker из OpenReplay и переменную key (подробнее о них через секунду).
2. Затем мы создаём экземпляр Tracker. Как видите, единственный параметр конфигурации, который мы используем, — это ключ проекта, который вы получаете в интерфейсе после настройки проекта в OpenReplay.
3. Мы сохраняем экземпляр трекера в контексте, созданном вызовом setContext. Переменная key позже будет использоваться для извлечения этого конкретного значения из контекста.

Использование контекста (и вызов метода start) так же просто, как получение контекста через функцию getContext из Svelte.

Контекст содержал объект с функцией под названием getTracker, поэтому мы деструктурируем его и вызовем эту функцию.

import {key} from "../../context/tracker"
  
let {getTracker} = getContext(key)
onMount( () => {
	let tracker = getTracker()
	tracker.start()
})

После этого остаётся лишь вызвать метод start внутри колбэка onMount. Мы делаем это, чтобы гарантировать, что вызываем этот метод из браузера, иначе трекер не будет работать.

Мы использовали этот файл в обоих местах, поэтому пришло время быстро взглянуть на него.

Этот файл экспортирует два основных элемента:

1. Класс Tracker, экземпляр которого мы создали в файле layout.
2. Мы используем переменную key для сохранения и извлечения контекста.

Вот содержимое файла:

import Tracker from '@openreplay/tracker'

const key = Symbol("openreplay tracker")

export {Tracker, key}

Единственный интересный момент здесь в том, что переменная key — это не просто строка, а на самом деле Symbol. Причина в том, чтобы избежать возможных коллизий имён с другими сторонними библиотеками, которые также используют контекст.

Последнее, что нужно здесь рассмотреть, — это как мы обрабатываем ключ проекта, поскольку он не должен быть жёстко прописан в вашем коде.

Обычно для этого вы бы использовали переменную окружения, однако, поскольку нам нужны эти данные в браузере, а Svelte не предоставляет простого способа добиться этого, мы решим эту проблему с помощью двух пакетов: dotevn и @rollup/plugin-replace.

С одной стороны, мы будем использовать пакет dotenv, чтобы получить возможность определять наши переменные окружения внутри файла .env. Мы определим ту, которая нам нужна:

OPENREPLAY_PROJECT_KEY="<YOUR PROJECT KEY>"

С другой стороны, поскольку мы не можем использовать dotenv в нашем front-end коде (потому что он зависит от модуля fs, который явно недоступен в браузере), мы будем использовать плагин replace для rollup. Этот плагин будет заменять код в наших файлах на то, что мы ему укажем. Таким образом, мы настроим плагин на замену строки “__myapp.env.OPENREPLAY_PROJECT_KEY” на фактический ключ проекта, загруженный из файла .env (благодаря пакету dotenv).

Чтобы сделать это, откройте файл rollup.config.js в корне проекта и добавьте следующий код в ключ plugins.

replace({
  "__myapp.env.OPENREPLAY_PROJECT_KEY": `"${process.env.OPENREPLAY_PROJECT_KEY}"`
})

Этот плагин будет выполняться на бэкенде во время процесса сборки (bundling), что делает всё это возможным. Если вы хотите изучить полное содержимое этого конфигурационного файла, вы можете посмотреть его здесь.

Вы можете посмотреть этот репозиторий, чтобы получить полный исходный код рабочего приложения на основе Svelte с Tracker.

Если у вас возникнут какие-либо проблемы с настройкой Tracker в вашем проекте на Svelte, свяжитесь с нами в нашем сообществе Slack и задайте вопрос нашим разработчикам напрямую!