Error boundary seems to be failing to catch errors.

[gunn]

Environment

1. react-native: 0.47.1
2. react: 16.0.0-alpha.12
3. node: v8.3.0

• Target Platform:
  iOS, android

• Build tools:
  create-react-native-app / expo locally, snack.expo.io online.

Steps to Reproduce

Use this code:

import React from 'react';
import { Text, Button } from 'react-native';

class ErrorBoundary extends React.Component {
  state = { hasError: false }

  componentDidCatch() {
    this.setState({ hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <Text>Error in Component</Text>
    }
    return this.props.children
  }
}

const Component = ()=> (
  <Button
    title="Throw Error!"
    onPress={()=> { throw new Error() }}
  />
)

export default ()=> (
  <ErrorBoundary>
    <Component />
  </ErrorBoundary>
)

Expected Behavior

It should behave like react in the browser and display the text "Error in Component".

Actual Behavior

In development mode the red error screen shows. In production the app crashes and restarts.

Reproducible Demo

https://snack.expo.io/ryHYYfPdZ

[chuckwu0]

I get the same problem

[luisfmsouza]

I had the same issue. Looking for any suggestion.

[tumanov-alex]

Same for me.

[clementdevosmc]

Same for me here.

[timwangdev]

I don't think componentDidCatch() method is available in react-native right now. React native is not rely on fiber in current version.

[eliperkins]

componentDidCatch is available in RN 0.49.0-stable:

react-native/Libraries/Renderer/ReactNativeFiber-dev.js

Line 2715 in cd81eff

return void instance.componentDidCatch(capturedError.error, info);

This requires React 16.0.0-beta.5

[JesperLekland]

@eliperkins My component still doesn't catch an error.

RN: 0.49.3
React: 16.0.0-beta.5

[eliperkins]

@JesperLekland Can you show your component? Note that only errors thrown within React lifecycle events will be captured.

[wwwdata]

I also have this issue. I was just testing this by throwing an error in the componendDidUpdate lifecycle method of a child component. I can catch the error, but it also pops up as a red screen.

[tcdavis]

I can reproduce with
"react": "16.0.0-beta.5",
"react-native": "0.49.3"
and
"react": "16.0.0",
"react-native": "0.50.0-rc.0"

componentDidCatch appears to trigger / update state as expected, but a red box displaying the component stack is displayed.

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  render() {
    if (this.state.hasError) {
      return <Text>Error in Component</Text>;
    }
    return <BadComponent />;
  }
}

const BadComponent = () => {
  throw new Error();
};

export default class App extends Component<{}> {
  render() {
    return (
      <View>
        <Text>Welcome to React Native!</Text>
        <ErrorBoundary />
      </View>
    );
  }
}

[eliperkins]

So is the "bug" here that the RedBox is displayed? It seems like if the error is caught and handled, there shouldn't be a RedBox, but I don't think that matches that the original issue was here...

[tcdavis]

That's all I'm seeing, at least. Happy to open a new issue if you'd prefer.

[gunn]

Here's the demo using expo SDK 22, which uses react 16.0.0-beta.5 and react-native 0.49:
https://snack.expo.io/Byc3n0A6-

Result: Uncaught Error: Error

[gusgard]

@gunn Try this example https://snack.expo.io/@gusgard/error-boundaries-(componentdidcatch-example)

Remember that errors are caught in render but are not caught in event handlers.

If you test it in release mode, you will see the message "Error in Component", otherwise in dev mode on your device (without using Expo) tap dismiss in the error screen.

[easybird]

I am having the same issue.
Error gets caught in componentDidCatch, but red screen is still shown - in DEV mode, and app crashes - in PROD mode.

• "react": "^16.1.1",
• "react-native": "^0.49.4",