Si ha trabajado con React por un tiempo, es posible que haya encontrado un mensaje que dice "Considere agregar un límite de error a su árbol para personalizar el comportamiento de manejo de errores.” Es posible que haya visto esto en la consola de su navegador cada vez que sus componentes chocar.
React recomienda usar un límite de error para brindar una mejor experiencia de usuario cuando ocurre un error.
¿Qué es la clase límite de error en React?
Los límites de error funcionan como el bloque try/catch en JavaScript vainilla. La diferencia es que detectan los errores que ocurren en los componentes de React. Si se produce un error en un componente de la interfaz de usuario, React desmonta el árbol dentro de ese componente y lo reemplaza con la interfaz de usuario alternativa que ha definido. Esto significa que un error solo afecta al componente en el que se produce y el resto de la aplicación funciona como se espera.
De acuerdo con la Reaccionar documentación, las clases de límite de error no detectan errores en:
- Manejadores de eventos.
- Código asíncrono.
- Código del lado del servidor.
- Errores arrojados en el propio límite de error (en lugar de sus elementos secundarios).
Para los errores anteriores, puede usar el bloque try/catch.
Por ejemplo, para detectar un error que se produce en el controlador de eventos, usa el siguiente código:
funciónComponente de evento() {
constante [error, establecerError] = usarEstado(nulo)constante handleClick = () => {
intentar {
// Hacer algo
} atrapar (error) {
setError (error)
}
}
devolver (
<>
<división>{¿error? error: ""}división>
<botónal hacer clic={manejarClick}>Botónbotón>
)
}
Use límites de error para detectar errores solo en los componentes de React.
Creación de una clase de límite de error
Puede crear un límite de error definiendo una clase que contenga uno o ambos de los siguientes métodos:
- getDerivedStateFromError estático()
- componenteDidCatch()
La función getDerivedStateFromError() actualiza el estado del componente una vez que se detecta el error, mientras que puede usar componentDidCatch() para registrar la información del error en la consola. También puede enviar los errores a un servicio de informes de errores.
A continuación se muestra un ejemplo que muestra cómo crear una clase de límite de error simple.
claselímite de errorextiendeReaccionar.Componente{
constructor(accesorios) {
súper(accesorios);
este.estado = { error: FALSO };
}estáticogetDerivedStateFromError(error){
// Actualice el estado para que el próximo renderizado muestre la interfaz de usuario alternativa.
devolver { error: error };
}componenteDidCatch (error, errorInfo) {
// Registrar el error en un servicio de informes de errores
}prestar() {
si (este.estado.error) {
// Crear una interfaz de usuario alternativa personalizada aquí
devolver<h1>Parece que hay un problema.h1>;
}
devolvereste.accesorios.niños;
}
}
exportarpor defecto límite de error;
Cuando se produce un error, getDerivedStateFromError() actualizará el estado y, en consecuencia, activará una nueva representación que mostrará la interfaz de usuario alternativa.
Si no desea crear la clase de límite de error desde cero, use el Paquete NPM de límite de error de reacción. Este paquete proporciona el componente ErrorBoundary que envuelve los componentes que cree que pueden generar errores.
Uso de la clase de límite de error
Para manejar errores, ajuste los componentes con el componente de clase de límite de error. Puede envolver el componente de nivel superior o componentes individuales.
Si envuelve el componente de nivel superior, la clase de límite de error manejará los errores generados por todos los componentes en la aplicación React.
<límite de error>
<aplicación/>
límite de error>
Si ajusta un componente individual con un ErrorBoundary, un error en ese componente no afectará la forma en que se representa otro componente.
<límite de error>
<Perfil/>
límite de error>
Por ejemplo, un error en el componente de perfil no afectará la forma en que se representa otro componente como el componente Hero. Si bien el componente del perfil puede fallar, el resto de la aplicación funcionará bien. Esto es mucho mejor que renderizar la pantalla alternativa blanca genérica proporcionada por React.
Manejo de errores en JavaScript
Los errores de programación pueden ser frustrantes para los desarrolladores y usuarios. No manejar los errores puede exponer a sus usuarios a una interfaz de usuario fea con mensajes de error difíciles de entender.
Al crear su componente React, cree una clase de límite de error desde cero o utilizando el paquete react-error-boundary para mostrar mensajes de error fáciles de usar.
