Error boundaries

[erksch]

OS:

• Windows
• MacOS
• Linux

Platform:

• iOS
• Android

v10.14.2
6.5.0
[email protected]

Hey there!

I currently have trouble to figure out the right way to do error boundary components in react native with sending the errors to sentry correctly. The documentation for react describes this very good and straightforward but since this part uses @sentry/browser I thought the react native docs has an own section about this. But there is no information about how to make error boundaries in react-native by using the react-native-sentry package. Furthermore the required functions like Sentry.withScope and Sentry.captureException are not even part of the package.

Should I use the @sentry/browser package for this along with the react native sentry configuration?

Regards!
Erik

[HazAT]

Please upgrade to @sentry/react-native which provides all functions need to use error boundaries correctly. It works the same as @sentry/browser.

[shubhamkes]

Is this working in React native? For me Fallback ui never shown, neither does onError gets invoked.
"@sentry/react-native": "2.3.0"

[jaybuangan]

Same here. it crashes on a device and I've tried both ways using @sentry/react-native and sentry-expo

[jennmueng]

@jaybuangan @shubhamkes You can use the Sentry.ErrorBoundary and Sentry.withErrorBoundary as stated here but you can import it from @sentry/react-native.

[jaybuangan]

Thanks @jennmueng for the response. I've tried the example you linked and it just shows the regular Expo error. Maybe I'm testing it wrong. Would I see it in Expo Go? or would I have to create a build and install it on my iPhone? I've also set expo to run in Production mode since Expo doesn't work in debug mode on the simulator and still never shows the custom ErrorBoundary or just a element. This is what my App.tsx looks like

import React from 'react';
import { LogBox, Text } from 'react-native';
import { QueryClient, QueryClientProvider } from 'react-query';
import * as Sentry from '@sentry/react-native';

import ErrorBoundaryFallback from './components/ErrorBoundaryFallback';

if (__DEV__) {
    // Hide the timer warning caused by react-query... the timer used by react-query to timeout caches will
    // suspend if the app is in the background.  Doesn't harm anything, just might take longer to timeout
    // https://github.com/tannerlinsley/react-query/discussions/356
    LogBox.ignoreLogs(['Setting a timer']);
}

initializeSentry();

function App() {
    return (
      
            <AppContextProvider>
                <AppProviders>
                    {(mode) => (
                        <>
                            <Navigation colorScheme={mode} />
                            <NoNetworkBar />
                        </>
                    )}
                </AppProviders>
            </AppContextProvider>
    
    );
}

export default Sentry.withErrorBoundary(App, { fallback: <Text>an error as occured</Text> });

[jennmueng]

@jaybuangan What kind of error is it? Error boundaries only catch rendering errors and lifecycle methods FYI.

[jaybuangan]

@jennmueng I have a button that intentionally throws an error

const handleThrowError = () => { throw new Error('Test Error'); };

and this error pops up in the simulator when I press it

[ttruongatl]

+1

[benadamstyles]

@jaybuangan React error boundaries cannot handle errors in event handlers – see the docs.