Cómo funcionan los límites de error en React
Si ha trabajado con React durante 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 del manejo de errores». Es posible que haya visto esto en la consola de su navegador cada vez que fallan sus componentes.
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 estándar. 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 documentación de React , 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 ocurre en el controlador de eventos, use el siguiente código:
function EventComponent() {
const [error, setError] = useState(null)
const handleClick = () => {
try {
// Do something
} catch (error) {
setError(error)
}
}
return (
<>
<div>{error?error: ""}</div>
<button onClick={handleClick}>Button</button>
</>
)
}
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.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { error: error };
}
componentDidCatch(error, errorInfo) {
// Log the error to an error reporting service
}
render() {
if (this.state.error) {
// Create a custom fallback UI here
return <h1>There seems to be a problem.</h1>;
}
return this.props.children;
}
}
export default ErrorBoundary;
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 react-error-boundary . 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.
<ErrorBoundary>
<App/>
</ErrorBoundary>
Si ajusta un componente individual con un ErrorBoundary, un error en ese componente no afectará la forma en que se representa otro componente.
<ErrorBoundary>
<Profile/>
</ErrorBoundary>
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.
Deja una respuesta