ComponentDidCatch does not work

user_8198496 0
Viewed 16312

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>
        );
    }
}

react-native reactjs javascript
1 Answers

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;
  }
}
user_20303210
Related