# Отчёты
[Перейти в личный кабинет](https://my.tuna.am/reports)
Функционал для сбора ошибок и создания избыточных отчётов на вашем сайте.
***
## Обзор
С помощью встраиваемого скрипта пользователи и QA-инженеры могут легко показать, где спрятался баг, а вы – получить отладочную информацию и сразу приступить к исправлению.
Для этого создайте проект и подключите скрипт на ваш сайт.
## Структура сервиса
Внутри сервиса **Отчёты** находятся **Проекты**, предполагается, что вы создаёте отдельный проект под каждый свой сайт. Проекты разделяются по уникальному ключу `captureKey`. Внутри проектов уже будут появляться создаваемые вами отчёты с скриншотами и видео записями.
## Установка
Разместите код на HTML странице перед закрытием тега ``:
```html
```
Замените **YOUR_CAPTURE_KEY** вашим из нужного проекта.
## Параметры скрипта
Параметры задаются в объекте `window.reportOptions` до подключения скрипта.
| Параметр | Тип | По умолчанию | Описание |
| -------------------- | ---------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `captureKey` | `string` | — | Ключ проекта. Обязательный. |
| `video` | `boolean` | `true` | Запись видео. Подробнее — [ниже](#video). |
| `sensitiveUrlParams` | `string[]` | `[]` | Дополнительные параметры URL, значения которых маскируются. См. [Приватность данных](https://tuna.am/docs/reports/privacyOptions.md#%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%B2%D0%BE%D0%B8%D1%85-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D0%BE%D0%B2-sensitiveurlparams). |
| `sensitiveHeaders` | `string[]` | `[]` | Дополнительные HTTP-заголовки, значения которых маскируются. См. [Приватность данных](https://tuna.am/docs/reports/privacyOptions.md#%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%B2%D0%BE%D0%B8%D1%85-%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%B2-sensitiveheaders). |
### Запись видео
По умолчанию пользователь выбирает, что приложить к отчёту: скриншот или запись экрана. Запись видео хранится в памяти страницы, поэтому на многостраничных сайтах она обрывается при переходе на другую страницу. Для таких сайтов видео можно выключить:
```html
```
Видео выключает только явное `video: false`. Без параметра или с любым другим значением запись остаётся включённой.
При `video: false` окно «Выберите тип захвата» не показывается: по [кнопке](#%D0%BD%D0%B0%D0%B6%D0%B0%D1%82%D0%B8%D0%B5-%D0%BD%D0%B0-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D1%83), [горячей клавише](#%D0%B3%D0%BE%D1%80%D1%8F%D1%87%D0%B8%D0%B5-%D0%BA%D0%BB%D0%B0%D0%B2%D0%B8%D1%88%D0%B8) или вызову `showCaptureModal()` из обработчика клика сразу снимается скриншот.
> **Исключение — ссылка с ?report=true.** По [ссылке с аргументом](#%D0%B0%D1%80%D0%B3%D1%83%D0%BC%D0%B5%D0%BD%D1%82-%D0%B2-url) окно открывается без действия пользователя, а без него браузер не запустит захват экрана. Поэтому в этом случае показывается окно с одной карточкой «Скриншот».
В личном кабинете на странице подключения проекта есть флажок **Запись видео** — он меняет значение `video` в сниппете, который вы копируете на сайт.
## Вызов cкрипта для создания отчёта
Есть несколько способов создать отчёт:
* Горячие клавиши
* Кнопка (data аттребут)
* Вызов из кода (JS)
* Аргумент в URL
### Горячие клавиши
**Windows**
> **Используйте сочетание клавиш.** `CTRL` + `ALT` + `S`
**macOS**
> **Используйте сочетание клавиш.** `⌘ command` + `⌥ option` + `S`
**Linux**
> **Используйте сочетание клавиш.** `CTRL` + `ALT` + `S`
### Нажатие на кнопку
Вызывайте форму создания отчета, добавив кнопку с data-аттрибутом:
```html
```
### Вызов из кода
Вызывайте форму создания отчета из своего кода, добавив команду:
```js
if (typeof window.autoCapture !== 'undefined'
&& window.autoCapture.showCaptureModal) {
window.autoCapture.showCaptureModal();
}
```
### Аргумент в URL
Вызывайте форму создания отчета, добавив к URL в адресной строке аргумент `report=true`.
```url
https://example.com/dashboard?report=true
```
## Идентификация пользователя
Если пользователь авторизован на вашем сайте, передайте его данные в скрипт — отчёт будет привязан к этому пользователю. Данные попадают в отчёт как репортер и видны в блоке **Контекст** на странице отчёта.
```js
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 репортера](#reporter-email) |
| `avatarUrl` | Ссылка на аватар |
Чтобы сбросить данные, например при выходе из аккаунта, передайте `null`:
```js
window.autoCapture.capture.identify(null);
```
> **Вызывайте после инициализации скрипта.** Скрипт подключается с атрибутом `async`, и `window.autoCapture.capture` равен `null`, пока он не инициализировался. Поэтому проверяйте его перед вызовом, как в примере выше, иначе получите ошибку.
## Email репортера
В форме «Сообщить о проблеме» есть необязательное поле для адреса почты. На указанный адрес:
* приходит письмо «Ваш отчёт получен» со ссылкой на отчёт;
* оформляется подписка на новые комментарии к отчёту, в письме есть ссылка для отписки;
* выдаётся доступ к отчёту.
Публичный отчёт открывается по ссылке из письма сразу. Чтобы открыть приватный, нажмите **Запросить ссылку** — на почту придёт одноразовая ссылка для входа.
Поле всегда открывается пустым. Если вы передаёте адрес через [`identify()`](#identify):
* заполненное поле важнее — используется адрес из него;
* при пустом поле используется адрес из `identify()`.
Адрес репортера видят только участники команды проекта. По публичной ссылке на отчёт он не показывается.
Некорректный адрес, переданный через `identify()`, не мешает отправке: отчёт будет принят, но письма и подписки не будет.
## Запроса на создание отчёта с записью экрана
Если вы хотите чтобы пользователь записал для вас отчёт не с сайта, а продемонстрировал проблему на своей рабочей станции, тогда можно создать ссылку с запросом на запись экрана.
 
***
Перейдя по ссылке пользователь сможет записать для вас видео и рассказать о проблеме.
## Как выглядит отчёт?
Внутри отчёта будет скриншот или видео и вся отладочная информация из консоли, сетевые операции, действия пользователя и снимок DOM-дерева страницы.
**Информация**
На первой вкладке содержится общая сводная информация о клиенте, устройстве, браузере...
**Инспектор**
Снимок DOM-дерева страницы, с возможностью выбора элемента.
***
> **Примечание.** Эта вкладка доступна только для отчётов с скриншотом, в отчётах с видео невозможно захватить снимок DOM-дерева так как он может меняться по ходу.
**Консоль**
Список всех событий из консоли браузера.
**Сеть**
Список всех XHR запросов с возможностью заглянуть в детали.
**Действия**
Действия пользователя на странице.
**Комментарии**
Также можно оставлять комментарии и реакции к комментариям.
## Видимость отчёта
По умолчанию отчёт создаётся с видимостью - **Только для участников команды**, но вы можете сделать его публичным. Например для ведения диалога с клиентом создавшим отчёт.
