RUMKIT

RUMKIT 은 브라우저에 성능을 수집하여 그라파나로 전송하는 라이브러리입니다

RUMKIT 아키텍처

flowchart TD

subgraph BROWSER["사용자 브라우저"]
  direction TB

  subgraph APP["Web Application"]
    direction LR
    React["React 앱"]
    Vue["Vue 앱"]
    Angular["Angular 앱"]
  end

  subgraph RUM["RUM Kit (수집 SDK)"]
    direction TB
    index["index.ts (엔트리)"]
    perf["perf.ts (성능 수집)"]
    userCtx["userContext.ts (환경 정보)"]
    webvitals["webvitals.ts"]
    errors["errors.ts"]
    po["PerformanceObserver"]

    index --> perf
    perf --> webvitals
    perf --> errors
    perf --> po
    userCtx --> po
  end

  APP --> index
end

subgraph LOGCLIENT["log-gateway-js (전송 계층)"]
  direction TB
  Vitals["Core Web Vitals"]
  Timing["Navigation / Resource Timing"]
  Error["Error Tracking"]
  Context["User Context"]
end

RUM --> LOGCLIENT
LOGCLIENT --> LOGSVC["log-gateway (서버)"]
LOGSVC --> LOKI["Loki"]
LOKI --> GRAFANA["Grafana"]

모듈별 역할

1. index.ts(진입점)

• 라이브러리 공개 API

2. perf.ts(메인 오케스트레이터)

• RUM 기능 초기화 및 전체 모듈 통합
• 사용자 컨텍스트 수집,web vitals 수집, dom,resource 로드 지표 수집, 에러 추적 초기화

3. webvitals.ts(Core Web Vitals 수집)

• 사용자 경험 핵심 지표 수집
• PerformaceObsercer API기반으로 각 지표 데이터 수집
• 수집 지표
  • LCP(Larget Contentful Paint): 최대 콘텐츠 렌더링 시간
  • INP(Interaction to Next Paint): 상호 작용 지연 시간
  • CLS(Cumulative Layout Shift): 누적 레이아웃 시프트
  • FCP(First COntentful Paint): 첫 콘텐츠 렌더링 시간

4. userContext.ts(사용자 정보 수집)

• 사용자 환경 정보 수집
• 수집 정보
  • 브라우저: 이름, 버전, UserAgent
  • OS: 운영체제,버전
  • Device: 타입(mobile,tablet,desktop), 벤더,모델
  • Viewport: 너비,높이,픽셀 비율
  • Network : Connection API(effectiveType,downlink,rtt)
  • 페이지 : URL,Referrer,Pathname
  • 세션: 고유 세션 ID
  • 기타 : 언어,타임존, 쿠키 지원 여부

5. error.ts(에러 추적 모듈) : 구현중

• 런타임시 발생하는 에러 수집
• 추적 대상
  • Javacript에러 : window.onerror 이벤트
  • Promise Rejection: unhandledrejection 이벤트
  • 리소스 로드 실패 : 이미지,스크립트, CSS 등
  • React에러 : Error Boundary와 통합
• 수집 정보
  • 에러 메세지, Stack Trace
  • 파일명,라인번호, 컬럼 번호
  • 에러 타입별 추가 컨텍스트
  • 발생 URL, Timestamp
  • 사용자 컨텍스트