Установка трекера OpenReplay в проект на основе Gatsby относительно проста. Учитывая, что Gatsby использует React под капотом, всё, что нам нужно сделать, — это добавить код трекера на главную страницу и вызвать метод start с помощью хука useEffect.

Давайте взглянем.

Отсутствие динамического контента в вашем приложении не означает, что вы не хотите воспользоваться некоторыми другими возможностями OpenReplay.

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

Вы можете использовать метрики производительности, web vitals и даже метрики, связанные с ресурсами, чтобы получить общее представление о том, каков опыт ваших пользователей при работе с вашим сайтом.

Допустим, у вас есть статический сайт Gatsby, точкой входа которого является файл index.tsx внутри папки pages, — в него вам нужно добавить следующий код.

Вы можете использовать трекер как singleton-экземпляр, что является рекомендуемым способом его использования. Таким образом, вы можете обращаться к трекеру из любой части вашего приложения:

import { tracker } from '@openreplay/tracker'

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

const Index = ({data, location }) => {

	React.useEffect(() => {
		tracker.start();
	}, [])

	 //the rest of your code here...
}

Или вы можете использовать класс Tracker напрямую, чтобы управлять его экземпляром вручную:

import Tracker from '@openreplay/tracker';
const tracker = new Tracker({
  projectKey: process.env.GATSBY_OPENREPLAY_PROJECT_KEY
});

const Index = ({data, location }) => {

  React.useEffect(() => {
    tracker.start();
  }, [])

   //the rest of your code here...
}

Трекер создаётся при компиляции страницы (будь то SSR или клиентский рендеринг), но метод start можно вызвать только из браузера, поэтому нам нужно убедиться, что он вызывается после монтирования компонента (отсюда здесь и хук useEffect). Пустой массив в качестве второго аргумента хука useEffect гарантирует, что колбэк будет выполнен только один раз.

💡Примечание для self-hosted пользователей: если вы используете self-hosted версию OpenReplay, вам также потребуется указать свойство конфигурации ingestPoint при создании экземпляра трекера. Это свойство задаёт конечную точку приёма данных трекера. Облачным пользователям это не нужно, потому что по умолчанию трекер будет знать, где находится SaaS-версия этой конечной точки, но если вы размещаете его самостоятельно, вам нужно будет её указать (она должна выглядеть примерно так: https://openreplay.mydomain.com/ingest)

В качестве меры безопасности мы рекомендуем не прописывать project key прямо в коде. Это значит, что вам придётся экспортировать его как переменную окружения, чтобы Gatsby мог её прочитать.

Тогда project key OpenReplay будет храниться в переменной с именем GATSBY_OPENREPLAY_PROJECT_KEY

Обратите внимание, что имя имеет префикс GATSBY_, который сообщает Gatsby, что переменная также должна быть доступна во фронтенд-коде. В противном случае вы не сможете прочитать значение, если только не выполняете код Node.js.

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

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