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

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

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

  • Знание JavaScript и React
  • Node.js v12 или выше
  • нпм
  • Учетная запись GitHub

Создание веб-приложения

Мы будем создавать демонстрационное приложение с помощью Create React App. Для начала откройте терминал и запустите код ниже:

npx create-react-app sample-app

Приведенный выше код создает приложение React с именем sample-app. Это базовое приложение React. Перейдите в каталог sample-app и запустите строку ниже, чтобы запустить приложение.

npm start

Мы будем создавать базовое приложение-счетчик для увеличения и уменьшения значения числа. Откройте файл App.js и вставьте код ниже:

import { useState } from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
    const [counter, setCounter] = useState(0);
    const handleClick = (operation = '+') => {
        if (operation === '-') {
            if (counter < 0) {
                throw new Error('Number is less than zero');
            }
            setCounter((prevState) => (prevState -= 1));
            return;
        }
        setCounter((prevState) => (prevState += 1));
    };
    return (
        <div className='App'>
            <header className='App-header'>
                <img src={logo} className='App-logo' alt='logo' />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
                    Learn React
                </a>
            </header>
            <main>
                <button onClick={() => handleClick('-')}>-</button>
                <p>{counter}</p>
                <button onClick={() => handleClick()}>+</button>
            </main>
        </div>
    );
}
export default App;

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

Подключение OpenReplay к приложению

После создания приложения следующим шагом будет подключение OpenReplay к приложению, чтобы начать мониторинг пользовательских событий. OpenReplay предоставляет библиотеку JavaScript, помогающую интегрировать OpenReplay в ваше веб-приложение. Запустите код ниже, чтобы установить приложение:

npm i @openreplay/tracker

После установки:

  1. Перейдите к развернутому экземпляру OpenReplay и нажмите «Добавить новый проект».

2. Введите название проекта в появившемся модальном окне и нажмите «Добавить», чтобы создать проект.

3. Щелкните значок «Настройки», чтобы перейти к настройкам.

4. Выберите проекты

5. Нажмите кнопку «Код отслеживания» для созданного проекта.

6. Скопируйте код в разделе использования

7. Откройте файл App.js и вставьте скопированный код перед началом функции App

Наш файл App.js теперь должен выглядеть так, как показано ниже.

import { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Tracker from '@openreplay/tracker';
const tracker = new Tracker({
    projectKey: 'O6Q7rBQdbxGMWgIeL7rd',
    ingestPoint: 'https://app.openreplaytutorial.ga/ingest',
});
tracker.start();
function App() {
// rest of the original code

OpenReplay не работает в средах разработки, поэтому вам нужно отправить свой код в репозиторий и развернуть его на сервере, чтобы отслеживание работало. Я рекомендую такие платформы, как Netlify и Vercel (вот краткое руководство по развертыванию вашего приложения на Netlify).

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

Интеграция OpenReplay с GitHub

На этом этапе вы должны иметь возможность просматривать запись сеанса на панели управления OpenReplay. В этом разделе мы рассмотрим, как создать задачу Github для записи сеанса.

  1. Перейдите на Github и войдите
  2. После аутентификации перейдите в Токены личного доступа
  3. Введите примечание для запоминания использования токена
  4. Выберите срок действия
  5. Выберите области действия repo:status, repo_deployment, public_repo, read:user и user:email.

6. Нажмите «Создать токен».

7. Скопируйте сгенерированный токен в буфер обмена.

8. Перейдите на панель инструментов OpenReplay, затем «Настройки» > «Интеграция».

9. Нажмите на Github

10. Вставьте скопированный сгенерированный токен в открывшееся модальное окно.

Мы успешно интегрировали Github в OpenReplay!

Следующий шаг — создание задачи из записанного сеанса.

  1. Перейдите на панель инструментов OpenReplay.
  2. Нажмите на записанный сеанс
  3. Нажмите кнопку «Сообщить о проблеме» в правом верхнем углу страницы.

4. Заполните данные в открывшемся модальном окне.

5. Нажмите «Создать».

После сообщения о проблеме перейдите на страницу «Проблемы» вашего репозитория на Github, и вы увидите новую проблему с подробностями, которые вы предоставили, и ссылкой на OpenReplay, как показано на снимке экрана ниже.

Заключение

В этой статье мы узнали, как интегрировать OpenReplay в приложение, чтобы разработчик мог воспроизводить действия пользователя, которые привели к ошибке. Мы также рассмотрели возможность создания задач Github из сеансов OpenReplay, чтобы способствовать совместной работе и устранению ошибок с членами вашей команды.

Как указывалось ранее, возможность воссоздать шаги, предпринятые пользователем, которые привели к ошибке, имеет большое значение при отладке проблем, что делает OpenReplay отличным инструментом, который должен быть в вашем арсенале разработчика. У OpenReplay также есть поддерживающее сообщество в Slack, которое поможет вам с проблемами, с которыми вы столкнетесь.

Первоначально опубликовано на https://blog.openreplay.com 5 ноября 2021 г.