[Sentry] 프론트엔드 에러 추적하기

 

앞서...

우리 개발자들은 개발도 중요하지만, 버그 처리 또한 중요하다.
버그는 서비스 매출 하락, 신뢰를 잃는 등 크리티컬 한 문제와 엮여 있다. 버그의 원인을 파악하기 전까지는, BE / FE 중 어디에서 발생한 이슈인지 파악이 어렵다. 아무리 QA를 마치고 배포되었다고 해도 예상치 못한 원인의  버그를 마주 할 수 있다. 또한 간헐적으로 발생하는 버그로 사용자들이 버그제보를 해주지 않았고, 개발진들이 프론트 로깅을 하지 않았다면, 버그 유무의 정보를 영영 얻을 수 없게 될 것이다.

 

프론트엔드 오류

프론트엔드에서는 데이터오류, 화면오류, 네트워크 이슈, 크로스 브라우징, OS 업데이트 등의 오류가 있을 수 있다.
데이터, 화면 같은 경우에는 대부분 QA나 스테이징 환경에서도 충분히 재현된다. 
하지만 크로스 브라우징, OS 업데이트에 따른 오류는 재현하기 힘들기 때문에 QA 과정에서 검증하기는 불가능에 가깝다.
예를들면 크롬의 쿠키 정책이 변경되었다던지, 크롬 혹은 사파리 특정 버전에서 버그가 있다던지 하는 점들에서 말이다.

프론트엔드에서 오류는 개발자 콘솔을 확인하거나, 동일 조건으로 재현하는 등 원인을 파악 할 수 있지만, 이를 사용자들에게 개발자도구를 열어서 오류를 알려달라고 할 수는 없을 것이다.
클라이언트에서 발생하는 오류를 트래킹 할 수 있다면 원인을 빠르게 파악하여 대응 할 수 있을 것이다.

 

Sentry

프론트엔드 모니터링 툴은 여러가지가 존재하지만, 저는 Sentry 에 대해 알아보려고 한다.

Sentry configure Scope 로 사용자 정보를 전송한다.

import * as Sentry from '@sentry/react'

Sentry.configureScope((scope) => {
	scope.setUser({
		id: test
		email: test@test.com
	})
    
    scope.setTag({
		webviewType: 'WEB'
	})
})

 

withScope 로 해당 에러의 상세정보를 전송한다.

• setTag 키와 값으로 이루어진 문자열, 인덱싱 되는 요소로 이슈 검색 및 트래킹을 신속하게 처리 할 수 있다.
• setLevel은 중요도를 설정 할 수 있다. ( fatal, error, warning, log, info, debug, critical ) 로 설정이 가능하다.

Sentry.withScope((scope) => {
	scope.setTag('type' , 'api')
	scope.setLevel(Sentry.Severity.Error)
    
    Sentry.captureException(
		new Error('API Server Error'))
})

 

setContext 로 추가 정보를 전송한다.

• axios error 를 통해 발생한 호출 url, 호출 파라미터, 데이터 등 정보를 로깅한다. ( reqeust , response )

// axios error
const { method, url, params, data, headers } = error.config
const { data, status } = error.response

Sentry.setContext('API request Detail', {
	method,
    url,
    parameter,
    data,
    header
})

Sentry.setContext('API response Detail', {
	status,
    data
})

위와 같이 쌓은 데이터들을 추적하고 분석하는데 사용 할 수 있으며, 알람을 받기 위한 조건으로 사용 할 수도 있다.
이러한 데이터로 장애를 탐지한다면, 빠르게 분석해 사용자 경험을 개선할 수 있을 것이다.

 

에러 추적시 얻을 수 있는 것들..

• 브라우저 버전 문제, 빌드 설정과 같은 문제로 발생한 예상하지 못한 에러를 발견하여 사용자 경험 개선
• 장애 탐지 및 원인 파악, 해결까지 걸리는 시간 감소
• 사용자 환경을 임의로 재현하지 않아도 에러 원인을 파악하고 이전보다 정확하게 안내가 가능

 

프론트엔드 개발자로서, 사용자 경험을 높이기 위해 한 발 더 끊임없이 나아가야겠다.

 

 

참고자료

Sentry를 이용한 에러 추적기, React의 선언적 에러 처리