Mejores prácticas para gestionar errores en React usando límites de error
Al trabajar con un componente, si ocurre algún error dentro del código de este componente, React desmontará todo el árbol de componentes de React y no renderizará nada. Esta es la forma en que React maneja los fallos.
No quieres que los errores se muestren a tus usuarios. Reaccionar decide mostrar una página en blanco.
Sin embargo, esta es la opción predeterminada. Mostrar una página en blanco es apenas un poco mejor que mostrar mensajes crípticos a los usuarios, pero debería haber una mejor manera.
Si está en modo de desarrollo, cualquier error activará un seguimiento detallado de la pila que se imprimirá en la consola DevTools del navegador. Sin embargo, no en producción, por supuesto, donde realmente no desea que los errores se impriman para sus usuarios.
En producción debes interceptar los errores y mostrar algún tipo de mensaje útil a la persona que usa la aplicación.
Aquí es donde entrar en juego los límites de error.
Con un límite de error, aíslas partes de la aplicación y manejas los errores localmente.
Un límite de error es un componente de React que implementa el componentDidCatch()
evento del ciclo de vida y envuelve otros componentes:
class ErrorHandler extends React.Component { constructor(props) { super(props) this.state = { errorOccurred: false } } componentDidCatch(error, info) { this.setState({ errorOccurred: true }) logErrorToMyService(error, info) } render() { return this.state.errorOccurred ? h1Something went wrong!/h1 : this.props.children }}
y en un componente JSX lo usas así: Noticias del cadiz
ErrorHandler SomeOtherComponent //ErrorHandler
Cuando ocurre un error dentro de SomeOtherComponent
nuestros componentes secundarios o en todo el subárbol de componentes que los contiene, ErrorHandler
lo interceptaremos y podremos manejar el error con elegancia.
En el caso anterior, que está inspirado en la documentación oficial de React, tenemos una errorOccurred
propiedad de estado que, cuando se establece como verdadera, hace que la interfaz represente la IU de manejo de errores; De lo contrario, representa el árbol de IU de la aplicación normal.
Dentro de componentDidCatch()
, que recibe 2 argumentos que describen el error, también llamamos logErrorToMyService()
a que es solo un trozo de código para alguna función que usa un servicio como Sentry, Roller, Airbrake u otros que pueden registrar el error de una manera agradable para que usted lo Vea, de modo que no tenga que depender de que los usuarios le digan que hay un error para notar un problema.
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Cómo manejar errores en React
Al trabajar con un componente, si ocurre algún error dentro del código de este componente, React desmontará todo el árbol de componentes de React y no rend
programar
es
https://aprendeprogramando.es/static/images/programar-como-manejar-errores-en-react-1884-0.jpg
2024-10-29
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente