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

GitLab 프론트엔드 팀은 사용자가 gitlab.com에서 UI의 성능을 모니터링하기 위해 Sentry를 관찰 도구로 사용합니다.

GitLab.com은 Admin > Metrics and profiling > Sentry에서 우리의 Sentry 인스턴스로 리포팅되도록 구성되어 있습니다.

우리는 에러와 성능 두 가지 종류의 데이터를 모니터링합니다.

참고: 프론트엔드 Observability Working Group은 Sentry 사용 방법을 개선하려고 합니다. GitLab 팀원들은 issue #427402에서 피드백을 제공할 수 있습니다.

Sentry 사용 시작

저희 Sentry 인스턴스는 https://new-sentry.gitlab.net/에 위치해 있습니다. Sentry에 접근할 수 있는 권한은 GitLab 팀 멤버에게만 있습니다.

첫 번째 로그인 후, 팀에 가입을 선택하여 #gitlab 팀에 가입할 수 있습니다. 팀 페이지에서 YOUR TEAMS 아래에 #gitlab이 나타나는지 확인해주세요.

에러 리포팅

Sentry UI에서 “events”로 알려진 에러는 사용자가 브라우저에서 경험하는 비정상적이거나 예기치 않은 런타임 동작의 인스턴스입니다.

GitLab은 에러를 우리의 Sentry 인스턴스로 리포팅하기 위해 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는 에러가 발생할 때 알림을 받고 싶어하는 사람들을 위해 알림을 제공합니다.

에러 필터링

하루에 수천 건의 리포트를 받기 때문에 팀 멤버들은 자신의 작업 영역에 기반하여 에러를 필터링할 수 있습니다.

에러를 식별하는 데 도움이 되도록 우리는 두 가지 추가적인 사용자 정의 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시간 동안의 성능 데이터를 방문하여 필터를 사용하여 자세히 알아보고 더 많은 정보를 학습할 수 있습니다.