프런트엔드 관측 가능성: 무엇이며 왜 필요한가

백엔드 관측성은 충분히 자리 잡았습니다. 로그는 이벤트를 기록하고, 메트릭은 리소스 사용량을 추적하며, 분산 트레이스는 마이크로서비스를 거치는 요청을 따라갑니다. 데이터독, 프로메테우스, 예거와 같은 도구는 프로덕션 백엔드 시스템에 널리 배포되어 있습니다.

프런트엔드 관측성은 리액트 애플리케이션과 상호 작용하는 사용자의 경험을 추적하는 새로운 분야입니다. 여기에는 사용자 상호 작용 기록, 렌더링 성능 측정, 네트워크 요청 관찰, 브라우저에서 발생한 JavaScript 오류 수집이 포함됩니다.

백엔드가 낮은 오류율과 빠른 데이터베이스 쿼리로 완벽하게 정상인 것처럼 보여도 사용자는 느리고 끊기거나 제대로 작동하지 않는 인터페이스를 경험할 수 있습니다. 프런트엔드 관측성은 서버의 상태만이 아니라 사용자가 실제로 경험하는 것을 측정하여 이 간극을 메웁니다.

프런트엔드 트레이스는 사용자의 동작으로 발생한 일련의 이벤트를 포착합니다. 버튼 클릭, 리액트 상태 업데이트, API에서 데이터 가져오기, 결과 렌더링이 그 예입니다. 이 트레이스는 사용자의 의도를 이를 실행한 컴포넌트 및 해당 컴포넌트가 수행한 네트워크 호출과 연결합니다.

백엔드 메트릭에 해당하는 프런트엔드 측 지표는 웹 바이털입니다. LCP(Largest Contentful Paint)는 로딩 속도를 측정하고, INP(Interaction to Next Paint)는 응답성을 측정하며, CLS(Cumulative Layout Shift)는 시각적 안정성을 측정합니다. 이러한 지표는 Google이 핵심 웹 바이털 순위를 정할 때 사용하는 메트릭입니다.

프런트엔드 로그는 브라우저에서 발생한 오류, 경고, 정보성 이벤트를 기록합니다. 주요 신호는 console.error 호출, 처리되지 않은 JavaScript 예외(window.onerror), 처리되지 않은 Promise 거부(window.onunhandledrejection), 리액트 오류 경계의 포착입니다.

실제 사용자 모니터링은 프로덕션 환경의 실제 사용자 브라우저에서 관측성 데이터를 수집합니다. RUM은 브라우저를 자동으로 계측하여 성능 측정 시간, 오류, 사용자 상호 작용을 발생 시점에 수집합니다. 이를 통해 어떤 시뮬레이션 테스트로도 재현할 수 없는 실제 환경의 데이터를 얻을 수 있습니다.

시뮬레이션 모니터링은 라이트하우스 CI, 플레이라이트, WebPageTest와 같은 자동화 도구를 사용하여 통제된 환경에서 사용자 상호 작용을 모의합니다. 예측 가능하고 사용자에게 도달하기 전에 회귀를 포착하지만, 실제 사용자의 다양한 기기, 네트워크, 사용 패턴은 반영하지 못합니다.

여러 상용 도구가 리액트를 위한 필요한 기능이 모두 포함된 RUM을 제공합니다. 데이터독 RUM은 전체 스택 트레이스를 위해 데이터독 APM과 통합되고, 뉴 렐릭 브라우저와 센트리 퍼포먼스는 각각 브라우저 모니터링과 성능 모니터링을 제공합니다. 센트리 퍼포먼스는 하나의 SDK로 오류와 성능을 함께 수집합니다. 이러한 도구는 통합이 빠르지만 규모가 커지면 비용이 많이 듭니다.

OpenTelemetry는 트레이스, 메트릭, 로그 수집을 위한 공급업체 중립적인 API와 SDK를 정의하는 CNCF 프로젝트입니다. OpenTelemetry로 계측하면 데이터를 직접 소유하고 Jaeger, 그라파나 템포, 허니콤, 데이터독 또는 자체 데이터 처리 흐름 등 호환되는 어떤 백엔드로든 보낼 수 있습니다.

프런트엔드 관측성이 없으면 느린 사용자 경험은 엔지니어링 팀에 거의 보이지 않습니다. 고객 지원 문의가 급증하거나 전환율이 하락하는 현상은 확인할 수 있지만, 브라우저의 트레이스와 메트릭이 없으면 근본 원인을 찾아내는 일은 추측에 의존하게 됩니다.

실제 사용자 모니터링(RUM)과 시뮬레이션 모니터링의 주요 차이점은 무엇인가요?

프런트엔드 관측성은 트레이스, 메트릭, 로그라는 세 가지 핵심 요소를 브라우저에 적용합니다. RUM은 실제 사용자 경험을 수집하고, 시뮬레이션 모니터링은 회귀를 조기에 포착합니다. 웹 바이털(LCP, INP, CLS)은 주요 프런트엔드 메트릭입니다. OpenTelemetry는 이 데이터를 수집하고 내보내기 위한 공급업체 중립적 표준을 제공하므로 관측성 백엔드를 자유롭게 선택할 수 있습니다.