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')
)
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?
Most helpful comment
Yep, that's why it's unstable. 馃槈
Please try the latest React 16 alpha for a more complete implementation.