GitLab의 프론트엔드 개발에서 Sentry 모니터링

GitLab 프론트엔드 팀은 Sentry를 관측 도구로 사용하여 gitlab.com에서 사용자가 UI가 어떻게 작동하는지 모니터링합니다.

GitLab.com은 관리자 > 지표 및 프로파일링 > Sentry에서 우리의 Sentry 인스턴스에 보고하도록 구성되어 있습니다.

우리는 두 가지 종류의 데이터를 모니터링합니다: 오류 및 성능.

알림:
프론트엔드 관측 작업 그룹은 Sentry 사용 방법을 개선하려고 합니다. GitLab 팀원은
issue #427402에서 피드백을 제공할 수 있습니다.

Sentry 사용 시작하기

우리의 Sentry 인스턴스는 https://new-sentry.gitlab.net/에 위치해 있습니다.
오직 GitLab 팀원만 Sentry에 접근할 수 있습니다.

처음 로그인한 후 팀에 가입을 선택하여 #gitlab 팀에 가입할 수 있습니다.
팀 페이지에서 YOUR TEAMS 아래에 #gitlab이 표시되는지 확인하세요.

오류 보고

오류는 Sentry UI에서 “이벤트”로도 알려진, 사용자가 브라우저에서 경험하는 비정상적이거나 예상치 못한 실행 시간 동작의 사례입니다.

GitLab은 Sentry Browser SDK를 사용하여 오류를
우리의 Sentry 인스턴스에 보고하며, 프로젝트는
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시간 동안 canary 및 production에서 보고된 오류를 확인할 수 있습니다.

목록에서 오류를 선택하면 더 많은 세부 정보를 볼 수 있으며… 이상적으로는 해결책을 제안하세요!

알림:
우리는 환경 데이터에 스팸이 포함되어 있으므로 gprd 및 gprd-cny로 오류를 필터링할 것을 권장합니다.

오류 데이터 탐색

팀원은 Sentry의 Discover 페이지를 사용하여 예기치 않은 문제를 찾을 수 있습니다.

또한 우리는 가장 많은 오류를 발생시키는 기능 카테고리와 페이지를 보고하기 위해 대시보드를 만들었습니다.

엔지니어링 팀원은 오류 데이터를 탐색하고 사용자 인터페이스에서 오류를 줄이는 방법을 찾도록 권장됩니다.
Sentry는 오류가 발생할 때 알림을 받기를 원하는 분들을 위해 알림도 제공합니다.

오류 필터링

우리는 하루에 수천 건의 보고서를 받기 때문에 팀원들은 자신의 작업 영역에 따라 오류를 필터링할 수 있습니다.

우리는 오류의 출처를 식별하는 데 도움이 되도록 두 개의 추가 사용자 지정 tags로 오류를 표시합니다:

feature_category: 페이지의 기능 영역입니다. (예: code_review_workflow 또는 continuous_integration.) 출처: gon.feature_category
page: 페이지를 렌더링하기 위해 컨트롤러에서 호출된 메서드의 식별자입니다. (예: projects:merge_requests:index 또는 projects:pipelines:index.) 출처: body_data_page.

프론트엔드 엔지니어링 팀원들은 자신의 그룹 및/또는 페이지와 관련된 오류를 필터링할 수 있습니다.

성능 모니터링

우리는 BrowserTracing를 사용하여 Sentry에 성능 지표를 보고합니다.

지난 24시간의 성능 데이터를 방문하고 필터를 사용하여 더 자세히 알아볼 수 있습니다.