我正在学习如何使用componentDidCatch()。它看起来直截了当。它可以工作,但是仍然可以在视图上显示完整的错误堆栈。
componentDidCatch()
在单独的文件中:
import React, { Component } from 'react' class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false } } componentDidCatch(error, info) { console.log("Catching an error") // this is never logged this.setState(state => ({...state, hasError: true })) } render() { if (this.state.hasError) { return <div>Sorry, an error occurred</div> } return this.props.children } } export default ErrorBoundary ... import React, { Component } from 'react' class Foo extends Component { render() { return this.props.a.b; // So this should cause the error } } export default Foo ... import React, { Component } from 'react' // Imported Foo and ErrorBoundary class Home extends Component { render() { return <ErrorBoundary><Foo /></ErrorBoundary> } } export default Home
在页面刷新时,Sorry, an error occurred从字面上看,我需要等待一秒钟,然后向用户显示完整的错误堆栈。这是Create React App的问题吗?我正在使用React 16。
Sorry, an error occurred
根据github上的 这个 问题,
在页面刷新上,我看到很抱歉,从字面上看,发生了一秒钟的错误,然后向用户显示了完整的错误堆栈。
@DanAbramov明确指出
这是故意的。意外错误仍然是错误。(我们不建议对预期的错误或控制流使用错误边界。) 错误边界主要对生产有用,但是在开发中,我们希望使错误尽可能地可见。
这是故意的。意外错误仍然是错误。(我们不建议对预期的错误或控制流使用错误边界。)
错误边界主要对生产有用,但是在开发中,我们希望使错误尽可能地可见。
另外可见的错误只是一个覆盖,您的ErrorBoundary消息被隐藏在错误覆盖的后面
ErrorBoundary
要检查错误是否确实存在,您可以检查元素并从DOM中删除覆盖,您将能够看到错误消息
检查此CodeSandbox: