Spot은 Chrome 확장 프로그램으로, 버그 보고를 놀라울 만큼 빠르고 간단하게 만들어 줍니다.

Spot을 사용하면 브라우저에서 바로 버그를 손쉽게 녹화하고 팀과 즉시 공유할 수 있습니다. 최종 결과물은 사용자 동작, 콘솔 로그와 오류, 네트워크 페이로드, 사용자 에이전트 데이터가 포함된, 바로 공유할 수 있는 완성형 동영상 버그 리포트입니다. 한마디로, 버그를 그 어느 때보다 빠르게 보고하는 데 필요한 모든 것과 팀이 그만큼 빠르게 수정하는 데 필요한 모든 것을 한 번에 얻을 수 있습니다.

• Spot은 오픈 소스 제품부터 엔터프라이즈 제품까지 모든 OpenReplay 요금제에 포함되어 있습니다.
• Spot은 Chrome 확장 프로그램이며, Microsoft Edge, Brave, Arc를 비롯한 모든 Chromium 기반 브라우저에서도 작동합니다.

Spot Chrome 확장 프로그램은 빠르고 간단하게 설치할 수 있습니다.

1. Chrome 웹 스토어의 Spot 확장 프로그램 페이지로 이동하여 Add to Chrome을 클릭합니다.
2. 나중에 쉽게 접근할 수 있도록 Spot을 Chrome 툴바에 고정합니다.

Spot을 사용하기 전에 기존 OpenReplay 계정으로 로그인하거나 새 계정을 만들어야 합니다.

• OpenReplay 클라우드

  Section titled OpenReplay 클라우드
  • 신규 사용자:
    1. Spot을 고정한 후 툴바의 Spot 아이콘을 클릭합니다.
    2. Create Account를 선택합니다.
    3. OpenReplay의 주요 사용 사례(primary use-case)를 선택합니다.
    • 주요 사용 사례로 “report bugs via Spot”을 선택했더라도, 나중에 Setup Tracker를 클릭하면 OpenReplay의 전체 기능을 사용할 수 있습니다.
    
  • 기존 사용자:
    1. 툴바에 고정된 Spot 확장 프로그램을 클릭합니다.
    2. Log in을 선택하고 OpenReplay 인증 정보를 입력합니다.
    • 저장된 Spot은 왼쪽 사이드바의 Spot 메뉴에서 확인할 수 있습니다.
    

• OpenReplay 셀프 호스팅

  Section titled OpenReplay 셀프 호스팅
  • 신규 및 기존 사용자:
    • OpenReplay 인스턴스를 Spot을 지원하는 최신 버전 (v1.20.0)으로 업그레이드합니다.
    • 업그레이드가 완료되면 왼쪽 사이드바에 Spot 메뉴가 나타납니다. Spot은 사용자의 인스턴스에 안전하게 저장됩니다.

로그인을 마쳤으니 이제 Spot으로 버그를 발견하고 보고할 준비가 끝났습니다.

Spot Chrome 확장 프로그램의 주요 기능을 사용하는 방법은 다음과 같습니다.

• 녹화 시작: 툴바의 Spot 아이콘을 클릭하고 Record Tab을 선택하면 활성 탭의 모든 내용이 캡처됩니다.

• 마이크 활성화: 필요한 경우 마이크 옵션을 켜서 녹화에 오디오를 포함할 수 있습니다.

• 녹화 일시 중지: 언제든지 녹화 패널에서 일시 중지 아이콘을 클릭합니다.

• 녹화 다시 시작: 녹화 패널에서 다시 시작 아이콘을 클릭하면 녹화를 처음부터 다시 시작합니다.

• 녹화 중지: 녹화 패널에서 중지 아이콘을 클릭하면 녹화가 중지됩니다.

• 댓글 추가: 저장하기 전에 댓글을 추가하여 추가적인 맥락을 제공할 수 있습니다.

• Spot 저장: 녹화를 중지하면 콘솔 로그와 네트워크 데이터 같은 관련 기술 정보와 함께 자동으로 저장됩니다.

  

• 녹화 시작: Spot 아이콘을 클릭하고 Record Desktop을 선택합니다. 전체 화면을 녹화할지, 특정 창만 녹화할지 선택합니다.

Spot은 모든 버그 녹화에 DevTools 데이터를 자동으로 포함하므로, 개발자가 문제를 효율적으로 디버깅하는 데 필요한 맥락을 온전히 확보할 수 있습니다. 각 녹화에는 다음 정보가 캡처됩니다.

• 콘솔 로그: 녹화 세션 동안 발생한 모든 콘솔 출력, 경고, 오류 메시지.
• 네트워크 요청: 다음을 포함한 모든 네트워크 활동의 로그.
  • 요청 및 응답 헤더와 본문: 각 요청에서 주고받은 데이터.
  • 상태 코드: 실패했거나 문제가 있는 요청을 빠르게 식별할 수 있습니다.
• 사용자 에이전트 데이터: 사용자의 브라우저와 기기에 관한 정보로, 개발자가 버그가 발생한 환경을 재현하는 데 도움이 됩니다.
• 사용자 상호작용 데이터: 클릭, 탐색 경로 등 사용자 활동에 대한 세부 정보로, 개발자가 문제가 어떻게 발생했는지 이해할 수 있게 해 줍니다.

GraphQL 오류 관련 참고

GraphQL은 일반적으로 응답 본문에 오류가 포함되어 있더라도(보통 errors 필드 안에 들어 있습니다) 모든 응답에 200 OK 상태 코드를 반환합니다. 따라서 HTTP 상태 코드만으로는 문제를 발견하기 어려울 수 있습니다.

Spot은 GraphQL 응답 본문에 errors 객체가 포함되어 있는지 감지합니다. 이러한 오류가 발견되면 해당 요청에 200 대신 400 상태 코드를 표시합니다. 이렇게 조정하면 개발자가 문제가 있는 GraphQL 요청을 더 쉽게 식별하고 디버깅할 수 있습니다.

• 설정 열기: 툴바의 Spot 아이콘을 클릭하고 Settings 아이콘을 선택합니다.
• Go to Spot tab after save: 이 옵션을 켜면 저장 직후 해당 Spot 녹화로 바로 이동합니다.
• Include DevTools: 이 옵션을 켜면 콘솔 로그, 네트워크 호출 및 기타 디버깅 정보가 녹화에 포함됩니다.

• 초대 보내기: Preferences를 클릭하고 Team으로 이동한 다음 Add Team Member를 클릭합니다. 팀원의 이름과 이메일 주소를 입력한 후 초대장을 보냅니다.
• 팀 접근 권한: 모든 팀원은 OpenReplay의 Spots 보기에서 Spot 녹화를 볼 수 있습니다.

Spot은 특정 프로젝트에 종속되지 않습니다.

• 비공개 공유: Spot 녹화는 OpenReplay의 팀 내부에서 볼 수 있도록 비공개 링크로 공유할 수 있습니다.
• 공개 공유: 외부 열람용 공개 링크를 만들 수 있으며, OpenReplay 계정이 없어도 접근할 수 있습니다.
• 도구 연동: 이 링크를 Slack, Teams, Jira, Linear 같은 버그 추적 도구나 협업 도구에 포함하면 쉽게 접근하고 팀으로 협업할 수 있습니다.

Spot 녹화를 저장하려 할 때 HTTP 520 Unknown Error가 발생한다면, 일반적으로 동영상 파일 크기가 Cloudflare에서 허용하는 크기 제한을 초과했다는 뜻입니다. 이는 긴 Spot을 녹화했거나 복잡한 상호작용이 포함된 Spot을 녹화했을 때 발생할 수 있습니다.

이 문제를 해결하려면 다음과 같이 하세요.

1. 다음 위치에서 OpenReplay 배포 설정 파일을 엽니다: scripts/helmcharts/vars.yaml
2. proxy-body-size 변수를 찾습니다(109번째 줄 근처).
3. 더 큰 녹화를 수용할 수 있도록 값을 기본값인 10m에서 늘립니다
   • 예를 들어 약 36MB 크기의 파일을 업로드해야 한다면 40m 이상으로 설정해야 합니다

설정 조정 예시:

proxy-body-size: 40m  # Increase this value based on your recording size needs

설정을 업데이트한 후에는 변경 사항이 적용되도록 배포에 반영하세요.

이 플러그인 설정에 어려움이 있으신가요? Slack에 접속하여 커뮤니티의 도움을 받아 보세요.