我正在学习如何使用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。
根据github上的this问题,
在页面刷新时,我看到抱歉,发生错误,字面上,然后是一秒钟,然后显示给用户的完整错误堆栈。
@DanAbramov明确表示
这是故意的。意外错误仍然是错误。 (我们不建议对预期的错误或控制流使用错误边界。)
错误边界主要用于生产,但在开发中,我们希望尽可能高度地显示错误。
此外,可见错误只是一个叠加层,您的ErrorBoundary
消息隐藏在错误叠加层后面
要检查错误是否确实存在,您可以检查元素并从DOM中删除叠加层,您将能够看到错误消息
检查这个CodeSandbox:
正如文件所说
错误边界是React组件,它们在其子组件树中的任何位置捕获JavaScript错误,记录这些错误,并显示回退UI而不是崩溃的组件树。错误边界在渲染期间,生命周期方法以及它们下面的整个树的构造函数中捕获错误。
即使你使用componentDidCatch
时,也会记录错误
结帐这个codepin