[항해 14기] 개발일지 49 (실전프로젝트 - Sentry, 면접 스터디 발제)

실전프로젝트 - 2주차

 

1. 회의 내역(BE 안건)

1) 특정 요청 cors 이슈

- 다른 요청 잘되는데 키워드 검색 시 cors

2) 회원가입 리마인드
- 점주 회원가입 예외처리 채우기
3) 점주 가입 방식

- 피그마 대로 간단하게 가입

- 가입 시 업장 관리 수정하기로 페이지 이동
- 해당 값들 디폴트 설정 없이 BE에서 allow true로 진행

4) 업장 크롤링
- 연구 필요

 

 

2. 작업 내역

1) FE-BE 배포 연결

 

2) ERD/DB 수정

- 프로젝트가 진행되며 생긴 변경사항들 반영

- sequelize migration reference : (https://crispypotato.tistory.com/156)

 

3) Sentry 세팅

(1) 회원 가입 후 프로젝트 생성

- 세팅/Client Keys(DSN)/env 세팅

(2)

npm install --save @sentry/node

const Sentry = require("@sentry/node")

Sentry.init({
  dsn: "가져올 dsn 주소, 환경변수 세팅 추천",
  integrations: [ //생략 시 HTTP, console, 전역에러, try/catch 디폴트
    // enable HTTP calls tracing
    new Sentry.Integrations.Http({ tracing: true }),
    // enable Express.js middleware tracing
    new Sentry.Integrations.Express({ app }),
    // Automatically instrument Node.js libraries and frameworks
    ...Sentry.autoDiscoverNodePerformanceMonitoringIntegrations(),
  ],

  // 트랜잭션 100% 캡쳐 세팅
  tracesSampleRate: 1.0,
});

// 에러 파악용
// transactions/spans/breadcrumbs are isolated across requests
app.use(Sentry.Handlers.requestHandler());
// 성능 모니터링용
app.use(Sentry.Handlers.tracingHandler());

// All controllers should live here
app.get("/", function rootHandler(req, res) {
  res.end("Hello world!");
});

// 에러 핸들러 등록, 다른 미들웨어보다 앞에 있어야 하며, 컨트롤러 앞에 사용
app.use(Sentry.Handlers.errorHandler());

// 선택적 에러 핸들러
app.use(function onError(err, req, res, next) {
  // The error id is attached to `res.sentry` to be returned
  // and optionally displayed to the user for support.
  res.statusCode = 500;
  res.end(res.sentry + "\n");
});

(3) 특정 에러에 대한 커스텀

app.use(
  Sentry.Handlers.errorHandler({
    shouldHandleError(error) {
      // error status 404, 500 번만 error로 판단
      if (error.status === 404 || error.status === 500) {
        return true;
      }
      return false;
    },
  })
);

(4) 미들웨어 에러 핸들러 세팅 예시

const Sentry = require("@sentry/node");

module.exports = (error, req, res, defaultMessage) => {
  console.error(
    `에러로그 ${error.errorCode} ${req.method} ${req.originalUrl} : ${error.message}`
  );
  console.error(error);
  return Sentry.Handlers.errorHandler({
    shouldHandleError(error) {
      if (
        error.errorCode === 403 ||
        error.errorCode === 404 ||
        error.errorCode === 500
      ) {
        return true;
      }
      return false;
    },
  })(error, req, res, () => {
    if (!error.errorCode) {
      return res.status(500).json({ errorMessage: defaultMessage });
    } else {
      return res.status(error.errorCode).json({ errorMessage: error.message });
    }
  });
};

(5) 이후 원하는 미들웨어/에러핸들러 세팅

- 잘 들어오는지 확인

 

 

 

3. 면접 스터디

1) 주제 선정

- 후보 : CS, 알고리즘/자료구조, 면접 대비

- 처음에 CS가 선정 되었고, 정보처리기사 필기도 준비할겸 정보처리기사 책으로 진행하려 하였으나 올해 시험접수가 힘든 상황

- 면접 대비 스터디로 노선을 바꾸었고, 정보처리기사는 항해 수료 이후 스터디 진행하기로 변경

 

2) 개요

- 레퍼런스 사이트에서 순서대로 주제를 정해서 발표(https://github.com/JaeYeopHan/Interview_Question_for_Beginner)

- 발표 내용에 대한 Q&A 및 토론 진행 후 정리하여 문서화

- 발표는 차주부터 주2회로 진행

 

 

 

4. 트러블슈팅/회고

1) cors 이슈

- 다른 기능은 연결이 잘 되었는데 키워드 검색할때만 cors가 발생

- 원인 예측 : FE에 요청하는 데이터와 BE에서 보내는 데이터 양식이 달라서(위스키 이름만 받아오려 했는데 BE에서 상세 정보의 모든 컬럼값들을 보내주는 상태) 발생한 것으로 예측

- 해결 : 데이터 양식을 FE/BE 양쪽을 맞춰준 뒤 재배포 하니까 해결됨

 

2) Sentry

- 그동안 팀원들의 에러를 화면공유/라이브쉐어 등을 통하여만 공유 받았었는데(pm2 log의 경우 배포환경에서의 에러 및 키페어 소유자만 확인 가능), sentry를 사용하여 각자의 화면에서 팀원들의 에러로그 모니터링이 가능해져서 협업 효율이 증가