Errors thrown from async functions not being captured in react native error boundary

43 Views Asked by At

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?

0

There are 0 best solutions below