우연한 기회에 sentry를 접하게 되어 글을 정리하고자 한다. 이 글에 대한 내용은 더 추가될 예정이며, 글이 길어질 경우에 나눠서 글을 쓰고자 한다. 글을 접했을 때는 내가 웹 사이트를 배포하고 아무것도 모르는 상태에서 사용자가 늘어나고, 그에 대해 오류가 일어났었다. 그런데 스타트업의 특성상 사수가 없다보니 물어볼 사람이 없어서 혼자 삽질을 엄청했다… 그래서 배포를 할 때 너무 무서웠고, 곧 react 배포할 때 똑같은 상황을 겪지 않기 위해 열심히 공부중이다.
프론트엔드 모니터링
프론트엔드 모니터링은 웹 사이트 또는 앱의 성능을 추적하는 데 사용되는 일련의 프로세스 및 도구를 말한다. 프론트엔드 모니터링은 주로 사용자가 최종적으로 보는 부분에 중점을 둔다. 아래와 같은 문제를 모니터링에서 기준으로 본다.
- 느린 렌더링
- 일관되지 않거나 응답하지 않는 사용자 경험
- 네트워크 요청/API 오류
- 프레임워크 관련 문제
프론트엔드 모니터링의 중요성
웹 사이트가 더욱 강력해지고 복잡해짐에 따라 성능 유지 관리가 점점 더 어려워지고 있다.
프론트엔드 성능은 사용자 경험의 일부이다. 사이트가 중단되거나 오류가 발생한다면 웹사이트의 신뢰와 신뢰성이 상실된다. 따라서 프론트엔드 모니터링은 견고한 웹 사이트와 앱을 개발하는 데 필수이다.
1. sentry 시작하기
처음에 sentry를 들어가게 되면, 회원가입을 해야 한다. 여러 사이트들에서 친절하게 어떻게 해야 하는지 알려주기에 어려움없이 따라갈 수 있다. 그리고 나서 내가 어떠한 언어를 사용하여 모니터링할 것인지 선택한다.
내 경우에는 react를 가지고 모니터링할 것이기에 react를 선택해준다.
2. SDK 등록하기
해당 언어를 선택하고 나서 SDK를 등록해야 하는데 아래와 같은 코드를 index.js에 입력해준다.
import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
import App from "./App";
Sentry.init({
dsn: "자신의 SDK넣기",
integrations: [new BrowserTracing()],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
});
ReactDOM.render(<App />, document.getElementById("root"));
// Can also use with React Concurrent Mode
// ReactDOM.createRoot(document.getElementById('root')).render(<App />);
3. react에서 sentry구성하기
위와 같이 settings를 누르면 projects메뉴가 나온다. 여기에 내가 설정한 언어로 한 프로젝트를 클릭하면 아래와 같이 error가 뜬 것을 확인할 수 있다. 그전에 DSN메뉴를 들어가서 KEY를 복사해서 위의 코드에 넣는 부분에 넣어주고 실행시키면 아래와 같은 화면이 뜨게 된다.
이게 뜬다는 것은 연동이 됐다는 것을 의미한다. 그리고 모니터링이 활성화되게 된다. 이보다 많은 기능이 있으니 활용해보면 좋을 듯하다.
참조
https://velog.io/@surim014/frontend-monitoring-with-sentry-and-react
https://node-js.tistory.com/33 → 노드로 sentry사용하는 사이트
