본문으로 건너뛰기

에러 트래커 (Error Tracker)

웹 스토리지에 배포된 페이지의 클라이언트 JavaScript 에러를 자동 수집해 리포트합니다.

📌 cb.errorTracker웹 스토리지 ID 와 1:1 로 묶입니다. 콘솔에서 웹 스토리지를 만든 뒤, 해당 스토리지에 배포된 사이트에서 init(storageWebId) 를 호출하세요.

SDK 초기화 옵션

ErrorTracker 의 동작은 new ConnectBase({...}) 옵션으로 미리 설정할 수 있습니다.

typescript
const cb = new ConnectBase({
  publicKey: 'cb_pk_...',
  errorTracker: {
    autoCapture: true,                          // 기본 true
    captureTypes: ['error', 'unhandledrejection'], // 기본값
    batchInterval: 5000,                         // 배치 전송 간격 (ms)
    maxBatchSize: 10,                            // 최대 배치 크기
    debug: false,                                // 디버그 로그
    beforeSend: (report) => {
      // 특정 에러 무시
      if (report.message.includes('Script error')) return false
      return report
    }
  }
})

트래킹 시작

typescript
// init 의 인자는 웹 스토리지 ID (string)
cb.errorTracker.init('web_storage_id')

이후 window.onerrorunhandledrejection 이벤트가 자동 캡처되어 batchInterval 마다 일괄 전송됩니다.

수동 에러 리포팅

typescript
try {
  riskyOperation()
} catch (error) {
  await cb.errorTracker.captureError(error as Error, {
    error_type: 'custom',
    url: window.location.href
  })
}

메시지 리포팅

typescript
await cb.errorTracker.captureMessage('사용자가 비정상적인 행동을 함', {
  error_type: 'custom'
})

큐 즉시 전송 / 정리

typescript
// 큐에 있는 에러들 즉시 전송 (페이지 종료 직전 등)
await cb.errorTracker.flush()

// 트래커 정리 (언마운트 시)
cb.errorTracker.destroy()

ErrorReport 필드

typescript
interface ErrorReport {
  message: string
  source?: string             // 발생 파일
  lineno?: number             // 라인 번호
  colno?: number              // 컬럼 번호
  stack?: string              // 스택 트레이스
  error_type?: 'error' | 'unhandledrejection' | 'resource' | 'network' | 'custom'
  url?: string                // 발생 URL
  referrer?: string           // 이전 페이지
}

📌 SDK 의 ErrorTracker 는 Sentry 식의 setUser / addBreadcrumb / startTransaction 같은 컨텍스트/성능 모니터링 API 를 제공하지 않습니다. 위에 나열된 메서드만 사용 가능합니다.

수집된 에러는 콘솔의 웹 스토리지 → 에러 메뉴에서 확인할 수 있습니다.