Spot — это расширение для Chrome, которое делает процесс сообщения об ошибках невероятно быстрым и простым.

Со Spot вы можете легко записывать ошибки прямо из браузера и мгновенно делиться ими со своей командой. Конечным результатом является готовый к отправке полный отчёт об ошибке в формате видео, включающий действия пользователя, журналы и ошибки консоли, сетевые данные и информацию об агенте пользователя. Короче говоря, вы получаете всё необходимое, чтобы сообщить об ошибке быстрее, чем когда-либо, и всё, что нужно вашей команде, чтобы исправить её так же быстро.

• Spot входит в каждый тарифный план OpenReplay, от нашей версии с открытым исходным кодом до корпоративных предложений.
• Spot — это расширение для Chrome, которое также работает в любом браузере на базе Chromium, включая Microsoft Edge, Brave и Arc.

Установить расширение Spot для Chrome быстро и просто:

1. Перейдите на страницу расширения Spot в Chrome Web Store и нажмите «Добавить в Chrome».
2. Закрепите Spot на панели инструментов Chrome для удобного доступа в будущем.

Прежде чем начать использовать Spot, вам нужно либо войти в существующую учётную запись OpenReplay, либо создать новую:

• OpenReplay cloud

  Section titled OpenReplay cloud
  • Новые пользователи:
    1. После закрепления Spot нажмите на значок Spot на панели инструментов.
    2. Выберите Create Account.
    3. Выберите ваш основной сценарий использования для OpenReplay.
    • Если вы выберете «сообщать об ошибках через Spot» в качестве основного сценария использования, вы сможете позже получить доступ ко всем функциям OpenReplay, нажав Setup Tracker.
    
  • Существующие пользователи:
    1. Нажмите на закреплённое расширение Spot на панели инструментов.
    2. Выберите Log in и введите свои учётные данные OpenReplay.
    • Свои Spot вы можете найти в меню Spot на левой боковой панели.
    

• OpenReplay self-host

  Section titled OpenReplay self-host
  • Новые и существующие пользователи:
    • Обновите свой экземпляр OpenReplay до последней версии (v1.20.0), которая поддерживает Spot.
    • После обновления меню Spot появится на левой боковой панели. Ваши Spot будут надёжно сохранены в вашем экземпляре.

Теперь, когда вы вошли в систему, вы полностью готовы начать обнаруживать и сообщать об ошибках с помощью Spot.

Вот как использовать ключевые функции расширения Spot для Chrome:

• Начать запись: Нажмите на значок Spot на панели инструментов и выберите Record Tab, чтобы записать всё, что происходит на активной вкладке.

• Включить микрофон: При необходимости включите параметр микрофона, чтобы добавить аудио в вашу запись.

• Приостановить запись: Нажмите на значок паузы на панели записи в любой момент.

• Перезапустить запись: Нажмите на значок перезапуска на панели записи, чтобы перезапустить запись.

• Остановить запись: Нажмите на значок остановки на панели записи, чтобы остановить запись.

• Добавить комментарии: Вы можете добавить комментарии, чтобы предоставить дополнительный контекст перед сохранением.

• Сохранить Spot: После остановки записи она автоматически сохранится со всеми соответствующими техническими деталями, такими как журналы консоли и сетевые данные.

  

• Начать запись: Нажмите на значок Spot и выберите Record Desktop. Выберите запись всего экрана или конкретного окна.

Spot автоматически включает данные DevTools в каждую запись ошибки, предоставляя вашим разработчикам полный контекст для эффективной отладки проблем. Каждая запись фиксирует следующее:

• Журналы консоли: Все выводы консоли, предупреждения и сообщения об ошибках во время сеанса записи.
• Сетевые запросы: Журналы всей сетевой активности, включая:
  • Заголовки и тела запросов и ответов: Данные, отправленные и полученные в каждом запросе.
  • Коды состояния: Быстро определяйте неудавшиеся или проблемные запросы.
• Данные агента пользователя: Информация о браузере и устройстве пользователя, помогающая разработчикам воспроизвести среду, в которой возникла ошибка.
• Данные о взаимодействии пользователя: Сведения об активности пользователя, такие как клики и пути навигации, позволяющие разработчикам понять, как была обнаружена проблема.

Примечание об ошибках GraphQL

GraphQL обычно возвращает код состояния 200 OK для всех ответов, даже когда ошибки присутствуют в теле ответа (обычно помещаются в поле errors). Это может затруднить обнаружение проблем, основываясь только на коде состояния HTTP.

В Spot мы определяем, когда ответ GraphQL содержит объект errors в теле. Когда такая ошибка обнаружена, мы помечаем запрос кодом состояния 400 вместо 200. Эта корректировка облегчает разработчикам выявление и отладку проблемных запросов GraphQL.

• Доступ к настройкам: Нажмите на значок Spot на панели инструментов и выберите значок Settings.
• Переходить на вкладку Spot после сохранения: Включите этот параметр, чтобы переходить к записи Spot сразу после сохранения.
• Включить DevTools: Включите этот параметр, чтобы добавить журналы консоли, сетевые вызовы и другую отладочную информацию в вашу запись.

• Отправка приглашений: Нажмите Preferences, перейдите в Team и нажмите Add Team Member. Введите их полное имя и адрес электронной почты, затем отправьте приглашение.
• Доступ команды: Все участники команды могут просматривать записи Spot в представлении Spots в OpenReplay

Spot не привязаны к какому-либо конкретному проекту.

• Частный доступ: Записями Spot можно делиться через частные ссылки для внутреннего просмотра в вашей команде в OpenReplay.
• Публичный доступ: Вы можете создавать публичные ссылки для внешнего просмотра, доступные даже без учётной записи OpenReplay.
• Интеграция с инструментами: Добавляйте эти ссылки в инструменты отслеживания ошибок или совместной работы, такие как Slack, Teams, Jira или Linear, для удобного доступа и командной работы.

Если вы столкнулись с ошибкой HTTP 520 Unknown Error при попытке сохранить записи Spot, это обычно указывает на то, что размер видеофайла превышает допустимый предел размера Cloudflare. Это может произойти при записи более длинных spot или spot со сложными взаимодействиями.

Чтобы решить эту проблему:

1. Откройте конфигурацию развёртывания OpenReplay по адресу: scripts/helmcharts/vars.yaml
2. Найдите переменную proxy-body-size (примерно на строке 109)
3. Увеличьте значение со значения по умолчанию 10m, чтобы вместить более крупные записи
   • Например, если вам нужно загружать файлы размером около 36MB, вам следует установить значение не менее 40m

Пример настройки конфигурации:

proxy-body-size: 40m  # Increase this value based on your recording size needs

После обновления конфигурации примените изменения к своему развёртыванию, чтобы они вступили в силу.

Возникли проблемы с настройкой этого плагина? Присоединяйтесь к нашему Slack или загляните на наш Форум и получите помощь от нашего сообщества.