9

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

3
  • 1
    You're going to need to provide more detail than that if you want other people to help. Post the code here, with a reproducable example if possible Commented Nov 10, 2017 at 13:23
  • You're going to need to provide more detail. What doesn't work? What do you expect to happen? Can you provide relevant code or a working example? Commented Nov 10, 2017 at 13:23
  • You're going to need to provide more detail. Post your component, what exactly doesn't work? How do you tell?
    – dfsq
    Commented Nov 10, 2017 at 13:36

1 Answer 1

26

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.