reactjs - エラー境界コンポーネントはエラーをキャッチしますが、すぐに消えます

Question

エラー境界コンポーネントでラップされた、意図的にエラーをスローするコンポーネントがあります。

エラーをキャッチしてメッセージを表示しますが、ほんの一瞬です。

これは私のラップされたコンポーネントです

  useEffect(() => {   
        error(); 
    }, []);

    const error = () => {
        try {
            return [].replace(/'--'/, '')
        } catch (error) {
           throw(error)
            
        }
    }

と私のエラー境界コンポーネント

class ErrorBoundary extends Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError(error) {
        console.log('derived', error)
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
  
    componentDidCatch(error, errorInfo) {
        console.log('error did catch', error)
      this.setState({ hasError: true})
    }
  
    render() {
      if (this.state.hasError) {
        return (
            <h1>Something went wrong.</h1>
        );
      }
  
      return this.props.children; 
    }
  }

次に、コンポーネントを次のように宣言しています

<ErrorBoundary>
   <ProfileContainer />
</ErrorBoundary>

私のコンポーネントが読み込まれると、エラーがキャッチされ、境界コンポーネントで受信されます。エラーメッセージが表示されますが、すぐにクラッシュします

これを間違った方法で処理していますか? エラー境界がDOMエラー用であることは知っていますが、エラーをキャッチしていることは興味深いです。

どんな助けでも大歓迎です