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>
);
}
}
With the new feature in React, developers can test the Error Boundaries by a toggle error button, added to the DevTools. When we click on the toggle error button on the component labeled 'Inner Component', Error boundary is triggered.
The componentDidCatch() method works like a JavaScript catch {} block, but for components. Only class components can be error boundaries. In practice, most of the time you'll want to declare an error boundary component once and use it throughout your application.
Error boundaries do not catch errors for: Event handlers (learn more) Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) Server side rendering.
In order to use Error Boundary in Functional Component, I use react-error-boundary. When we run this application, we will get a nice error display form the content of ErrorHandler component. React error boundary catches any error from the components below them in the tree.
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With