Sentry, Bugsnag & Datadog RUM 브리지

프런트엔드 JavaScript 예외를 MousePlayer 영상 세션 녹화와 직접 연결하여 개발 및 QA 작업을 빠르게 합니다.

1. 문제: 스택 추적에는 사용자 맥락이 없음

사이트에서 처리되지 않은 JavaScript 예외나 네트워크 충돌이 발생하면 Sentry 같은 도구는 스택 추적과 브라우저 사용자 에이전트 문자열을 제공합니다. 하지만 개발자는 여전히 묻게 됩니다: “충돌 직전에 어떤 버튼을 클릭했나요?” 또는 “양식에 어떤 데이터를 입력했나요?”

이 MousePlayer 오류 추적 브리지 는 오류 보고서에 시각적 재생 URL을 직접 연결하여 자동 해결합니다. 예외 발생 시 Sentry나 Bugsnag 대시보드에서 링크 하나로 충돌의 정확한 밀리초까지 사용자 화면 영상을 볼 수 있습니다.

부하 없는 연동: 브리지는 mp.js안에서 조용한 백그라운드 감시기로 실행됩니다. 측정 가능한 부하나 Core Web Vitals 영향 없이 오류 추적 SDK를 자동 감지합니다.

2. 활성화 & 제공업체 연결

대시보드 또는 SDK 설정 객체를 통해 오류 추적 브리지를 활성화합니다.

방법 A: 대시보드 활성화(코드 불필요)

  1. MousePlayer 워크스페이스에 로그인하여 내 속성을 여세요.
  2. 대상 사이트 옆의 설정 / 연동 버튼을 클릭하세요.
  3. 연동 창에서 Sentry, Bugsnag & Datadog RUM 브리지 를 ON으로 전환하세요.
  4. 제공업체(sentry, bugsnag또는 datadog)를 고르고 변경 사항 저장을 클릭하세요.

방법 B: 수동 스크립트 설정

하드코딩하려면 error_bridge_active: true 를 window.mp_config 객체 안에 전달하세요:

<!-- MousePlayer SDK with Error Tracking Bridge Enabled --> <script> window.mp_config = { channel: 'YOUR_CHANNEL_ID', error_bridge_active: true, error_provider: 'sentry' // 'sentry', 'bugsnag', or 'datadog' }; </script>

3. SDK 실행 참조표

선택한 제공업체에 따라 공식 JavaScript SDK 태그 메서드를 자동 실행합니다:

제공업체 실행되는 JavaScript 메서드 삽입되는 메타데이터 키
Sentry window.Sentry.setTag(...) mouseplayer_session_url
Bugsnag window.Bugsnag.addMetadata('MousePlayer', { ... }) session_url
Datadog RUM window.DD_RUM.setGlobalContextProperty(...) mouseplayer_session_url

4. 오류 보고서에서 재생 찾기

활성화 후 프런트엔드 충돌이 기록될 때마다 오류 모니터링 대시보드에 URL이 즉시 표시됩니다.

Sentry 이슈 세부 정보

Sentry 프로젝트의 이슈를 열고 태그 영역으로 내려가세요. 다음 이름의 태그가 있습니다: mouseplayer_session_url. 검색창에서 다음 쿼리로 이슈를 필터링할 수도 있습니다: mouseplayer_session_url:*.

Bugsnag 메타데이터 탭

Bugsnag 오류 보고서 아래 탐색 탭에서 MousePlayer 라는 새 사용자 정의 탭을 확인하세요. 클릭 가능한 session_url 링크가 포함됩니다.

Datadog RUM 오류 탐색기

Datadog RUM에서 기록된 오류 세션을 열고 전역 컨텍스트 / 속성 JSON 트리를 확인하세요. URL은 @mouseplayer_session_url아래에 색인됩니다.

여기에 언급된 모든 상표는 각 소유자에게 귀속됩니다. MousePlayer는 이 제공업체들과 사업 관계가 없습니다.