Что это такое?
rrweb ('record and replay the web') — это open-source инструмент для записи и воспроизведения действий пользователей на сайте — session replay на уровне DOM, который вы встраиваете в своё приложение, в духе Fullstory или LogRocket.
rrweb ('record and replay the web') — это open-source инструмент для записи и воспроизведения действий пользователей на сайте — session replay на уровне DOM, который вы встраиваете в своё приложение, в духе Fullstory или LogRocket.Это hosted-сервис или библиотека, которую я добавляю на свой сайт?Это набор open-source библиотек, которые вы добавляете в веб-приложение, а не SaaS: rrweb-snapshot, record, replay и rrweb-player. Также теперь доступен hosted-бэкенд под названием rrweb cloud.
Это набор open-source библиотек, которые вы добавляете в веб-приложение, а не SaaS: rrweb-snapshot, record, replay и rrweb-player. Также теперь доступен hosted-бэкенд под названием rrweb cloud.С чего начать запись сессии?В README есть ссылка на руководство rrweb с полным описанием; первый шаг — установить пакет rrweb из npm в своё веб-приложение и запустить рекордер.
В README есть ссылка на руководство rrweb с полным описанием; первый шаг — установить пакет rrweb из npm в своё веб-приложение и запустить рекордер.Мне нужен свой бэкенд, чтобы хранить записи?Нужно какое-то место для хранения записанных сессий: rrweb cloud — это hosted-вариант, а в roadmap указан storage-движок, который дедуплицирует большое количество сессий. В остальном хранилище делаете сами.
Нужно какое-то место для хранения записанных сессий: rrweb cloud — это hosted-вариант, а в roadmap указан storage-движок, который дедуплицирует большое количество сессий. В остальном хранилище делаете сами.Захватывает ли он сетевые запросы вроде XHR и fetch?Из коробки нет: захват сетевой активности (XHR, fetch, GraphQL) планируется только через новый plugin API, а экономный по токенам формат AI session replay всё ещё в разработке.
Из коробки нет: захват сетевой активности (XHR, fetch, GraphQL) планируется только через новый plugin API, а экономный по токенам формат AI session replay всё ещё в разработке.То есть я встраиваю это в свой продукт — мои пользователи сам rrweb не видят?Верно: разработчики и продуктовые команды встраивают рекордер в своё веб-приложение и воспроизводят сессии на своей стороне — в README перечислены платформы мониторинга, аналитики и сбора баг-репортов, построенные на rrweb.
Верно: разработчики и продуктовые команды встраивают рекордер в своё веб-приложение и воспроизводят сессии на своей стороне — в README перечислены платформы мониторинга, аналитики и сбора баг-репортов, построенные на rrweb.Он работает только для веб-страниц или может записывать и нативные приложения?Только веб — он записывает DOM веб-страниц в браузере и воспроизводит их там; rrweb-player — это веб-интерфейс поверх движка воспроизведения.
Только веб — он записывает DOM веб-страниц в браузере и воспроизводит их там; rrweb-player — это веб-интерфейс поверх движка воспроизведения.Что именно попадает в запись?Записи фиксируют каждое изменение HTML-состояния и каждое действие пользователя на странице, так что всё, что отображается или вводится, может попасть в поток событий; воспроизведение выполняется в sandbox.
Записи фиксируют каждое изменение HTML-состояния и каждое действие пользователя на странице, так что всё, что отображается или вводится, может попасть в поток событий; воспроизведение выполняется в sandbox.Как запись устроена внутри?Сначала начальный snapshot превращает DOM и его состояние в сериализуемую структуру данных с уникальными идентификаторами, затем rrweb записывает инкрементальные изменения и действия пользователя по мере его работы с сайтом. При воспроизведении восстанавливается snapshot и проигрывается поток событий.
Сначала начальный snapshot превращает DOM и его состояние в сериализуемую структуру данных с уникальными идентификаторами, затем rrweb записывает инкрементальные изменения и действия пользователя по мере его работы с сайтом. При воспроизведении восстанавливается snapshot и проигрывается поток событий.Может ли одна запись охватывать несколько загрузок страницы?Да — несколько загрузок страницы можно объединить в одну запись.
Да — несколько загрузок страницы можно объединить в одну запись.Есть ли готовый интерфейс плеера?Да, rrweb-player — это GUI поверх пакета воспроизведения с паузой, перемоткой вперёд и перетаскиванием, чтобы запустить воспроизведение с любого момента времени.
Да, rrweb-player — это GUI поверх пакета воспроизведения с паузой, перемоткой вперёд и перетаскиванием, чтобы запустить воспроизведение с любого момента времени.Можно ли использовать rrweb-snapshot отдельно?Да — он может создать статический HTML-«скриншот» текущего состояния страницы со всем отключённым JavaScript, без всякой записи.
Да — он может создать статический HTML-«скриншот» текущего состояния страницы со всем отключённым JavaScript, без всякой записи.What are similar projects?ultrastorage, openreplay, classnames, velocity, better-scroll, partytown, ua-parser-js, anime
ultrastorage, openreplay, classnames, velocity, better-scroll, partytown, ua-parser-js, animeWhich topics is it in?session-replay, serialization, dom, debugging, analytics, sandbox, browser, monitoring, web-development, gui, npm, frontend
session-replay, serialization, dom, debugging, analytics, sandbox, browser, monitoring, web-development, gui, npm, frontend