잠깐 👏 제목 거창하게 썼는데 정보 관련이 아니라 내가 알아본 것 위주로 내가 리마인딩하려고 하는 것

프론트엔드 에러 모니터링

프론트엔드에서 에러 관리하는 건 중요하다. 아니다. 에러는 어디나 중요한데, 오늘은 프론트엔드에서 에러 관리를 어떻게 할지!!! 알아보자 💡💡💡

프론트엔드의 에러 => 사용자가 직접적으로 느낀다.
에러 처리가 제대로 되어있지 않을 때 : 웹사이트가 생각대로 안 움직여서 사용자 이탈

그래서 프론트엔드는 에러 처리 빠릿빠릿하게 해줘야 한다.

뭔가 서버에서 파일이 커서 이거 엔티티에 저장 안 할 거예요!!!!!!!! 하면 -> 파일이 크대요 다른 파일 올려줘요 .... 라고 사용자한테 안내해줘야 한다. 아니면 영원히 멈춰있어서 사용자가 ? 🤷‍♀️ 뭐지 왜 안 돼? 하는 상황 발생. 사용자가 기분이 안 좋으면 3초만 밀려도 그냥 꺼버릴 것이다.

근데 이 에러를 잡는 건 너무 힘들다. 브라우저도 다 다를 거잖아 .... 😂😂

하지만 그래서 등장한 에러 모니터링 도구가 꽤~ 많다.

Sentry, Bugsnag, LogRocket, New Relic 같은 도구가 있다고 하는데,

오늘은 그 중에서도 Sentry를 소개해볼까 한다.

Sentry

Sentry는 실시간으로 에러를 추적하고, 바로바로 알려주는 도구다. 프론트엔드에서 일어나는 에러를 자동으로 잡아내고, 어떤 에러가 어디서 발생했는지 정확하게 알려줘서 개발자가 빠르게 문제를 해결할 수 있게 해준다!!!!!!
예를 들어, 버튼 클릭했을 때 발생한 오류나, API 호출 실패 같은 걸 실시간으로 모니터링 가능 🐞

Sentry 사이트 들어가서 깃허브로 회원 가입 진행하고 -> 해당 프로젝트에 맞는 기술 + 설정 몇 개 간단하게 체크하면 dsn이 나온다.

홈페이지에 진짜 자세하고, 아름답고, 예쁘게 나와있다.....
최근에 본 라이브러리 중에 제일 상호작용이 아름다움 .......

npm이나 yarn 으로 센트리 추가하는 것부터, 초기 세팅까지 초보자도 쉽게 적용할 수 있게 되어있다! 에러를 일부러 만드는 버튼 하나 만들고 테스트 해보는 것도 좋은 경험일 듯 💪

로그 데이터 수집

콘솔 로그, API 로그, 서버 로그, 클라이언트 로그 등 다양한 방식이 있다!

사실 이거저거 다 사용하는 입장에서 ... 개발할 때 테스트 하면서 로그 보고 알럿 띄워주는 경우가 많긴 한 것 같다. 이때는 알려줘야 좋겠다 -> 하면 바로바로 만드는 것도 방법이 될 수 있다. (아니면 진짜 높은 확률로 까먹음)

오늘의 정리 끝!