개발자가 버그를 재현하고 원인을 파악하는 데 필요한 모든 기술 컨텍스트를 QA Note가 자동으로 수집합니다. 리포터는 클릭만 하면 됩니다.
시각적 증거를 자동으로 기록합니다.
영역 선택 캡쳐 후 펜·화살표·텍스트로 주석을 추가합니다.
최대 5장 · Konva 캔버스
브라우저 탭을 VP9 코덱으로 녹화하고, 시작/끝 트리밍을 지원합니다.
최대 60초 · WebM
rrweb로 DOM 변화를 기록하여 정확한 상호작용을 재현합니다.
최대 60초 · gzip 압축
허용 도메인에서 상시 녹화 버퍼를 유지합니다. 버그 발생 시 '방금 전' 구간을 즉시 제출합니다.
120초 버퍼 · 10K 이벤트 · 과부하 자동 감지
작성 중인 이슈가 자동으로 로컬에 저장됩니다. 새로고침이나 실수로 닫아도 스크린샷·리플레이·폼 데이터를 모두 복원할 수 있습니다.
2초 디바운스 · 24시간 TTL · 용량 초과 시 graceful fallback
최근 제출한 이슈 목록을 팝업에서 바로 확인하고, 클릭 한 번으로 대시보드 이슈 상세로 이동합니다.
최근 20건 · 우선순위 · 상대 시간 표시
버그가 발생한 정확한 환경을 기록합니다.
브라우저 종류와 버전을 식별합니다.
navigator.userAgent
OS 플랫폼 정보를 기록합니다.
navigator.platform
브라우저 창의 가로·세로 픽셀 크기를 기록합니다.
innerWidth × innerHeight
Retina 등 고밀도 디스플레이 배율을 기록합니다.
devicePixelRatio
버그가 발생한 페이지의 URL과 제목을 기록합니다.
마지막 클릭한 요소의 CSS 셀렉터, 태그, 텍스트를 캡쳐합니다.
css-selector-generator
페이지의 런타임 데이터를 가로채 기록합니다.
console.log, warn, error를 인터셉트하여 최근 100건을 저장합니다.
버퍼 200 · 반환 100
fetch, XHR을 인터셉트하여 상태 코드, 소요 시간, 헤더, 에러 응답 본문을 기록합니다.
최대 50건 · 민감 헤더 13종 자동 마스킹
React Fiber 트리를 순회하여 컴포넌트명, props, state, hooks를 캡쳐합니다.
깊이 10 · 노드 50 · hooks 20
버그 발생 직전의 사용자 행동을 추적합니다.
클릭, 입력, 네비게이션, 스크롤, 특수 키 입력을 기록하고 버그 마커를 지원합니다.
최대 30건 · 비밀번호 자동 마스킹
선택한 요소의 박스 모델, 타이포그래피, 레이아웃, 부모·형제 간격을 캡쳐합니다.
최대 5개 요소 · computed style
콘솔에 찍히지 않는 에러까지 잡아냅니다.
window.onerror로 잡히는 모든 JS 에러의 메시지, 파일, 라인, 컬럼, 스택 트레이스를 기록합니다.
최대 50건 · stack 2000자
unhandledrejection 이벤트로 잡히는 비동기 에러를 별도 캡쳐합니다.
'느려요' 리포트를 정량 데이터로 바꿉니다.
LCP, FCP, CLS, INP, TTFB 5대 핵심 성능 지표를 실시간 관찰합니다.
PerformanceObserver
DNS → TCP → TLS → 요청 → 응답 → DOM 파싱 → Load까지 전체 타임라인을 기록합니다.
PerformanceNavigationTiming
가장 느린 리소스 상위 10개의 로딩 시간과 전송 크기를 기록합니다.
PerformanceResourceTiming
50ms 이상 메인 스레드를 블로킹하는 태스크를 감지합니다. UI 프리징 원인 분석에 핵심입니다.
최대 30건
CLS에 기여한 개별 레이아웃 이동의 크기와 대상 요소를 기록합니다.
최대 20건 · 요소 셀렉터 포함
JS 힙 메모리 사용량, 총 할당량, 한계치를 기록합니다. 메모리 릭 탐지에 활용됩니다.
performance.memory
버그 재현에 필요한 시스템 컨텍스트를 수집합니다.
다크모드, 모션 감소, 고대비, 강제 색상 등 사용자의 OS/브라우저 설정을 기록합니다.
matchMedia 5종
브라우저 언어 목록, 타임존 이름, UTC 오프셋을 기록합니다. i18n 버그 재현 필수.
navigator.languages · Intl
연결 유형(4G/3G), 다운링크 대역폭, RTT, 데이터 절약 모드 여부를 기록합니다.
navigator.connection
GPU 벤더와 모델명을 기록합니다. 렌더링 관련 버그 분석에 활용됩니다.
WEBGL_debug_renderer_info
브라우저의 현재 줌 배율을 기록합니다.
chrome.tabs.getZoom()
React, Vue, Angular, Svelte, jQuery, Next.js, Nuxt를 자동 감지하고 버전을 기록합니다.
전역 변수 탐지
페이지 내 모든 iframe의 src, sandbox 속성, cross-origin 여부를 기록합니다.
최대 20개
등록된 SW의 scope, 상태(active/waiting/installing), 스크립트 URL을 기록합니다.
WebGL, WebRTC, WASM, WebSocket, Worker 등 10가지 주요 웹 API 지원 여부를 확인합니다.
웹폰트별 family, weight, 로딩 상태(loaded/failed)를 기록합니다.
최대 30개 · document.fonts
Content-Security-Policy meta 태그의 내용을 기록합니다. 보안 정책으로 인한 기능 차단 원인 분석.
페이지 상태 변화와 네비게이션을 추적합니다.
pushState, replaceState, popstate를 추적하여 SPA 내부 네비게이션 이력을 기록합니다.
최대 30건
탭이 포그라운드/백그라운드로 전환된 시점을 기록합니다. 백그라운드 탭 관련 버그 판별에 활용.
최대 20건
브라우저 윈도우의 포커스 획득/상실 시점을 기록합니다.
최대 20건
IndexedDB, Cache Storage 등의 전체 사용량과 쿼터를 기록합니다. 내용은 수집하지 않습니다.
navigator.storage.estimate()
opt-in 으로 수집하는 민감 데이터. 마스킹은 클라이언트 측에서 SSoT 로 처리됩니다.
localStorage · sessionStorage · cookies 의 키-값을 수집합니다. 비밀번호·인증헤더·토큰 14+13+14종이 자동으로 마스킹됩니다.
opt-in · 키당 2KB 제한 · MCP get_storage
이슈 발생 시점의 페이지 DOM 을 outerHTML 로 저장합니다. script · input value · data-* 민감 속성은 클라이언트에서 제거합니다.
opt-in · gzip 압축 · MCP get_dom_snapshot
수집된 데이터를 AI가 분석하고, PR 까지 엽니다.
스크린샷, 행동 로그, 기술 메타데이터를 종합하여 단계별 재현 방법을 자동 작성합니다.
콘솔 에러, 네트워크 실패, 성능 데이터를 분석하여 가능한 원인과 해결 방향을 제시합니다.
이슈 한 건에서 Claude Code 가 코드 수정·PR·Preview·Production 머지까지 주도합니다. 토큰은 Claude Code 구독에서.
PLAN/IMPLEMENT 2단계 · 30분 타임아웃 · 3-버튼 매트릭스
이슈 링크 한 줄을 붙여넣으면 스크린샷·콘솔·네트워크·React 트리가 한 번에 펼쳐집니다.
resolve_by_url · 17개 도구 · OAuth 원클릭
리플레이의 입력 필드는 마스킹하고, 인증 헤더는 자동 제거하며, 쿠키·스토리지 스냅샷은 프로젝트와 사용자가 명시적으로 동의한 경우에만 수집합니다.
네트워크 로그의 민감 파라미터 14종, 헤더 13종, Body 필드 14종이 자동 필터링됩니다.
무료로 시작하세요. 카드 등록 없이, 2분이면 됩니다.
