Express 서버에서 React(프론트)로 Exception 전달하기
예외처리
프로그래밍 언어는 어떤 언어든 예외 처리와 관련한 try catch문 정도는 존재합니다. 그만큼 예외처리는 중요하다고 할 수 있습니다. 이와 관련하여 개발 과정 중 하나의 의문이 생겼습니다.
제가 받은 임무(?)는 백엔드의 즐겨찾기 기능을 담당하는 Controller와 Service를 개발 해라 였습니다. 그런데 조건이 에러 처리를 신경 써서 해달라 였습니다. (프론트 엔드를 맡고 있지만 인원이 부족하다 보니.. ㅎㅎ)
아무튼 여기서 문제가 하나 생깁니다. 서버 프로젝트와 클라이언트 프로젝트는 서로 다른 프로젝트입니다. api로 서로 데이터를 주고 받을 뿐 서버에서 발생한 에러는 서버에서 처리가 되어야 합니다. 그런데 제가 원하는 것은 서버에서 발생한 에러를 프론트까지 던져 주고 싶고 프론트에서 에러처리를 하고 싶은 것입니다.
status(XXX).send(message)
서버측에서 API 작업을 할 때 예외가 발생하면 response.send(400번대).send(오류 메세지); 로 응답을 전송하면 프론트에서는 에러로 인식하게 됩니다. 간단한 예시코드를 작성해 보겠습니다.
서버 측 코드
const SQLExecuteController = (statement: string) => { try{ // 작업처리 response.send('정상처리'); } catch(error: any){ response.status(401).send('실패'); } }
서버측에서 예외가 발생하면 catch문에서 status 401로 에러 메세지를 전달하게 됩니다.
클라이언트 측 코드
const RunSQLAPI = (statement: string) => { try{ // 정상 작업 } catch(error: any){ setAlert(true); setAlertMessage(message); } }
클라이언트 측에서는 이제 에러가 발생한 response를 catch문에서 잡을 수 있게 됩니다. 한 눈에 봐도 이게 맞나..? 라는 생각이 듭니다. http 에러 코드를 개발자가 직접 판단해서 지정해 주는 것이 좋아 보이진 않습니다. 거기다가 status로 전달해주면 response 객체 구조가 복잡해져서 message를 추출해 내려면 속성을 3단계나 타고 들어가야 했습니다. 일단 이 방법은 보류 하겠습니다.
개발자 지정
이번에는 그냥 저희가 직접 구조를 지정하겠습니다. 성공하면 result 속성을 true로 가지는 객체를 send 할 것이고 예외가 발생하면 result 속성이 false인 객체를 send 하겠습니다.
그러니까 전달하는 데이터 구조는 다음과 같습니다.
export interface SQLResponse{
result: boolean;
data?: string; // 성공했을 때
message?: string; // 실패했을 때 예외 메세지
}
이제 서버측 코드는 다음과 같이 될 것입니다.
const SQLExecuteController = (statement: string) => {
try{
// 작업처리
response.send({result: true, data: 'success'});
}
catch(error: any){
response.send({result: false, message: 'fail'});
}
}
클라이언트 측은 다음과 같습니다.
const RunSQLAPI = (statement: string) => {
try{
// 정상 작업
}
catch(error: any){
// 이제 catch문에서는 실제 HTTP에서 발생한 에러만 잡힘.
}
}
이제 서버에서 예외가 발생해도 정상적으로 response를 send하기 때문에 try문에서 모두 처리됩니다. catch문에서는 HTTP에서 발생한 (흔히 400번대 에러들) 에러들을 처리하면 됩니다.
express 너..
express가 예외처리가 쉽지 않다는 이야기를 한 개발자 커뮤니티에서 본 것이 기억나는데 이번에 조금 느끼고 있습니다. 사실 지금 진행하는 프로젝트가 막 복잡하지는 않아서 쉽게 처리 가능하지만 프로젝트가 복잡해지고 처리할 예외가 많아지면 힘들겠다라는 생각이 듭니다.
https://krpeppermint100.medium.com/ts-nodejs-express%EC%9D%98-%EC%9A%94%EC%B2%AD-%EC%9D%91%EB%8B%B5-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81-8943ab7bd13b
예외처리에 관해 정리를 엄청 세세하게 해주셨습니다. 많이 참고해서 배웠습니다.
Author And Source
이 문제에 관하여(Express 서버에서 React(프론트)로 Exception 전달하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@0709/Express-서버에서-React프론트로-Exception-전달하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)