Error Boundaryで捕捉されないエラー

Error Boundaryの例

 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
   }
 
   static getDerivedStateFromError() {
     return { hasError: true };
   }
 
   componentDidCatch(error, errorInfo) {
     console.log(error, errorInfo);
   }
 
   render() {
     if (this.state.hasError) {
       return <div>Error</div>;
     }
 
     return this.props.children;
   }
 }

参考

https://ja.reactjs.org/docs/error-boundaries.html

Error Boundaryで捕捉されないエラー

 const Component = () => {
   setTimeout(() => {                  # (1)
     throw new Error('Timeout');
   }, 3000);
 
   const handleClick = () => {         # (2)
     throw new Error('Clicked');
   };
 
   // throw new Error('Error');        # (3)
 
   return (
     <div>
       Component
       <br />
       <button onClick={handleClick}>Click</button>
     </div>
   );
 };
 
 const App = () => {
   return (
     <ErrorBoundary>
       <Component />
     </ErrorBoundary>
   );
 };

• Componentコンポーネントの中で、(1)のような非同期処理、(2)のようなイベントハンドラー処理はエラーが補足されない
• ちなみに、(3)のような処理は補足されて、画面にはErrorと表示される

補足されないエラーに対するエラー処理

 const Component = () => {
   const [hasError, setHasError] = useState(false);
  
   setTimeout(() => {
     try {
       throw new Error('Timeout');
     } catch (error) {
       console.log(error);
       setHasError(true);
     }
   }, 3000);
  
   const handleClick = () => {
     try {
       throw new Error('Clicked');
     } catch (error) {
       console.log(error);
       setHasError(true);
     }
   };
  
   if (hasError) {
     return <div>Error</div>;
   }
 
 （略）
 }

• 上のように自前でエラー処理を書く