¿Cómo manejas los errores en tiempo de ejecución dentro de un árbol de React?

Los error boundaries capturan errores lanzados durante el render, en métodos del ciclo de vida y en constructores por debajo de ellos, y luego renderizan un fallback en vez de desmontar la aplicación entera. Siguen siendo componentes de clase que usan getDerivedStateFromError y componentDidCatch, o una librería envoltorio. No capturan errores en manejadores de eventos, callbacks asíncronos ni en el propio límite, así que eso necesita try y catch normales más reporte de errores.

Los error boundaries capturan cualquier cosa lanzada mientras se renderiza el subárbol que tienen debajo, y meten un fallback para que un widget roto no tumbe la página. Normalmente uso el envoltorio react-error-boundary en lugar de escribir la clase yo mismo, porque me da un manejador de reset gratis. Los huecos son la parte que la gente olvida: nada lanzado en un onClick, en un setTimeout o en una promesa rechazada sin manejar llega a un límite, así que eso sigue necesitando try y catch con un estado de error explícito. Sobre la colocación, un límite en la raíz es básicamente una pantalla de fallo más bonita. Lo que hago en realidad es envolver cada zona útil de forma independiente, así que la barra lateral, el panel principal y cualquier incrustación de terceros tienen el suyo, con un fallback que dice qué falló y ofrece un reintento que reinicia el límite y vuelve a pedir los datos. Cada límite reporta a nuestro sistema de seguimiento de errores con el stack de componentes y el contexto del usuario en componentDidCatch, y en React 19 además configuro onUncaughtError en la raíz para que no se cuele nada sin registrar.