Mejores prácticas de Error Boundaries
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
Conoce las dos capas: try/catch para trabajo asincrónico y manejadores de eventos; error boundaries para throws en renderizado y ciclo de vida - ninguno reemplaza al otro.
Envuelve pantallas principales, no solo la raíz: Un crash en una rama no debería hacer una pantalla blanca de toda la app - los boundaries por ruta contienen el radio de alcance.
Mantén un boundary raíz como último recurso: Captura fallos de proveedores y bugs en la navegación - sigue registrando y ofreciendo reinicio, no una pantalla en blanco.
Usa class boundaries o react-error-boundary: Los componentes funcionales no pueden implementar getDerivedStateFromError - no falsifiques boundaries con hooks.
Registra siempre en componentDidCatch: Los crashes en producción sin telemetría son invisibles - reenvía a Sentry o tu reporter antes de llamar reset.
Nunca muestres trazas de pila a los usuarios: La UI de fallback obtiene copias accionables; los ingenieros leen logs - error.message filtra detalles de implementación.
Reinicia con remontaje o refetch: reset() solo re-renderiza el mismo estado corrupto - cambia un key en los hijos o refetch las queries de pantalla en onReset.
Try/catch dentro de onPress: Los throws del manejador evitan los boundaries - envuelve llamadas a módulos nativos y fetch y muestra toasts o errores inline.
Distingue desconexión offline de errores de servidor: NetInfo false no significa HTTP 500 - copias diferentes y estrategias de reintento para cada uno.
Oculta el banner offline durante la prueba de alcanzabilidad: isInternetReachable === null al inicio no es offline - muestra el banner solo en desconexión confirmada.
Conecta onlineManager a NetInfo: TanStack Query debería pausar reintentos offline - reintentos sin límite en modo avión agotan la batería.
Etiqueta datos en caché desactualizados: Muestra dataUpdatedAt o "Datos guardados desde…" durante SWR - los usuarios deben saber que los precios o saldos pueden estar desactualizados.
Persiste mutaciones fallidas: UI optimista sin cola pierde creaciones offline - AsyncStorage o MMKV reproduce con claves de idempotencia al reconectar.
Instala manejador global una vez en bootstrap: ErrorUtils.setGlobalHandler en _layout raíz antes de que se monten las rutas - encadena al manejador anterior después de registrar.
Trata isFatal con seriedad: Los errores de JS fatal pueden dejar el bundle poco saludable - informa inmediatamente; no solo console.warn.
Captura rechazos de promesas no manejados: Agrega onunhandledrejection (donde sea compatible) como red de seguridad junto a setGlobalHandler.
No recargues la app en Retry: Updates.reloadAsync() descarta el estado en memoria - prefiere refetch() o boundary reset.
Feature-flag pantallas riesgosas: Kill switch remoto más contador de crashes local desactiva automáticamente una pantalla después de activaciones repetidas del boundary.
Cachea payloads de flag con TTL: Los valores por defecto de AsyncStorage permiten que la app inicie cuando el servicio de flag está caído - stale-off es más seguro que stale-on para crashes nuevos.
Modela tiers de capacidad: full / degraded / unavailable para biometría, ubicación y cámara - degrada con copia clara, no lances.
Usa requireOptionalNativeModule en rutas de Expo Go: Las clases nativas faltantes deberían bajar de categoría características - no crashes al tiempo de importación.
Mapea errores a categorías visibles para el usuario: Red, autenticación, validación y desconocido obtienen cada uno titular distinto más acción - un genérico "Algo salió mal" es un último recurso.
Ofrece una acción de recuperación primaria: Reintenta, Vuelve atrás o Contacta soporte - no tres botones iguales que paralicen usuarios móviles.
Mantén el JSX de fallback de boundary trivial: Sin búsqueda de datos dentro del componente boundary - throws en fallback escalan al boundary padre.
Prueba modo avión y boundary reset en dispositivo: Los simuladores ocultan fluctuaciones de NetInfo y carreras de remontaje - los scripts de QA deberían incluir rutas offline + reintento + kill-switch.
isError.componentDidCatch.Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 19 jul 2026