I am using react native error boundary at the top level of my App file.
<RootStoreProvider value={rootStore}>
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<ErrorBoundary>
<RootNavigator
ref={navigationRef}
initialState={initialNavigationState}
onStateChange={onNavigationStateChange}
/>
</ErrorBoundary>
</SafeAreaProvider>
</RootStoreProvider>
When I have an error thrown in one of my screen's useEffect hook, it isn't captured by the Error boundary.
try {
console.log('use effect');
fetchSomeData();
} catch (error) {
console.error('Error in useEffect:', error);
throw error; // This error won't be captured by the error boundary
}
}, []);
When I throw an error directly from useEffect as shown below, it is captured by the Error boundary.
useEffect(()=>{
throw new Error('Something went wrong!');
}, [])
What is causing this behaviour? And how do I ensure that errors caused while fetching data are captured by the error boundary correctly?