componentDidCatch(error,info)

componentDidCatch(error,info)는 자기자신에게 문제가 있을때는 캐치가 되지 않는다.

이 때문에 에러바운더리 라이브러리를 설치후 그 하위에 서비스 컴퍼넌트에서 확인시 사용하는 경우가 많다

  <div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
//component 에러캐치
class App extends React.Component{
  state = {
    hasError:false
  };
  render(){
    if(this.state.hasError){
      return <div>예상치 못한 에러 발생 </div>
    }
    return (<webService />);
  }
  componentDidCatch(error,info){
    this.setState({hasError:true});
  }
}

ReactDOM.render(<App name ="MARK" />,document.querySelector("#root"));
</script>

 

https://ko.reactjs.org/docs/error-boundaries.html#gatsby-focus-wrapper