I am attempting to create a ‘fail whale’ page that pops up whenever the app crashes.
To do this I am attempting to use ‘error boundaries’ along with the new componentDidCatch lifecycle method. https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
I am having no success so far and no matter what, the error crashes the app.
Here is the reproduction code:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class InnerComponent extends Component {
render() {
throw new Error('why isn\'t this working')
return(
<View>
<Text>Why is this rendering?</Text>
</View>
)
}
}
class ErrorBoundary extends Component {
constructor(props) {
super(props)
this.state = { hasError: false }
}
componentDidCatch(error, info) {
this.setState({ hasError: true })
console.log(error, info)
}
render() {
if (this.state.hasError) {
return (
<View>
<Text>Why is this not rendering?</Text>
</View>
)
}
return this.props.children
}
}
export default class App extends Component {
render() {
return (
<ErrorBoundary>
<InnerComponent/>
</ErrorBoundary>
);
}
}
Here is a snack I made with the same issues: https://snack.expo.io/BynlDr6-z
What am I doing wrong here?
I posted this question on StackOverflow here: javascript - Why isn't componentDidCatch not preventing app crashes? - Stack Overflow?
One of the commenters has managed to get this to run on their local environment which is very odd. If Snack is using SDKv23 and thus React 16. Shouldn’t it be working correctly here?
Thanks!