Начать работу с OpenReplay очень просто.

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

Существует 2 способа запустить OpenReplay: с помощью скрипта или npm-пакета.

Скопируйте и вставьте фрагмент кода непосредственно в </head> вашего веб-приложения. Скрипт можно найти в панели управления OpenReplay в разделе ‘Preferences > Projects’, и он уникален для каждого проекта.

Если ваш сайт поддерживает Google Tag Manager, вы можете воспользоваться пошаговым руководством по GTM.

Сначала установите npm-пакет.

npm i @openreplay/tracker

Затем инициализируйте пакет из точки входа вашего кода и запустите трекер. Вы должны задать опцию projectKey в конструкторе. Её значение можно найти в панели управления OpenReplay в разделе ‘Preferences > Projects’.

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
tracker.start();

Используйте приведённый ниже фрагмент, если ваше веб-приложение использует серверный рендеринг (SSR) (т.е. NextJS, NuxtJS). Убедитесь, что tracker.start() вызывается после запуска приложения (в useEffect или componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY
});
//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, []);
}

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

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

React Vue Angular NextJS Nuxt

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

А пока вы можете продвинуться дальше в процессе настройки, чтобы получить максимум от OpenReplay. Чем больше вы захватываете, тем проще быстро воспроизводить и устранять проблемы:

• Идентификация пользователя: Свяжите ваш внутренний ID пользователя с записываемой сессией.
• Метаданные: Также называемые traits или пользовательскими переменными, метаданные предоставляют дополнительную информацию о пользователях во время записи сессий.
• Пользовательские события: Получите больше полезной информации, записывая специфичные для вашей предметной области события вместе с воспроизведениями сессий.
• Отчёты об ошибках: Сообщайте об ошибках и исключениях и просматривайте их на вкладке ERRORS.
• Загрузка Source-Maps: Просматривайте контекст исходного кода, полученный из стек-трейсов, в его исходном виде.
• Плагины: Поймите, что происходит «под капотом», захватывая store вашего приложения и отслеживая ваши HTTP- и GraphQL-запросы.
• Интеграции: Подключите OpenReplay к вашим инструментам логирования и синхронизируйте ошибки бэкенда с воспроизведениями сессий.