프론트엔드 모니터링이란
프론트엔드 모니터링은 웹 사이트 또는 앱의 성능을 추적하는데 사용되는 일련의 프로세스 및 도구입니다. 프론트엔드 모니터링은 주로 사용자가 최종적으로 보는 부분에 중점을 둡니다. 여기에는 다음과 같은 문제가 포함됩니다.
- 느린 렌더링
- 일관되지 않거나 응답하지 않는 사용자 경험
- 네트워크 요청/API 오류
- 프레임워크 관련 문제
웹 사이트가 더욱 강력해지고 복잡해짐에 따라 성능 유지 관리가 점점더 어려워지고 있습니다. 프론트엔드에서 성능은 사용자 경험의 일부입니다. 때떄로 사용자는 웹 사이트에서 처음 보고 경험한 것을 기반으을 그 기업의 품질을 평가합니다. 따라서 프론트엔드 모니터링은 견고한 웹 사이트와 앱을 개발하는데 필수적인 부분입니다.
장애의 탐지와 대응은 신속하고 정확하게 이루어져야 합니다. 장애의 원인을 파악하기 전까지 인프라 이슈인지 데이터 이슈인지 알 수 없습니다. 또한 백엔드, 프론트엔드 중 어디에서 발생한 이슈인지 파악이 어렵기 때문에 장애가 발생하면 관련된 모든 개발자들은 장애의 원인을 찾기 위해 고군분투합니다.
프론트엔드에서 데이터 영역, 화면 영역에서 발생하는 오류는 충분히 조심하고 방어할 수 있을 것 같습니다. 대부분의 경우에는 QA나 Staging 환경에서도 충분히 재현되기 때문에 사용자들이 오류 사항을 경험하기 전에 해결하는 것도 가능합니다. 그런데 외부 요인에 의한 오류나 런타임 오류는 어떨까요? 크롬의 쿠키 정책 변경, Safari 특정 버전의 IndexedDB API 버그, 또는 정말 특이한 케이스에서만 발생하는 런타임 오류같은 친구들은 QA나 Staging 환경에서는 재현되지 않는 경우가 대부분입니다.
Sentry란?
Sentry는 실시간 로그 취합 및 분석 도구이자 모니터링 플랫폼입니다. 로그에 대해 다양한 정보를 제공하고 이벤트별, 타임라인으로 얼마나 많은 이벤트가 발생하는지 알 수 있고 설정에 따라 알림을 받을 수 있습니다. 그리고 로그를 수집하는데서 그치지 않고 발생한 로그들을 시각화 도구로 쉽게 분석할 수 있도록 도와주며 다양한 플랫폼을 지원합니다. React 프로젝트에서 Sentry를 사용하면 성능을 추적, 기록 및 모니터링할 수 있습니다.
이벤트 로그에 대한 다양한 정보 제공
Sentry는 발생한 이벤트 로그에 대하여 다양한 정보를 제공합니다.
- Exception & Message: 이벤트 로그 메시지 및 코드 라인 정보(source map 설정을 해야 정확한 코드 라인을 파악할 수 있습니다.)
- Device: 이벤트 발생 장비 정보(name, family, model, memory등)
- Browser: 이벤트 발생 브라우저 정보(name, version 등)
- OS: 이벤트 발생 OS 정보(name, version, build, kernelVersion등)
- Breadcrumbs: 이벤트 발생 과정
비슷한 오류 통합
Sentry는 Issue Grouping 기능으로 비슷한 이벤트 로그를 하나의 이슈로 통합합니다.
Sentry 연동과정
Deploy and Monitor your Next.js Application with Vercel & Sentry
위 영상과 공식 문서를 참고했습니다.
- dsn: 이벤트 전송을 위한 식별 키
- release: 애플리케이션 버전(보통 package.json에 명시한 버전을 사용합니다. 이는 버전별 오류 추적을 용이하게 합니다.)
- environment: 애플리케이션 환경(dev, production등)
- normalizeDepth: 컨텍스트 데이터를 주어진 깊이로 정규화(기본값: 3)
샘플 비율(SampleRate) 정보
테스트하는 동안, traceSampleRate를 1.0으로 유지해도 됩니다. 이것은 브라우저에서 수행된 모든 작업이 Sentry에 트랜잭션으로 전송됨을 의미합니다.
프로덕션에서 Sentry의 트랜잭션 할당량에 도달하지 않고 균일한 샘플 데이터를 수집하려면 이 값을 낮춰야합니다. 또는 샘플 데이터를 동적으로 수집하기 위해 traceSampler를 사용하여 이러한 트랜잭션을 필터링할 수 있습니다.
샘플링 옵션에 대한 자세한 내용은 여기 문서에서 찾을 수 있습니다.
사용자 지정 오류 캡처
React에서 오류를 캡처하는 것 외에도 Sentry는 앱 내에서 지정된 오류를 캡처할 수 있습니다.
아래와 같이 할 수 있습니다.
import * as Sentry from "@sentry/react"
const addColor = (title, color) => {
if (colors.some((c) => c.color === color)) {
throw "Color already exists"; // throw 문을 추가하세요.
} else {...}
try {
addColor(title.value, color.value)
} catch (e) {
Sentry.captureException(e)
console.error(e)
}
import React from "react"
import * as Sentry from "@Sentry/react"
;<Sentry.ErrorBoundary
fallback={<p>에러가 발생하였습니다. 잠시 후 다시 시도해주세요.</p>}
>
<Example />
</Sentry.ErrorBoundary>
성능 모니터링 활성화
오류 추적 외에도 export문에서 App 컴포넌트에 Sentry.withProfiler()를 감싸주어 Sentry 대시보드에 성능 모니터링을 활성화할 수 있습니다.
export default Sentry.withProfiler(App)
성능 탭으로 이동하여 FCP(최초로 컨텐츠를 볼 수 있는 페인트 단계), API 요청의 대기 시간 또는 중단되는 시간 등과 같은 중요한 항목을 모니터링하고 측정합니다.
