I cant see the component boundary

[DwCleb]

Hi, I cant see the boundary component when I throw an error.

the throw error: throw new Error('💥 CABOOM 💥');
trigged by onPress

and the only error that show was the react-native error screen.
I was click in dismiss, but the error boundary component not show.

ggg.mov

[carloscuesta]

Hey @DwCleb, can you share a reproduction case with the code to debug what's happening?

Did you wrapped the component that is throwing the error with the ErrorBoundary component?

Here's a working example demo on Expo: https://snack.expo.io/@carloscuesta/react-native-error-boundary

[DwCleb]

@carloscuesta This video shows the code in debug mode.
The code implemented is below:

and I used the onPress to trigged a throw error below

and the behavior was what I reported in the video above

[carloscuesta]

The button that that is throwing the error is a children of the ErrorBoundary component?

Could you try to remove the FallbackComponent and try again?

[DwCleb]

Yes, @carloscuesta, the button is inside <Routes />.
I removed the FallbackComponent and still not working

[carloscuesta]

That's interesting, would you be able to isolate this reproduction case in a demo repository?

If you can't would you be able to tell me the version of React-Native that you are using?

[DwCleb]

I will try isolate it.

the versions below
react version 16.13.1
react native version 0.63.2

[DwCleb]

@carloscuesta the error above also happens in this demo: https://github.com/DwCleb/ErrorBoundaryIsolate

The error boundary component doesn't appear

[carloscuesta]

Let me take a look @DwCleb

[carloscuesta]

I think the problem is the way you're throwing out the Error @DwCleb

Seems that the simulator on Debug mode when you throw an error like this:

onPress={() => throw new Error('whatever')}

Is being catched by the LogBox and it does not gets into the ErrorBoundary@componentDidCatch method. So you'll never see the ErrorBoundary. This only would happen on development, since there's the react-native LogBox to show you the error.

Try to throw the error like this:

https://snack.expo.io/@carloscuesta/react-native-error-boundary

You'll see the ErrorBoundary component rendered! 🎉

This is documented in here: https://github.com/carloscuesta/react-native-error-boundary#examples

[DwCleb]

Still not working.
I cant use the state to show the error component, this is not flow in development.
The goal is catch JS error, and with State I'm forced a component error show, it's a controlled situation, not a real situation of error. 😕

Using state worked, but this not a real case.

I will try some alternatives about JS error and send you the feedback about my solution.

Thank you so much for the help, see you in some hours

[carloscuesta]

Hey @DwCleb

I cant use the state to show the error component, this is not flow in development.

You don't need state to show the ErrorBoundary component. What happens is that on development mode some errors are catched by the LogBox component -> https://reactnative.dev/blog/2020/07/06/version-0.63#logbox

This component is made for catching unhandled errors on release mode. Not for displaying errors on development. You can read more about this in here: https://carloscuesta.me/blog/managing-react-native-crashes-with-error-boundaries

So you won't able to render the ErrorBoundary component on Development just by throwing an error from the Button. Because those type of errors are getting caught by the LogBox component on development. As taken out from react-native docs: https://reactnative.dev/docs/debugging#logbox

On release mode, it will work because the LogBox it's not shipped to your application, so the component will catch all the JavaScript errors just by using the ErrorBoundary component.

The goal is catch JS error, and with State I'm forced a component error show, it's a controlled situation, not a real situation of error. Using state worked, but this not a real case.

As you say, you're simulating an error so that clearly it's not a real case. You're trying to force an error to render the ErrorBoundary component on development. If you want to render the ErrorBoundary, using the throw Error, use react-native run-ios --variant=release to set the application on release mode, and avoid the LogBox component.

[DwCleb]

@carloscuesta You are right!

Thanks for your support and this clarification.

[carloscuesta]

No problem, a pleasure to explain. Thanks to you aswell for creating the demo repository ❤️

Have a great day!

[mokshmodi96]

I am using your Library for Error Boundary handling, the fallback component is working okay on the IOS and android in Development mode but whenever i switch to production for android the app crashes immediately. Though the app runs fine on IOS in production mode