Перейти к основному содержимому

Отчёты

Перейти в личный кабинет

Функционал для сбора ошибок и создания избыточных отчётов на вашем сайте.

Изображение с примером отчёта

Обзор​

С помощью встраиваемого скрипта пользователи и QA-инженеры могут легко показать, где спрятался баг, а вы – получить отладочную информацию и сразу приступить к исправлению.

Настройка

Для этого создайте проект и подключите скрипт на ваш сайт.

Структура сервиса​

Внутри сервиса Отчёты находятся Проекты, предполагается, что вы создаёте отдельный проект под каждый свой сайт. Проекты разделяются по уникальному ключу captureKey. Внутри проектов уже будут появляться создаваемые вами отчёты с скриншотами и видео записями.

Установка​

Разместите код на HTML странице перед закрытием тега <head>:

<!-- tuna. Запись экрана и действий пользователей -->
<script>
    window.reportOptions = {
        captureKey: "YOUR_CAPTURE_KEY"
    };
</script>
<script src="https://reports.tuna.am/latest/index.js" async></script>

Замените YOUR_CAPTURE_KEY вашим из нужного проекта.

Параметры скрипта​

Параметры задаются в объекте window.reportOptions до подключения скрипта.

ПараметрТипПо умолчаниюОписание
captureKeystring—Ключ проекта. Обязательный.
videobooleantrueЗапись видео. Подробнее — ниже.
sensitiveUrlParamsstring[][]Дополнительные параметры URL, значения которых маскируются. См. Приватность данных.
sensitiveHeadersstring[][]Дополнительные HTTP-заголовки, значения которых маскируются. См. Приватность данных.

Запись видео​

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

<script>
    window.reportOptions = {
        captureKey: "YOUR_CAPTURE_KEY",
        video: false
    };
</script>
<script src="https://reports.tuna.am/latest/index.js" async></script>

Видео выключает только явное video: false. Без параметра или с любым другим значением запись остаётся включённой.

При video: false окно «Выберите тип захвата» не показывается: по кнопке, горячей клавише или вызову showCaptureModal() из обработчика клика сразу снимается скриншот.

Исключение — ссылка с ?report=true

По ссылке с аргументом окно открывается без действия пользователя, а без него браузер не запустит захват экрана. Поэтому в этом случае показывается окно с одной карточкой «Скриншот».

В личном кабинете на странице подключения проекта есть флажок Запись видео — он меняет значение video в сниппете, который вы копируете на сайт.

Вызов cкрипта для создания отчёта​

Есть несколько способов создать отчёт:

  • Горячие клавиши
  • Кнопка (data аттребут)
  • Вызов из кода (JS)
  • Аргумент в URL

Горячие клавиши​

Используйте сочетание клавиш

CTRL + ALT + S

Нажатие на кнопку​

Вызывайте форму создания отчета, добавив кнопку с data-аттрибутом:

<button data-report-trigger>
    Сообщить об ошибке
</button>

Вызов из кода​

Вызывайте форму создания отчета из своего кода, добавив команду:

if (typeof window.autoCapture !== 'undefined'
    && window.autoCapture.showCaptureModal) {
    window.autoCapture.showCaptureModal();
}

Аргумент в URL​

Вызывайте форму создания отчета, добавив к URL в адресной строке аргумент report=true.

https://example.com/dashboard?report=true

Идентификация пользователя​

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

if (window.autoCapture && window.autoCapture.capture) {
    window.autoCapture.capture.identify({
        identifier: "user-42",
        name: "Иван Иванов",
        email: "ivan@example.com",
        avatarUrl: "https://example.com/avatar.png"
    });
}

Все поля необязательные.

ПолеОписание
identifierИдентификатор пользователя в вашей системе
nameИмя
emailАдрес почты. На него оформляется подписка на уведомления по отчёту, см. Email репортера
avatarUrlСсылка на аватар

Чтобы сбросить данные, например при выходе из аккаунта, передайте null:

window.autoCapture.capture.identify(null);
Вызывайте после инициализации скрипта

Скрипт подключается с атрибутом async, и window.autoCapture.capture равен null, пока он не инициализировался. Поэтому проверяйте его перед вызовом, как в примере выше, иначе получите ошибку.

Email репортера​

В форме «Сообщить о проблеме» есть необязательное поле для адреса почты. На указанный адрес:

  • приходит письмо «Ваш отчёт получен» со ссылкой на отчёт;
  • оформляется подписка на новые комментарии к отчёту, в письме есть ссылка для отписки;
  • выдаётся доступ к отчёту.

Публичный отчёт открывается по ссылке из письма сразу. Чтобы открыть приватный, нажмите Запросить ссылку — на почту придёт одноразовая ссылка для входа.

Поле всегда открывается пустым. Если вы передаёте адрес через identify():

  • заполненное поле важнее — используется адрес из него;
  • при пустом поле используется адрес из identify().

Адрес репортера видят только участники команды проекта. По публичной ссылке на отчёт он не показывается.

Некорректный адрес, переданный через identify(), не мешает отправке: отчёт будет принят, но письма и подписки не будет.

Запроса на создание отчёта с записью экрана​

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

Перейдя по ссылке пользователь сможет записать для вас видео и рассказать о проблеме.

Как выглядит отчёт?​

Внутри отчёта будет скриншот или видео и вся отладочная информация из консоли, сетевые операции, действия пользователя и снимок DOM-дерева страницы.

На первой вкладке содержится общая сводная информация о клиенте, устройстве, браузере...

Видимость отчёта​

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