componentDidCatch() doesn't catch native errors

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

I’m implementing a Markdown renderer, and in some unhandled edge cases, I end up rendering a <View> inside a <Text>, which of course fails with the error: "Views nested within a Text must have a width and height.

Now I’m trying to catch this error using componentDidCatch() to avoid any crashes in production, and to present a nice error message asking the user to fill a bug with the reproduce case. Unfortunately, componentDidCatch doesn’t seem to catch this particular error.

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 9.5.0 Yarn: 1.5.1 npm: 5.6.0 Watchman: 4.7.0 Xcode: Xcode 9.0 Build version 9A235 Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed) react: 16.2.0 => 16.2.0 react-native: 0.52.0 => 0.52.0

Steps to Reproduce

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    console.log('We did catch', error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <Text>Something went wrong.</Text>;
    }

    return this.props.children;
  }
}

class CommentListItemComponent extends Component {
  render() {
    return (
      <ErrorBoundary>
        <Text>
          <View>
            <Text>No width and height, will crash</Text>
          </View>
        </Text>
      </ErrorBoundary>
    );
  }
}

Expected Behavior

After dismissing the red screen (which would only appear in dev), the component should display: Something went wrong

Actual Behavior

After dismissing the red screen, nothing is shown. I also tried to use console.log() in my ErrorBoundary’s render(), but nothing gets logged,

[martsie]

componentDidCatch only catches javascript errors - the error you’re trying to catch is a native error. You can gracefully catch native errors using https://github.com/master-atul/react-native-exception-handler however the app will be crashed at that point and will need to be restarted.

You could possibly wrap react-native-markdown-view in your own component that detects views inside text.

I do think this is a react-native issue that should be solved. react-native modules that supply native bridges should handle likely native crashes that occur due to bad data be passed by either validating the data in js side or catching the exception in the native exception. Text should do the same.

[machour]

@hramos I think you misread my problem.

I’m fine with not being able to nest a View inside a Text. My problem is componentDidCatch not being fired in that case.

Shouldn’t it be the case?