Categories
javascript react-native reactjs

ComponentDidCatch does not work

Why componentDidCatch does not work in my react-native app.
componentDidCatch does not handle errors.

React native v: 50.3
React: 16.0.0

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import Logo from './SignUpInit/Logo';
import SignUp from './SignUpInit/SignUp';
import Social from './SignUpInit/Social';
import styles from './SignUpInit/styles';

export default class SignUpInit extends Component {

state = {
componentCrashed: false,
count: 0,
}

componentDidCatch(error, info) {
console.log(error);
console.log(info);
console.log('_______DID CATCH____________');
this.setState({componentCrashed: true});
}

componentDidMount(){
setInterval(()=>this.setState({count: this.state.count+1}),1000);
}

render() {
if (this.state.componentCrashed) {
return (
<View>
<Text>
Error in component "SingUpInit"
</Text>
</View>
);
}

if(this.state.count > 5){
throw new Error('Error error error');
}


return (
<View style={styles.main}>
<Logo/>
<SignUp/>
<Social/>
</View>
);
}
}

This doesn’t work because componentDidCatch() only works for catching errors thrown by a components children. Here it seems like you are trying to catch an error thrown by the same component – that’s not going to work.

See the official documentation for more info:

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

Note the “anywhere in their child component tree”.


So all you need to do is to wrap your component inside another component that manages all errors thrown. Something like:

<ErrorBoundary>
<SignUpInit />
</ErrorBoundary>

Where <ErrorBoundary /> is something as simple as:

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {hasError: false};
}
componentDidCatch(error, info) {
this.setState({hasError: true});
}
render() {
if(this.state.hasError) return <div>Error!</div>;
return this.props.children;
}
}