JavaScript/React/例外処理/ErrorBoundaryで捕捉されないエラーの変更点

追加された行はこの色です。
削除された行はこの色です。
JavaScript/React/例外処理/ErrorBoundaryで捕捉されないエラーへ行く。
JavaScript/React/例外処理/ErrorBoundaryで捕捉されないエラーの差分を削除

#author("2023-02-28T11:27:14+09:00","default:ryuichi","ryuichi")
#author("2023-02-28T11:28:31+09:00","default:ryuichi","ryuichi")
* Error Boundaryで捕捉されないエラー [#l0b258aa]

** Error Boundaryの例 [#w63a8699]
 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;
   }
 }

*** 参考 [#kec3e87a]
https://ja.reactjs.org/docs/error-boundaries.html

** Error Boundaryで捕捉されないエラー [#c1d74d22]

 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と表示される

** 補足されないエラーに対するエラー処理 [#ff855cbf]
  const [hasError, setHasError] = useState(false);

 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>;
   }
 
  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>;
  }
 （略）
 }

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