Skip to content

Error Boundary

This content is not available in your language yet.

<PionneErrorBoundary> est un Error Boundary React qui :

Capture les erreurs qui remontent depuis ses enfants.
Envoie l’event à Pionne avec mechanism: { type: 'react', handled: true }.
Affiche un fallback UI à la place du sous-arbre planté.

Usage de base

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

export default function App() {
  return (
    <PionneErrorBoundary fallback={<Text>Quelque chose a planté</Text>}>
      <MainNavigator />
    </PionneErrorBoundary>
  );
}

Props

Prop	Type	Description
`fallback`	`ReactNode \| (info) => ReactNode`	UI affichée en cas d’erreur
`tags`	`Record<string, unknown>?`	Tags ajoutés à l’event
`onError`	`(err, info) => void`	Hook appelé après capture

Fallback en fonction (avec reset)

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

reset() réinitialise l’état interne du boundary et tente un nouveau rendu des enfants.

Granularité

Tu peux imbriquer plusieurs boundaries pour isoler les pannes :

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

Si <Feed /> plante, le header et le footer continuent de fonctionner.

Boundary vs auto-capture

Cas	Boundary	Auto-capture
Render React (`return <Bad/>`)	Oui	Non
Effet `useEffect` async	Non	Oui (Hermes)
Handler `onPress`	Non	Oui (timer/global)
Erreur dans un timer	Non	Oui

Voir aussi