@heritsilavo/react-error-boundary
Un package npm qui capture et gère les erreurs des composants React avec une notification personnalisable.
Tech Stack
Fonctionnalités Clés
Error Boundary React & Next.js
Capture toutes les erreurs des composants enfants et affiche un fallback élégant, compatible React 18+ et Next.js 13+.
Composant d'erreur personnalisable
Fournissez votre propre composant d'affichage d'erreur via la prop ErrorComponent pour une intégration parfaite dans votre design system.
Auto-hide avec indicateur de progression
L'erreur se masque automatiquement après un délai configurable (autoHideDelay), avec un indicateur visuel de progression.
Contexte d'erreur centralisé
Accédez et gérez les erreurs depuis n'importe quel composant grâce aux hooks useError() et useThrowError().
Défis & Solutions Techniques
Support universel ESM/CJS avec typage strict
Packager la bibliothèque pour qu'elle fonctionne aussi bien en CommonJS qu'en ES Modules, tout en exposant des types TypeScript précis pour useError, useThrowError et ErrorComponentType sans forcer l'utilisateur à configurer quoi que ce soit.
Compatibilité Error Boundary avec les Server Components Next.js
Les Error Boundaries React sont des composants client par nature (ils utilisent componentDidCatch), ce qui crée des frictions dans les architectures Next.js App Router où la majorité des composants sont Server Components. Adapter le package pour qu'il s'insère proprement dans ces deux mondes sans casser le SSR a été un défi d'architecture non trivial.
Auto-hide sans fuite mémoire
Implémenter le mécanisme d'auto-hide avec setTimeout tout en nettoyant systématiquement les timers lors du démontage du composant (clearTimeout dans useEffect), pour éviter les fuites mémoire et les mises à jour d'état sur des composants déjà démontés.