reactjsreact-error-boundary

React: Error boundary did not catch Invariant Violation


I want to handle error in case that instead valid react child I have an object in prop value. So I add a Error Boundary but still have an error.

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {})

Why it happens? It's not event handler nor SSR nor async code.

class ErrorBoundary extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
        };
    }

    componentDidCatch(error, info) {
        this.setState({
            hasError: true,
        });
    }

    render() {
        if (this.state.hasError) {
            return '';
        }

        return <Component {...this.props} />;
    }
}

class MyComponent extends React.PureComponent {
    constructor(props) {
        super(props);
    }
    render () {
        return (<ErrorBoundary> {this.props.value} </ErrorBoundary>);
    }
}

Solution

  • As I understood React Error Boundaries can not handle errors from react core. So the solution to avoid "Uncaught Invariant Violation" is put valid data in the props