GitLab 프론트엔드 개발에서의 Sentry 모니터링
GitLab 프론트엔드 팀은 사용자들이 gitlab.com에서 UI의 성능을 모니터링하는 관측 도구로 Sentry를 사용합니다.
GitLab.com은 관리 > 메트릭 및 프로파일링 > Sentry에서 Sentry 인스턴스로 보고하도록 구성되어 있습니다.
우리는 두 가지 종류의 데이터를 모니터링합니다: 에러와 성능.
참고: 프론트엔드 관측 워킹 그룹은 Sentry 사용 방법을 개선하고자 합니다. GitLab 팀 멤버는 이슈 #427402에서 피드백을 제공할 수 있습니다.
Sentry 사용 시작하기
저희 Sentry 인스턴스는 https://new-sentry.gitlab.net/에 위치해 있습니다. Sentry에 접근할 수 있는 것은 GitLab 팀 멤버만 가능합니다.
첫 로그인 후, 팀에 참여하기를 선택하여 팀 페이지에서 #gitlab이 YOUR TEAMS 아래에 표시되는지 확인하세요.
에러 보고
에러, Sentry UI에서 “이벤트”로도 알려진 것은 사용자가 브라우저에서 경험하는 비정상적이거나 예상치 못한 런타임 동작의 인스턴스입니다.
GitLab은 Sentry Browser SDK를 사용하여 에러를 보고합니다.
이 프로젝트는 gitlabcom-clientside입니다.
알려진 에러 보고
Sentry에 에러를 보고하는 가장 흔한 방법은 captureException(error)를 호출하는 것입니다. 예를 들어:
import * as Sentry from '~/sentry/sentry_browser_wrapper';
try {
// 런타임에서 실패할 수 있는 코드
} catch (error) {
Sentry.captureException(error)
}
에러를 보고해야 하는 시점은 언제일까요? 우리는 신경 쓰지 않아도 되는 에러나 제어할 수 없는 에러를 보고하는 것을 피하고 싶습니다. 예를 들어, 사용자가 양식을 잘못 작성할 때 유효성 검사 에러를 보고해서는 안 됩니다. 그러나 양식 제출이 서버 에러로 실패할 경우, Sentry가 알아야 하는 에러입니다.
기본적으로 로컬 개발 인스턴스에는 Sentry가 구성되어 있지 않습니다. Sentry 호출은 디버깅을 위해 콘솔에 [Sentry stub] 접두사와 함께 표시됩니다.
처리되지 않거나 알려지지 않은 에러
또한, 우리는 모든 페이지에서 자동으로 처리되지 않은 에러를 캡처합니다.
에러 모니터링
에러가 캡처되면, Sentry에 나타납니다. 예를 들어 캐너리 및 프로덕션에서 지난 24시간 동안 보고된 에러를 볼 수 있습니다.
목록에서 어떤 에러든 선택하여 자세한 내용을 볼 수 있습니다… 그리고 이에 대한 해결책을 제안하는 것이 이상적입니다!
참고: 우리는 환경 데이터에 약간의 스팸이 있기 때문에 gprd 및 gprd-cny 환경으로 필터링하는 것을 권장합니다.
에러 데이터 탐색
팀 멤버들은 Sentry의 Discover 페이지를 사용하여 예상치 못한 문제를 찾을 수 있습니다.
또한 우리는 대시보드를 만들어 가장 많은 에러를 생성하는 기능 범주 및 페이지를 보고하는 등의 데이터를 제공했습니다.
기술 팀 멤버들은 에러 데이터를 탐색하고 사용자 인터페이스의 에러를 줄이는 방법을 찾는 것을 권장하며, Sentry는 에러가 발생할 때 알림을 받고 싶어하는 사람들을 위해 알림도 제공합니다.
에러 필터링
하루에 수천 건의 보고를 받기 때문에 팀 멤버들은 자신의 작업 영역에 따라 에러를 필터링할 수 있습니다.
에러를 식별하는 데 도움이 되도록 두 가지 추가적인 사용자 정의 tag로 에러를 표시합니다:
-
feature_category: 페이지의 피쳐 영역입니다. (예:code_review_workflow또는continuous_integration.) 출처:gon.feature_category -
page: 페이지를 렌더링하는 컨트롤러에서 호출된 방법의 식별자입니다. (예:projects:merge_requests:index또는projects:pipelines:index.) 출처:body_data_page.
프론트엔드 엔지니어링 팀 멤버들은 그룹 및/또는 페이지와 관련된 에러를 필터링할 수 있습니다.
성능 모니터링
우리는 성능 지표를 Sentry에 보고하기 위해 BrowserTracing를 사용합니다.
지난 24시간 동안의 성능 데이터를 여기에서 확인하고, 필터를 사용하여 자세히 알아볼 수 있습니다.
도움말