Browser Support Reporter

About

Browser Support Reporter는 비개발자가 DevTools를 열지 않고도 버그 재현 정보를 한 번에 정리해 개발자에게 전달할 수 있도록 도와주는 디버깅 보조 도구입니다.

녹화 시작 → 문제 재현 → Markdown 보고서 자동 생성 → 클립보드 복사 → Jira에 바로 붙여넣기. 한 번의 클릭이면 끝입니다.


■ 자동으로 캡처되는 정보

• 콘솔 로그 — console.log/info/warn/error 호출, JavaScript 예외, 처리되지 않은 Promise 거부
• 네트워크 요청 — XHR/fetch 호출의 URL, HTTP 메서드, 상태 코드, 소요 시간, 리소스 타입
• 브라우저 환경 — User Agent, 뷰포트 해상도, 페이지 URL/타이틀, 언어 설정
• WebRTC 통계 (옵션) — 화상회의/통화 페이지의 peer connection 상태, ICE 후보 타입, RTT, 패킷 손실
• 화면 녹화 (옵션) — 시스템 오디오 포함, .webm 파일로 저장


■ 민감 정보 자동 마스킹

수집된 데이터는 보고서로 정리되기 전에 자동으로 다음 항목이 [REDACTED]로 가려집니다:
• HTTP 헤더: Authorization, Cookie, Set-Cookie, X-API-Key 등
• URL 쿼리 파라미터: token, api_key, password, secret, code, signature 등
• ICE 서버의 TURN 자격증명
• WebRTC ICE candidate의 IP 주소
• URL의 userinfo 부분


■ Jira 자동 연동

녹화 종료 후 [Send to Jira] 버튼을 누르면:
1. Markdown 보고서가 클립보드로 복사됨
2. 설정된 Jira 보드 URL이 새 탭으로 열림
3. Create Issue 다이얼로그가 자동으로 펼쳐짐
4. 설명(description) 필드에 보고서 내용이 자동으로 채워짐

Jira URL은 팝업에서 직접 편집해서 어떤 프로젝트/보드든 지정할 수 있습니다.


■ 사용 흐름

1. 문제 페이지에서 확장 아이콘 클릭
2. 필요하다면 "Also record screen video" 체크
3. [Start recording] 클릭
4. 같은 탭에서 버그 재현
5. [Stop recording] 클릭
6. 노트 추가 후 [Send to Jira] 또는 [Copy] 클릭


■ 요청 권한 및 사용 목적

• webRequest — 사용자가 시작한 녹화 세션 동안에만 활성 탭의 네트워크 요청 메타데이터 수집 (본문은 수집하지 않음)
• scripting — WebRTC 옵션을 켰을 때 콘텐츠 스크립트를 동적으로 등록
• storage — 녹화 세션 상태와 사용자 설정을 브라우저에 임시 보관
• offscreen — 화면 녹화 옵션 활성 시 MediaRecorder를 호스팅
• downloads — 녹화된 .webm 파일을 사용자 다운로드 폴더에 저장하고, 새 녹화 시작 시 자동 정리
• activeTab / tabs — 사용자가 녹화를 시작한 탭만 식별해서 다른 탭과 데이터가 섞이지 않도록 함
• 호스트 권한 (<all_urls>) — 어느 페이지에서든 녹화를 시작할 수 있도록 함


■ 개인정보 보호

• 수집된 데이터는 사용자 디바이스 내에만 저장됩니다
• 어떤 외부 서버로도 데이터를 전송하지 않습니다
• 사용자가 명시적으로 녹화를 시작한 탭의 데이터만 캡처합니다
• Reset 또는 새 녹화 시작 시 이전 영상은 디스크/IndexedDB에서 자동 삭제됩니다
• Cookie, Authorization 헤더는 브라우저 API 수준에서 우리 확장에 노출되지 않도록 설계되었습니다


■ 작동 환경

Chrome 116 이상.