Использование OpenReplay с React
Запуск трекера в приложении React довольно прост.
Добавление кода отслеживания
Section titled Добавление кода отслеживанияХотя вы можете получить версию кода для копирования и вставки непосредственно с платформы при создании нового проекта, этот код слишком упрощен и сделает настройку и добавление дополнительных плагинов гораздо сложнее.
Если вы создаете SPA (одностраничное приложение), все, что вам нужно сделать, это добавить следующий код в вашу точку входа:
import Tracker from '@openreplay/tracker';
const tracker = new Tracker({
projectKey: "<ваш ключ проекта>",
});
function YourMainComponent({props}) {
//здесь немного кода...
useEffect(() => {
tracker.start();
}, [])
return //....
}Другими словами, вы можете создать экземпляр трекера в начале скрипта, и как только страница загружается, вы можете запустить его, используя хук useEffect.
Обработка “projectKey” в вашем коде
Section titled Обработка “projectKey” в вашем кодеКак замечание, projectKey, который вы настраиваете, предоставляется платформой OpenReplay. Это значение не должно храниться в коде в явном виде по соображениям безопасности, а должно быть в каком-то конфигурационном файле/системе.
Есть разные варианты решения этой проблемы в зависимости от вашей настройки, вы могли бы использовать что-то вроде поддержки переменных ENV от create-react-app.
Создаете что-то более сложное?
Section titled Создаете что-то более сложное?Если вы создаете сложное приложение с React, скорее всего, вы используете Next, Remix или что-то подобное. Обязательно ознакомьтесь с нашим разделом настройки, чтобы найти фреймворк, с которым вы работаете.
Есть вопросы?
Section titled Есть вопросы?Если у вас возникли проблемы с настройкой трекера в вашем проекте React, пожалуйста, свяжитесь с нами в нашем сообществе Slack и задайте вопросы нашим разработчикам напрямую!
