[React] fetch 인터넷 연결 끊켰을 때 오류방지

 

안녕하세요. 좋아요요정입니다!

이번에 맥북을 구매했어요 꺄~~ 🎉

지름이 곧 실력은 아닌걸 알면서도 참을 수 없는 장비욕심..ㅎㅎ

회사와 집을 하나의 작업환경으로 연동했다는 목적에 상당한 만족감을 가지고 있습니다.

(맥북 너무 좋아요 ㅎㅎㅎ)

 

랜선을 연결할 허브가 아직 도착하지 않아서.. 와이파이를 잡아 리엑트로 프로젝트를 진행하던 중 문제를 발견했습니다.

오프라인상태가 되면 fetch가 전부 실행되며 생기는 에러, 반환되는 값이 없어서 생기는 대에러 폭탄💩!!

 

수정 전 코드

- api.js

class Api {
    async run(requestData, url){
        const formdata = new FormData();
        for(const key in requestData){ formdata.append(key, requestData[key]); }
        const result = await fetch(
            process.env.REACT_APP_API_URL+url,
            {
                method: 'POST',
                body: formdata,
            }
        );
        return result.json();
    }
}

export default Api;

- 사용하는 부분

//상위 컴포넌트  action에서 api생성
const api = new Api();

const Action = () => {
	//코드
	return (
		<Component api={api} />
	)
}

const Component = ({api}) => {

	return (
		//코드
		const loadData = async () => {
			//코드
			const listRes = await api.run(requestData, "url");
			if(listRes.result==='fail'){
	      switch (listRes.msg) {
	        case 'wrong_connect':
	          message.error('잘못된 접근입니다.', 3);
	          return;          
	        case 'query_error':
	          message.error('전산팀으로 문의주세요.', 3);
	          return;          
	      }      
	    }
			//불러온 데이터 setState 진행 
		}
		useEffect(()=>{ loadData() }, []);
	)
}

문제

• 사용되는 컴포넌트마다 action에서 새로운 Api 클래스를 생성한 뒤 사용되는 컴포넌트로 내려주고 연결해 사용하고 있었음
• error를 캐치하는 부분이 없었고 전부 반환됨. 없는 데이터로 setState가 실행되고 있음
• 오프라인 상태에서도 접근이 되었고, 사용되는 부분 전부가 새로운 클래스를 생성>서버로 데이터 전달>오류 반환 되는 현상을 보임
• 사용되는 모든 부분에서 동일한 에러메시지코드를 반복적으로 사용하고 있었음

 

 

 

..?!

프로젝트 내의 fetch를 모두 수정하기엔 일이 커지니 인터넷이 끊기면 로그인창으로 보내자는 말에 잠시 이성을 잃었었다..

 

 

수정한 코드✨✨

• connectApi
  • 역할: api연결 시 데이터와 url을 받아서 반환값을 리턴
    • 온라인: api연결.
      api연결 후 실패가 반환되었을 때 실패메세지가 메세지리스트에 입력되어있는 경우 메세지를 출력시킴 메세지리스트에 없는 경우 반환값 리턴
    • 오프라인: 인터넷에 연결되어 있지 않다는 문구를 출력하고 fail을 반환. (api연결하지 않음) 이때 여러 군데에서 api가 연결되어 메세지가 많이 뜨는 것을 방지해 counter를 이용해 1개만 출력되도록 작성
  • 입력: requestData, url
  • 출력: listRes 

class ConnectApi {
  constructor() {
    //fail시 반환되는 메세지리스트 [listRes.msg]
    this.errorMessage = { 
      'query_error': '***로 문의주세요.',
      'wrong_connect': '잘못된 접근입니다.',
      'wrong_user_info': '틀린 회원정보입니다. 회원정보를 확인해주세요.',
      'is_offline': '인터넷에 연결되어 있지 않습니다.'
    }
    this.counter = 0
  }

  //[run] 
  // - 네트워크 연결상태 확인 후 offline일 시 fail 리턴
  // - this.counter가 0인경우 메세지 출력, counter++;
  async run(requestData, url){
    const isOnline = navigator.onLine;
    if(!isOnline) {
      if(this.counter == 0 ) {
        window.alert(this.errorMessage['is_offline']);
        this.counter ++;
      }
      const listRes = { result:'fail' }
      return listRes;
    }
    else if(isOnline) {
      if(this.counter !== 0) {this.counter = 0;} //온라인시 0이 아니면 0으로 변경
      const formdata = new FormData();
      for(const key in requestData){ formdata.append(key, requestData[key]); }
      return fetch(
        process.env.REACT_APP_API_URL+url,
        {
            method: 'POST',
            body: formdata,
        }) //
        .then(response => response.json())
        .then(listRes => {
          if(listRes.result === 'fail' && this.errorMessage.hasOwnProperty(listRes.msg)) {
             window.alert(this.errorMessage[listRes.msg]);
            return listRes 
          }
          return listRes
        })
        .catch(error => console.log(error));
    }
  }
}
export default ConnectApi;

• 사용하는 부분
  • index.js에 클래스를 생성해 props로 전달해서 내려줌으로써 여러개의 오브젝트가 생성됨을 방지
  • api가 성공할 시 setState를 실행함으로써 fail이 반환되었을 때 오류가 뜨는 것을 방지함

const Component = ({connect}) => {

	return (
		//코드
		const loadData = async () => {
			//코드
			await connect.run(requestPostData, '/support/support_user__hide')
				.then((listRes) => {
		      if (listRes.result == 'success') {
		      //성골할 시 불러온 데이터 setState 진행 
		      }
		    }
			)
		}
		useEffect(()=>{ loadData() }, []);
	)
}

① 온라인 오프라인 상태 확인

const isOnline = navigator.onLine; 선언.

클라이언트단 온라인,오프라인 상태를 체크한 후 True, False값을 반환한다.

결과값에 따라 if else if문으로 경로를 다르게 해줬다.

 

② 오프라인인 경우 메세지 여러개 뜨는 동작 방지

페이지에서 api로 연결되는 함수가 여러개일 경우 동일한 에러메세지가 다중으로 출력되는 것을 막기 위해서 class에 counter = 0을 선언해주고, 에러메세지가 1번 출려이 되면 counter ++;을 해주었다. 그 다음 진행되는 함수에서는 counter가 0이 아니기 때문에 메세지가 출력되지 않고 넘어가도록 했다. 

그리고 온라인에 연결이 되었을 때  counter가 0이 아니면 0으로 변경해줬다.

 

③ 에러메세지 리스트 생성

매번 실행될 때마다 component에서 에러메세지 핸들링을 반복적으로 진행해주고 있었다. class에  errorMessage의 데이터를 가지고 있는 객체를 만들고 실패 시 반환되는 메세지를 확인해서 키값에 있을 경우 출력, 없을 경우 출력없이 반환해주도록 했다.

if(listRes.result === 'fail' && this.errorMessage.hasOwnProperty(listRes.msg)) 

 

 

 

 

 

오프라인 에러를 잡기 위해서 백엔드분이 작업한 코드를 수정해야했고(무례하게 비춰졌을수도 있다고 생각한다만 로그인창으로 보내자는 말에 터진 상태였음..), 반복되는 메세지를 잡기 위해서는 기존의 코드를 전부 체크해 수정해야하는 방안을 제시했다. 또한 어떤 식으로 핸들링할 것인가를 결정하기에 설득이 필요한 부분이었다. 다들 큰 프로젝트는 처음 진행하고 1~3년차이기 때문에 옳고 그르다, 순서에 대한 것, 답을 모두 정확하게 알지 못하니 의견을 조율하기가 쉽지가 않다.

api를 최상단에서 내리는 것과, 매번 선언하는 것도 초반에 선택하자 했었는데 어느 방식이 맞는가에 대한 명확한 답을 낼 수 없어서 편한 방식으로 진행했으나, 수정을 해야되는 상태가 되고야 말았다. 

더 많이 듣고 배우고 싶다. 

유연하게 소통하며 코딩 잘~~하고 싶다! 

 

 

혹시 잘못 사용했거나 부족한 부분이 있다면 꼭 댓글 부탁드립니다! 

오늘도 즐거운 코딩라이프되세요 그럼 이만 총총...