错误边界组件捕获错误但立即消失

如何解决错误边界组件捕获错误但立即消失

我有一个故意抛出错误的组件，包裹在错误边界组件中。

它捕获错误并显示消息，但只显示一瞬间。

这是我封装的组件

  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 错误的，但有趣的是它正在捕获错误。

非常感谢任何帮助

解决方法

这是故意的。错误边界主要用于生产，但在开发中，React 希望使错误尽可能高度可见（因此无论如何都会出现堆栈跟踪）。

在生产模式下，您的网站将仅显示错误边界 UI。