React: unstable_handleError only seems to work on initial render

Created on 24 Mar 2017  路  2Comments  路  Source: facebook/react

With a component that has the error boundary unstable_handleError in it, unstable_handleError only seems to be invoked if an error occurs on the initial render, not on subsequent renders.

For example, in the following code, visible at (https://codepen.io/stangogh/pen/ZeRVwR), when the TriggerError component is rendered initially, it recovers and renders the Error component:

const TriggerError = () => { return 5 / b }

class InnerContainer extends React.Component {
  constructor(props) {
    super(props)

    this.state = {}
  }

  unstable_handleError(e) {
    console.log("unstable_handleError")
    console.log("continuing")

    this.setState({error: true})
  }

  render() {
    if (this.state.error) {
      return <div>Error!</div>
    }

    return <TriggerError />

    return <h1>Hello world</h1>
  }
}

ReactDOM.render(
  React.createElement(InnerContainer),
  document.getElementById('root')
)

However, if the TriggerError component is rendered after a delay, unstable_handleError never gets invoked and the component never recovers (https://codepen.io/stangogh/pen/RpJYqP):

const TriggerError = () => { return 5 / b }

class InnerContainer extends React.Component {
  constructor(props) {
    super(props)

    this.state = {}
  }

  componentWillMount() {
    setTimeout(() => {
      this.setState({triggerError: true})
    }, 1000)
  }

  unstable_handleError(e) {
    console.log("unstable_handleError")
    console.log("continuing")

    this.setState({error: true})
  }

  render() {
    if (this.state.error) {
      return <div>Error!</div>
    }

    if (this.state.triggerError) {
      return <TriggerError />
    }

    return <h1>Hello world</h1>
  }
}

ReactDOM.render(
  React.createElement(InnerContainer),
  document.getElementById('root')
)

Most helpful comment

Yep, that's why it's unstable. 馃槈
Please try the latest React 16 alpha for a more complete implementation.

All 2 comments

Yep, that's why it's unstable. 馃槈
Please try the latest React 16 alpha for a more complete implementation.

@gaearon Is there a possible way to handle error boundries without upgrading to React 16?

Was this page helpful?
0 / 5 - 0 ratings