RUMKIT

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

RUMKIT 아키텍처

``mermaid
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"]


``

$3

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
- 사용자 컨텍스트