Запуск трекера в приложении React довольно прост.

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

Если вы создаёте SPA (одностраничное приложение), всё, что вам нужно сделать, — это добавить следующий код в вашу точку входа:

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
});

function YourMainComponent({props}) {
    //some code here...

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

    return //....
}

Другими словами, вы можете создать экземпляр трекера в начале скрипта, и как только страница загрузится, вы можете запустить его с помощью хука useEffect.

Обратите внимание, что projectKey, который вы настраиваете, предоставляется платформой OpenReplay. По соображениям безопасности это значение не должно храниться в коде в явном виде, а лучше — в каком-либо конфигурационном файле/системе.

Существуют разные варианты решения этой проблемы; в зависимости от вашей настройки вы можете использовать что-то вроде поддержки переменных ENV в create-react-app.

Если вы создаёте сложное приложение на React, скорее всего, вы используете Next, Remix или что-то подобное. Обязательно ознакомьтесь с нашим разделом настройки, чтобы найти фреймворк, с которым вы работаете.

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