실사용자 모니터링과 웹 바이털

Google의 web-vitals npm 패키지는 실제 사용자 브라우저에서 Core Web Vitals를 측정하기 위한 간단한 API를 제공합니다. npm install web-vitals로 설치한 다음 개별 메트릭 콜백인 onLCP, onFID(더 이상 사용되지 않음), onCLS, onFCP, onTTFB와 최신 메트릭인 Interaction to Next Paint용 onINP를 가져오십시오.

각 콜백(onLCP, onCLS, onINP 등)은 다음 내용을 포함하는 메트릭 객체를 받습니다. 이름('LCP'), 값(밀리초 또는 단위 없는 점수), 등급('good', 'needs-improvement', 'poor'), ID(중복 제거를 위한 고유 식별자)입니다. 메트릭 값이 확정되면 콜백이 한 번 실행됩니다.

Navigator.sendBeacon API 또는 fetch를 사용하여 메트릭을 분석 엔드포인트로 보고하십시오. sendBeacon은 페이지가 언로드된 후에도 계속 작동하므로 페이지가 숨겨질 때 확정되는 CLS와 같은 메트릭에 특히 중요합니다. 가능하면 모든 메트릭 보고를 하나의 비콘으로 일괄 처리하십시오.

Web Vitals를 OpenTelemetry에 통합하려면 각 메트릭에 대한 게이지 계측기를 만드십시오. 예를 들면 다음과 같습니다: const lcp = meter.createObservableGauge('web_vitals.lcp'). 각 onLCP 콜백에서 관련 속성(페이지 경로, 기기 유형)과 함께 값을 기록합니다. 그러면 관측성 백엔드에서 P75 LCP 성능 저하에 대한 알림을 설정할 수 있습니다.

Web Vitals로 포착되지 않는 React 관련 성능을 측정하려면 User Timing API를 사용하십시오. 렌더링 전에 performance.mark('render-start')를 호출하고, 렌더링 후에 performance.mark('render-end')를 호출한 다음 performance.measure('component-render', 'render-start', 'render-end')를 호출합니다. 이러한 측정값은 Chrome DevTools의 Performance 탭에 표시됩니다.

React Profiler 컴포넌트는 하위 트리를 감싸고 타이밍 데이터를 포함하여 onRender 콜백을 호출합니다. 데이터에는 ID(Profiler ID), 단계('mount' 또는 'update'), actualDuration(렌더링 시간), baseDuration(메모이제이션을 사용하지 않았을 때의 예상 렌더링 시간)이 포함됩니다. 개발 환경에서 이를 사용하여 느린 컴포넌트를 식별하십시오.

처리되지 않은 오류와 Promise 거부를 오류 상태의 OpenTelemetry 스팬으로 포착할 수 있습니다. 전역 리스너를 설정하십시오: window.addEventListener('error', handler) 및 window.addEventListener('unhandledrejection', handler). 스팬을 생성하고 span.setStatus({ code: SpanStatusCode.ERROR })를 설정한 다음 오류 메시지와 스택 트레이스를 속성으로 추가하고 span.end()를 호출하십시오.

React 오류 경계는 컴포넌트 트리에서 발생하는 렌더링 오류를 포착합니다. componentDidCatch 메서드에서 오류를 나타내는 OpenTelemetry 스팬을 생성하고 상태를 ERROR로 설정한 다음 error.message와 componentStack을 속성으로 첨부하고 span.end()를 호출하십시오. 이렇게 하면 React 렌더링 오류가 분산 트레이스 파이프라인으로 전달됩니다.

축소된 프로덕션 JavaScript는 "a.b at bundle.min.js:1:84721"처럼 읽기 어려운 스택 트레이스를 생성합니다. CI/CD 빌드 과정에서 소스 맵을 Sentry, Datadog 또는 OpenTelemetry 파이프라인에 업로드하십시오. 그러면 원시 스택 트레이스가 원래 TypeScript 파일 이름과 줄 번호로 자동 변환됩니다.

모든 세션의 전체 트레이스 데이터를 전송하면 비용이 많이 듭니다. 세션 샘플링을 구현하십시오. 페이지를 처음 로드할 때 sessionSampled 플래그를 무작위로 할당하고 sessionStorage에 저장합니다. 샘플링된 세션(예: 10%)에 대해서만 OpenTelemetry SDK를 초기화하고 트레이스를 전송하십시오. 오류가 발생한 세션은 항상 100% 샘플링하십시오.

OpenTelemetry 메트릭으로 보고된 Web Vitals를 사용하면 SLO 기반 알림을 설정할 수 있습니다. 1시간 동안 세션의 5%를 초과하는 범위에서 P75 LCP가 2.5초를 넘으면 알림을 발생시키십시오. 이렇게 하면 백엔드 인프라 메트릭이 아니라 사용자 경험에 직접 연결된 실행 가능한 신호를 엔지니어링 팀에 제공할 수 있습니다.

web-vitals 라이브러리의 onLCP 콜백은 언제 실행됩니까?

web-vitals 라이브러리는 실제 사용자 브라우저에서 LCP, INP, CLS, FCP, TTFB를 측정하기 위한 간단한 콜백을 제공합니다. SLO 기반 알림을 위해 이를 OpenTelemetry 메트릭으로 보고하고, 전역 리스너와 React 오류 경계를 통해 오류를 OpenTelemetry 스팬으로 포착하며, 축소된 스택 트레이스를 확인할 수 있도록 소스 맵을 업로드하십시오. 데이터 양을 관리하면서 오류는 100% 보존할 수 있도록 세션을 샘플링하십시오.