세션 레코딩

세션 레코딩이란?

세션 레코딩은 사용자의 화면 조작을 DOM 수준에서 기록하여 개발자가 버그 발생 과정을 그대로 재현할 수 있게 해주는 기능입니다. 비디오 녹화와 달리 파일 크기가 작고, 대시보드에서 인터랙티브하게 재생할 수 있습니다.

QA Note Extension은 두 가지 세션 레코딩 모드를 제공합니다.

수동 세션 리플레이

사용자가 직접 녹화를 시작하고 종료하는 방식입니다.

사용 방법

1. Extension 아이콘 클릭 또는 단축키로 캡처 모드를 열고, 세션 리플레이를 선택합니다.
2. 화면 우하단에 녹화 컨트롤이 표시되며, 경과 시간이 카운트됩니다.
3. 버그를 재현한 뒤 중지 버튼을 클릭합니다.
4. 녹화 데이터가 이슈 제출 폼에 자동으로 첨부됩니다.

특징

• 최대 녹화 시간: 60초. 시간이 초과되면 자동으로 중지됩니다.
• 페이지 이동 지원: 녹화 중 다른 페이지로 이동해도 녹화가 유지됩니다. 같은 탭 내의 모든 네비게이션이 기록됩니다.
• 개인정보 보호: 비밀번호 입력 필드는 자동으로 마스킹됩니다.

인스턴트 리플레이

"이미 일어난" 버그를 캡처할 때 유용한 기능입니다. 페이지 로드 시점부터 최근 작업을 자동으로 기록해두었다가, 필요한 순간에 가져옵니다.

사용 방법

1. Extension 팝업에서 현재 도메인의 인스턴트 리플레이를 활성화합니다.
2. 이후 해당 도메인의 모든 페이지에서 최근 활동이 자동으로 버퍼에 기록됩니다.
3. 버그를 발견하면 캡처 모드에서 인스턴트 리플레이를 선택합니다.
4. 최근 버퍼 내용이 이슈 제출 폼에 첨부됩니다.

특징

• 버퍼 길이: 기본 120초(2분). Extension 설정에서 변경 가능합니다.
• 도메인별 설정: 인스턴트 리플레이를 사용할 도메인을 개별적으로 선택합니다.
• 성능 모니터링: 이벤트 발생량과 메모리 사용량을 실시간 모니터링합니다. 부하가 감지되면 자동으로 버퍼를 축소(60초)하거나 일시 중지하여 페이지 성능에 영향을 주지 않습니다.
• 녹화 중단 없이 캡처: 인스턴트 리플레이를 가져와도 백그라운드 기록은 계속됩니다.

동작 조건

opt-in 입니다. 프로젝트 설정 → 세션 리코딩 → "인스턴트 리플레이" 토글로 활성화합니다. 여러 탭·팝업·iframe 을 가로지르는 시나리오는 멀티 윈도우 세션 추적 가이드 참조.

일반 세션 리코딩과의 차이

일반 리코딩은 사용자가 명시적으로 녹화 시작 을 누른 뒤부터만 기록됩니다. 인스턴트 리플레이는 "이미 일어난 일" 을 되감아 제출할 수 있다는 점이 다릅니다.

대시보드에서 재생

녹화된 세션은 이슈 상세 페이지에서 인터랙티브하게 재생됩니다. 타임라인 바에서 원하는 시점으로 이동하며, DOM 변화와 사용자 액션을 시각적으로 확인할 수 있습니다.

플랜별 제한

과부하 자동 감지

대규모 DOM 변화나 고빈도 이벤트가 발생하는 페이지에서는 rrweb 녹화 자체가 브라우저를 느리게 만들 수 있습니다. 인스턴트 리플레이는 프레임 시간·이벤트 율을 감시해 임계치를 넘으면 자동으로 일시 정지 합니다.

감지 지표

자동 정지 시 Extension 아이콘 뱃지에 주의 표시가 뜨며, 사용자가 수동으로 재개할 수 있습니다.