소개

FullStory, LogRocket은 analytics와 error tracking에 강점을 둔 SaaS 툴 입니다. 두 솔루션 모두 사용자 이벤트를 추적하여 마케팅이나 서비스 사용성 분석에 도움을 주는데 특별히 주목할 만한 것은 사용자가 어떠한 흐름으로 서비스를 사용했는지 브라우저 상에서 재생을 해 주는 기능입니다. 이를 session replay라고 부르며, rrweb.io은 오픈소스 session replay 툴 입니다.

기술 스텍

TypeScript를 사용하고 Yarn과 Lerna로 monorepo를 구성하였습니다.

다음의 순으로 명령을 수행하면, https://react-redux.realworld.io 페이지를 chrome으로 열어 session recording을 직접 로컬에서 확인해 볼 수 있습니다.

$ yarn
$ yarn build:all
$ yarn repl

rrweb은 turbo를 사용하여 빌드 환경을 구성하였고 rollup으로 번들링을 합니다.

의존성 관계는 다음과 같습니다.

rrweb-snapshot

snapshot 함수는 DOM의 Document 객체를 입력으로 받아 serializeNodeWithId 즉 네트워크 등으로 전송 가능한 형태의 객체를 반환합니다.

buildNodeWithSN 함수는 serializeNodeWithId 객체를 입력으로 받아 다시 DOM 트리를 구성합니다.

rrdom, rrdom-nodejs

rrweb이 처리하는 가상 DOM 객체를 정의합니다.

rrweb

record, replay등 핵심적인 기능을 수행하는 사용자 인터페이스를 가집니다.

yarn repl

Session recording 과정을 local에서 수행하 볼 수 있는 yarn repl을 살펴 봅니다.

yarn repl은 rrweb 패키지의 scripts/repl.js를 수행하며 headless browser인 puppeteer를 사용하여 다음과 같이 session recording을 수행하여 이벤트를 저장하고 곧 이어 재생을 합니다.

빌드 과정에서 반들어진 rrweb.js 파일을을 직접 브라우저 frame 객체에 주입합니다. _replLog라는 함수를 주입하고 해당 함수를 호출할 경우 rrweb이 emit하는 이벤트를 전달 받아 저장합니다. record 함수 호출과 함께 브라우저는 주기적으로 _replLog를 호출합니다. 이렇게 rrweb 이벤트를 저장합니다.

이후 재생 동작을 할 때 먼저 rrweb.css를 주입합니다. 코드 주입을 톻애 Player 객체를 생성하고 저장한 이벤트를 play 함수로 전달하여 녹화한 내용을 재생합니다.

마치며

rrweb은 상당히 rrweb.js만으로 손쉽게 session recording을 수행할 수 있습니다. 물론 어떠한 주기로 recording 이벤트를 저장하고 backend API를 사용하여 저장할 것 인지는 사용자가 고민해야 합니다.

이렇게 저장한 recording 이벤트는 rrweb.css, rrweb.js를 사용하여 손쉽게 재생할 수 있습니다.

실제 적용에 있어서는 개인 정보 제공에 대한 적절한 사용자 인지와 동의 절차는 필요해 보입니다.

Interactive한 UX는 몇몇의 이벤트 만으로 사용성을 파악하거나 이슈를 추적하기가 쉽지 않습니다. rrweb은 분명이 한 단계 발전한 analytics 환경을 제공하고 더 깊은 사용자 행동 패턴을 이해하는데 도움을 주는 솔루션 입니다.