Skip to content

Error Boundary

<PionneErrorBoundary> is a React Error Boundary that:

Catches errors bubbling up from its children.
Sends the event to Pionne with mechanism: { type: 'react', handled: true }.
Shows a fallback UI instead of the crashed sub-tree.

Basic usage

import { PionneErrorBoundary } from '@pionne/react-native';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <PionneErrorBoundary fallback={<Text>Something crashed</Text>}>
      <MainNavigator />
    </PionneErrorBoundary>
  );
}

Props

Prop	Type	Description
`fallback`	`ReactNode \| (info) => ReactNode`	UI shown on error
`tags`	`Record<string, unknown>?`	Tags added to the event
`onError`	`(err, info) => void`	Hook called after capture

Function fallback (with reset)

<PionneErrorBoundary
  tags={{ boundary: 'root' }}
  fallback={({ error, reset }) => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Error: {error.message}</Text>
      <Button title="Retry" onPress={reset} />
    </View>
  )}
  onError={(err) => console.log('Boundary triggered', err)}
>
  <CheckoutFlow />
</PionneErrorBoundary>

reset() resets the boundary’s internal state and tries to render its children again.

Granularity

You can nest several boundaries to isolate failures:

<PionneErrorBoundary fallback={<RootFallback />} tags={{ boundary: 'root' }}>
  <Header />
  <PionneErrorBoundary fallback={<FeedFallback />} tags={{ boundary: 'feed' }}>
    <Feed />
  </PionneErrorBoundary>
  <Footer />
</PionneErrorBoundary>

If <Feed /> crashes, the header and footer keep working.

Boundary vs auto-capture

Case	Boundary	Auto-capture
React render (`return <Bad/>`)	Yes	No
Async `useEffect`	No	Yes (Hermes)
`onPress` handler	No	Yes (timer/global)
Error in a timer	No	Yes

See also