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

Когда ваш проект Remix готов, найдите файл root.jsx внутри папки app и добавьте SSR-код, предоставленный OpenReplay при создании проекта на платформе.

Вы вполне можете использовать код, который предлагает платформа, — он представляет собой минимум, необходимый для начала работы. Если вы так и сделаете, обязательно выберите опцию «Server-Side-Rendered (SSR)», как показано ниже.

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

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

Для этого примера мы создадим демонстрационный модуль, который сохраним как tracker.ts внутри папки app. Этот модуль будет экспортировать функцию под названием startTracker, которая создаст экземпляр трекера и запустит его.

import {v4 as uuidV4} from 'uuid'
import Tracker from '@openreplay/tracker'

function defaultGetUserId() {
    return uuidV4() 
}

type TrackerConfig = {
    projectKey: string,
    userIdEnabled?: boolean,
    getUserId?: () => string
}

export function startTracker(config: TrackerConfig) {
    let tracker = null;
    let userId = "";
   
    console.log("Starting tracker...")
    console.log("Custom configuration received: ", config)
        
    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
        
    const trackerConfig: TrackerConfig = {
        projectKey: config?.projectKey
    }
        
    console.log("Tracker configuration")
    console.log(trackerConfig)
    tracker = new Tracker(trackerConfig);
        
    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
     
    tracker.start();
      
    return {
        tracker,
        userId
    }
}

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

import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
    return uuidV4() 
}

type TrackerConfig = {
    projectKey: string,
    userIdEnabled?: boolean,
    getUserId?: () => string
}

export function startTracker(config: TrackerConfig) {
    let tracker = null;
    let Tracker = null
    let userId = "";
    
    (async () => {
				//dynamic import 
        Tracker  = (await import('@openreplay/tracker')).default 
        console.log("Starting tracker...")
        console.log("Custom configuration received: ", config)
        
        const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
        
        const trackerConfig: TrackerConfig = {
            projectKey: config?.projectKey
        }
        
        console.log("Tracker configuration")
        console.log(trackerConfig)
        tracker = new Tracker(trackerConfig);
        
        if(config?.userIdEnabled) {
            userId = getUserId()
            tracker.setUserID(userId)
        }
        
        
        tracker.start();
        
    })()
    
    return {
        tracker,
        userId
    }
}

Покончив с этим, вам нужно установить пакет трекера для вашего проекта с помощью:

$ npm install @openreplay/tracker

Вам также потребуется установить пакет uuid, чтобы приведённый выше код работал как есть.

Как только это будет сделано, мы почти готовы начать отслеживание, но нам всё ещё нужно настроить ключ проекта в виде переменной окружения (ENV) и каким-то образом передать его трекеру через объект config, получаемый функцией startTracker.

Переменные ENV доступны на бэкенде, поэтому мы воспользуемся функцией loader, которую можно использовать для загрузки любых внешних данных, включая переменные ENV.

А затем мы используем хук useLoaderData, чтобы после гидратации наш компонент имел доступ к загруженным данным.

Внутри нашего файла root.tsx (или jsx, если вы не используете TypeScript) добавьте эту функцию:

type LoaderData = {
  ENV: {
    projectKey: string | undefined
  }
};

export const loader: LoaderFunction = async ({ }) => {
  return json<LoaderData>({
    ENV: {
      projectKey: process.env.OPENREPLAY_PROJECT_KEY
    }
  });
};

Обратите внимание, как мы настраиваем наш ключ проекта внутри переменной ENV OPENREPLAY_PROJECT_KEY.

Возвращая его в рамках выполнения функции loader, мы затем можем использовать хук useLoaderData внутри основного компонента, например, так:

export default function App() {

  let loaderData = useLoaderData()

  useEffect(() => {
    startTracker({
      projectKey:  loaderData.ENV.projectKey
    })
  }, []) 

  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

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

Покончив с этим, вы можете перейти к развёртыванию вашего приложения.

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

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

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