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

GitLab 프론트엔드 팀이 Sentry를 사용하여 UI 성능과 오류를 모니터링하는 방법을 설명합니다.

GitLab 프론트엔드 팀은 gitlab.com 사용자들의 UI 성능을 모니터링하기 위해 Sentry를 관측 도구로 사용합니다. GitLab.com은 관리자 > 메트릭 및 프로파일링 > Sentry 에서 당사의 Sentry 인스턴스에 보고하도록 구성되어 있습니다. 모니터링하는 데이터는 오류 와 성능 , 두 가지입니다. Frontend Observability Working Group 은 Sentry 활용 방식을 개선하기 위해 노력하고 있습니다. GitLab 팀원은 이슈 #427402 에서 피드백을 제공할 수 있습니다. Sentry 사용 시작하기 # 당사의 Sentry 인스턴스는 https://new-sentry.gitlab.net/ 에 있습니다. Sentry에는 GitLab 팀원만 접근할 수 있습니다. 첫 로그인 후 팀 참여 를 선택하여 #gitlab 팀에 합류할 수 있습니다. 팀 페이지 의 YOUR TEAMS 아래에 #gitlab 이 표시되는지 확인하세요. 오류 보고 # 오류는 Sentry UI에서 “이벤트”라고도 불리며, 사용자가 브라우저에서 경험하는 비정상적이거나 예상치 못한 런타임 동작의 인스턴스입니다. GitLab은 Sentry Browser SDK 를 사용하여 프로젝트 gitlabcom-clientside 의 당사 Sentry 인스턴스에 오류를 보고합니다. 알려진 오류 보고 # Sentry에 오류를 보고하는 가장 일반적인 방법은 captureException(error) 를 호출하는 것입니다. 예시: import * as Sentry from '~/sentry/sentry_browser_wrapper'; try { // Code that may fail in runtime } catch (error) { Sentry.captureException(error) } 언제 오류를 보고해야 하나요? 신경 쓰지 않아도 되거나 제어할 수 없는 오류는 보고하지 않는 것이 좋습니다. 예를 들어, 사용자가 양식을 잘못 작성했을 때 발생하는 유효성 검사 오류는 보고하지 않아야 합니다. 그러나 서버 오류로 인해 양식 제출이 실패하는 경우, 이는 Sentry에 알려야 하는 오류입니다. 기본적으로 로컬 개발 인스턴스에는 Sentry가 구성되어 있지 않습니다. Sentry 호출은 스텁 처리되어 디버깅을 위해 [Sentry stub] 접두사와 함께 콘솔에 표시됩니다. 처리되지 않은/알 수 없는 오류 # 또한, 모든 페이지에서 처리되지 않은 오류를 자동으로 캡처합니다. 오류 모니터링 # 오류가 캡처되면 Sentry에 나타납니다. 예를 들어 카나리 및 프로덕션 환경에서 지난 24시간 동안 보고된 오류 를 확인할 수 있습니다. 목록에서 아무 오류나 선택하면 더 자세한 내용을 볼 수 있으며… 가능하다면 해결 방법을 제안해 보세요! 환경 데이터에 스팸이 일부 포함되어 있으므로, gprd 및 gprd-cny 환경으로 오류를 필터링하는 것을 권장합니다. 오류 데이터 탐색 # 팀원은 Sentry의 Discover 페이지 를 사용하여 예상치 못한 문제를 찾을 수 있습니