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

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

非常感谢任何帮助

Answer 1

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

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

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

error boundary component catches error but disappears straight away

try-catch

reactjs

react-error-boundary