세션 레코딩
버그 재현 과정을 녹화하여 개발자에게 전달하세요
세션 레코딩이란?
세션 레코딩은 사용자의 화면 조작을 DOM 수준에서 기록하여 개발자가 버그 발생 과정을 그대로 재현할 수 있게 해주는 기능입니다. 비디오 녹화와 달리 파일 크기가 작고, 대시보드에서 인터랙티브하게 재생할 수 있습니다.
QA Note Extension은 두 가지 세션 레코딩 모드를 제공합니다.
수동 세션 리플레이
사용자가 직접 녹화를 시작하고 종료하는 방식입니다.
사용 방법
- Extension 아이콘 클릭 또는 단축키로 캡처 모드를 열고, 세션 리플레이를 선택합니다.
- 화면 우하단에 녹화 컨트롤이 표시되며, 경과 시간이 카운트됩니다.
- 버그를 재현한 뒤 중지 버튼을 클릭합니다.
- 녹화 데이터가 이슈 제출 폼에 자동으로 첨부됩니다.
특징
- 최대 녹화 시간: 60초. 시간이 초과되면 자동으로 중지됩니다.
- 페이지 이동 지원: 녹화 중 다른 페이지로 이동해도 녹화가 유지됩니다. 같은 탭 내의 모든 네비게이션이 기록됩니다.
- 개인정보 보호: 비밀번호 입력 필드는 자동으로 마스킹됩니다.
인스턴트 리플레이
"이미 일어난" 버그를 캡처할 때 유용한 기능입니다. 페이지 로드 시점부터 최근 작업을 자동으로 기록해두었다가, 필요한 순간에 가져옵니다.
사용 방법
- Extension 팝업에서 현재 도메인의 인스턴트 리플레이를 활성화합니다.
- 이후 해당 도메인의 모든 페이지에서 최근 활동이 자동으로 버퍼에 기록됩니다.
- 버그를 발견하면 캡처 모드에서 인스턴트 리플레이를 선택합니다.
- 최근 버퍼 내용이 이슈 제출 폼에 첨부됩니다.
특징
- 버퍼 길이: 기본 120초(2분). Extension 설정에서 변경 가능합니다.
- 도메인별 설정: 인스턴트 리플레이를 사용할 도메인을 개별적으로 선택합니다.
- 성능 모니터링: 이벤트 발생량과 메모리 사용량을 실시간 모니터링합니다. 부하가 감지되면 자동으로 버퍼를 축소(60초)하거나 일시 중지하여 페이지 성능에 영향을 주지 않습니다.
- 녹화 중단 없이 캡처: 인스턴트 리플레이를 가져와도 백그라운드 기록은 계속됩니다.
동작 조건
| 항목 | 값 |
|---|---|
| 버퍼 시간 | 120 초 |
| 이벤트 한도 | 10,000 이벤트 |
| 활성 조건 | 프로젝트 설정에서 "허용 도메인" 목록에 포함된 페이지 |
| 데이터 경로 | 로컬 링 버퍼 → 캡처 시 압축 (gzip) → R2 업로드 |
opt-in 입니다. 프로젝트 설정 → 세션 리코딩 → "인스턴트 리플레이" 토글로 활성화합니다. 여러 탭·팝업·iframe 을 가로지르는 시나리오는 멀티 윈도우 세션 추적 가이드 참조.
일반 세션 리코딩과의 차이
일반 리코딩은 사용자가 명시적으로 녹화 시작 을 누른 뒤부터만 기록됩니다. 인스턴트 리플레이는 "이미 일어난 일" 을 되감아 제출할 수 있다는 점이 다릅니다.
대시보드에서 재생
녹화된 세션은 이슈 상세 페이지에서 인터랙티브하게 재생됩니다. 타임라인 바에서 원하는 시점으로 이동하며, DOM 변화와 사용자 액션을 시각적으로 확인할 수 있습니다.
플랜별 제한
| 플랜 | 월간 세션 레코딩 수 |
|---|---|
| Solo (무료) | 20건 |
| Team | 500건 |
| Studio | 5,000건 |
| Enterprise | 무제한 |
과부하 자동 감지
대규모 DOM 변화나 고빈도 이벤트가 발생하는 페이지에서는 rrweb 녹화 자체가 브라우저를 느리게 만들 수 있습니다. 인스턴트 리플레이는 프레임 시간·이벤트 율을 감시해 임계치를 넘으면 자동으로 일시 정지 합니다.
감지 지표
| 지표 | 임계치 | 반응 |
|---|---|---|
| 초당 이벤트 수 | 1,000/s 초과 | 1 초간 sample drop |
| 메모리 증가율 | 50MB/min 초과 | 버퍼 절반 방출 |
| main thread 블로킹 | 200ms 초과 task 연속 3회 | 녹화 일시 정지 + 사용자 알림 |
자동 정지 시 Extension 아이콘 뱃지에 주의 표시가 뜨며, 사용자가 수동으로 재개할 수 있습니다.