小编典典

创建React应用程序不显示带有ErrorBoundary的错误消息

reactjs

我正在学习如何使用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。


阅读 268

收藏
2020-07-22

共1个答案

小编典典

根据github上的 这个 问题,

在页面刷新上,我看到很抱歉,从字面上看,发生了一秒钟的错误,然后向用户显示了完整的错误堆栈。

@DanAbramov明确指出

这是故意的。意外错误仍然是错误。(我们不建议对预期的错误或控制流使用错误边界。)

错误边界主要对生产有用,但是在开发中,我们希望使错误尽可能地可见。

另外可见的错误只是一个覆盖,您的ErrorBoundary消息被隐藏在错误覆盖的后面

要检查错误是否确实存在,您可以检查元素并从DOM中删除覆盖,您将能够看到错误消息

检查此CodeSandbox

2020-07-22