Как я могу реализовать подробную регистрацию действий пользователя и среды в приложении React, чтобы воспроизвести пробл ⇐ Javascript

[Anonymous]

Я создаю веб-приложение React, где пользователи иногда сообщают о неопределенных проблемах, таких как:

"Эта часть не работает"

или

"Она работает на моем телефоне, но не на моем ноутбуке".

Когда мы пытаемся воспроизвести эти проблемы, они часто зависят от тонких различий, таких как:

• Версия браузера или ОС
• Размер или разрешение экрана
• Условия сети
• Конкретные действия, предпринятые пользователем до появления проблемы

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

Это затрудняет понимание того, что именно произошло на устройстве пользователя.
Я хотел бы автоматически собирать достаточный контекст, чтобы воспроизвести такие ошибки, например:

• Сведения о браузере, ОС и экране
• Текущий маршрут или имя компонента
• Последние действия пользователя (клики, переходы, ввод формы)
• Последние сетевые запросы и ответы (базовые метаданные)
• Журналы или предупреждения консоли
• Идентификатор сеанса или корреляции который ссылается на серверные журналы

В идеале я бы также хотел, чтобы пользователи нажимали кнопку «Сообщить о проблеме», которая отправляет этот контекст (и, возможно, снимок экрана) на серверную часть.
Вопрос:

Как я могу реализовать такой подробный регистратор активности пользователей и среды в Приложение React с безопасностью и производительностью?
В основном я ищу идеи реализации или шаблоны проектирования, а не рекомендации по инструментам.

Подробнее здесь: https://stackoverflow.com/questions/798 ... a-react-ap