동행큐브
729
2021-01-07 13:18:19
0
109

리액트에서 error boundary 처리 관련 질문있습니다.


현재 error boundary를 사용해 modal 창을 띄우려고 합니다. 일단 코드와 구조부터 보여드리겠습니다.


const axiosLib = (config, succHandler, errHandler) => {
  axios(config)
    .then(response => {
      console.log(response.data.data);
      succHandler(response.data);
    })
    .catch(error => {
      if(errHandler !== undefined) {
          errHandler(error);
      }
      const msg = error.response ? error.response.data.msg : 'axios에서 오류가 발생했습니다. '
      throw Error(msg);

    })
}

export default axiosLib;

axiosLib입니다. JSX 요소는 리턴하지 않고 서버에서 받아온 데이터만 succHandler로 처리해주고 에러 발생 시 errHandler를 따로 받지 않으면 throw Error로 에러를 발생시켜 error boundary에 전달합니다.


import React, {useEffect} from "react";
import axiosLib from "./axiosLib";

const test = () => {

  useEffect(() => {
    // error boundary 호출됨
    // throw new Error('오류발생');


    const config = {
      url:'/users',
      method:'get'
    }

    // error boundary 호출 안됨
    axiosLib(config, (data) => {
      console.log(data);
    })
  }, [])

  return (
    <div>
      Hello world!
    </div>
  )
}
export default test;

test 컴포넌트는 제가 임의로 만든 컴포넌트입니다. 

컴포넌트 자체에 throw new Error()로 modal창 띄우는 것까지는 성공했습니다. 다만 코드 재사용성을 위해 자주 사용되는 공통 함수를 따로 파일에 모아두고 사용하고 있습니다. 위 코드같은 경우에는 axiosLib를 호출해 axiosLib에서 errHandler를 따로 받지 않으면 error boundary로 처리하게끔 하고 있습니다만 error boundary가 호출이 안되네요. 오류가 발생 시 개발자 도구 콘솔에 출력되는 스택 트레이스는 하위에 test.js는 보이지 않습니다. 각 컴포넌트에서 throw new Error로 에러처리 함수를 전달해주어야 하나요?

test 컴포넌트는 error boundary 컴포넌트 하위로 들어간거 확인 했습니다. 

0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.