2 formas de construir una capa de manejo de errores en React

Aprenda a crear una capa robusta de manejo de errores en React con estos dos métodos populares. Obtenga información sobre la capa de manejo de errores en React. Aprenda qué es una capa de manejo de errores, comprenda por qué su aplicación React debería tener una

Como con cualquier otra tecnología, las aplicaciones de React pueden implicar errores. De forma predeterminada, React responde a un error fatal con una página en blanco. Esto no es ideal, porque los usuarios no tienen forma de entender qué sucedió y por qué. Este es un problema para los desarrolladores porque el manejo deficiente de errores afecta la experiencia del usuario y la reputación de su aplicación. Afortunadamente, puede solucionar esto agregando una capa de manejo de errores a su aplicación React.

Una capa de manejo de errores le permite detectar errores y mostrar mensajes de error claros y útiles para el usuario. Esto lo ayuda a evitar bloqueos no deseados y, como resultado, mejora la experiencia general del usuario. Centralizar toda la lógica de manejo de errores en un solo lugar brinda varios beneficios y mitiga el problema mencionado anteriormente. ¡De esto se trata una capa de manejo de errores de React!

Aprendamos qué es una capa de manejo de errores, comprendamos por qué su aplicación React debería tener una y veamos dos enfoques para crear una capa de manejo de errores en React.

Contenido

• ¿Qué es una capa de manejo de errores en React?
• ¿Por qué su aplicación React debería tener una capa de manejo de errores?
• Capa de manejo de errores con límites de error en React
• Capa de manejo de errores con límite de error de reacción
• Capa de manejo de errores en acción
• Conclusión

¿Qué es una capa de manejo de errores en React?

En React, una capa de manejo de errores es la parte de su arquitectura frontend que es responsable de detectar y manejar los errores que ocurren en su aplicación. En otros términos, encapsula y centraliza la lógica de manejo de errores en un solo lugar.

Una capa de manejo de errores de React generalmente se encarga de:

• Detección de errores: la capa intercepta errores que ocurren durante la ejecución de la aplicación frontend.
• Manejo de errores: después de detectar un error, la capa lo maneja con gracia. En particular, evita que el error bloquee su aplicación y, en su lugar, presenta una página de error personalizada a los usuarios. Detrás de escena, la capa también puede registrar el error o informarlo a un servicio de monitoreo de errores.

Al agregar una capa de gestión de errores a su arquitectura React, puede asegurarse de que los errores que ocurran en su aplicación se manejen de manera efectiva y consistente. Estos son solo algunos de los beneficios que una capa de gestión de errores puede aportar a su aplicación. Siga leyendo para obtener más información.

¿Por qué su aplicación React debería tener una capa de manejo de errores?

Como se mencionó anteriormente, React no tiene un mecanismo integrado para recuperarse de los errores que ocurren durante el renderizado. Cuando ocurre un error, la única opción que tiene React es desmontar toda la aplicación. Como resultado, los usuarios verán una pantalla en blanco. Así es como React maneja los errores de forma predeterminada y, como puedes imaginar, está lejos de ser una solución ideal.

Con una capa de manejo de errores, puede anular el comportamiento predeterminado y evitar esto. En detalle, una capa de manejo de errores le permite:

• Evita bloqueos: en caso de error, la capa lo intercepta y te permite manejar el error como quieras. Esto significa evitar que su aplicación se bloquee debido a errores no controlados.
• Mejore la experiencia del usuario: cada vez que la capa detecta un error, muestra una bonita página de error para el usuario final. Los usuarios tienden a preferir usar una aplicación que proporciona mensajes de error útiles a una que falla.
• Centralizar la lógica de manejo de errores: la capa almacena toda la lógica de manejo de errores de la aplicación en el mismo lugar. Esto hace que sea más fácil lidiar con los errores de manera consistente e integrar el registro o el monitoreo de errores en su aplicación. A continuación, puede utilizar esta información recopilada para identificar la causa raíz de los errores, depurarlos y solucionarlos.

Todas estas son buenas razones por las que su aplicación React debería tener una capa de manejo de errores. Siga leyendo y vea dos enfoques que puede seguir para agregar una capa de manejo de errores a su arquitectura React frontend.

Capa de manejo de errores con límites de error en React

Los límites de error han sido la forma oficial de manejar los errores desde React 16 , que se lanzó en 2017. Específicamente, los límites de error son componentes de React que pueden detectar errores de JavaScript que ocurren en cualquier parte de su árbol de componentes secundarios. Le permiten mostrar un componente de IU alternativo cuando ocurre un error, lo que maneja el error con gracia y evita un bloqueo fatal.

Tenga en cuenta que los límites de error estándar detectan errores solo durante la representación, en los métodos del ciclo de vida y en los constructores de componentes. Por lo tanto, si un componente dentro de estos límites arroja un error, el límite de error lo interceptará. De lo contrario, ignorará el error.

¡Veamos ahora cómo construir y usar un límite de error en React para implementar una capa de manejo de errores!

Creación de un componente de límite de error

Para crear un límite de error en React, debe definir un componente de clase que involucre:

• Una variable de estado hasError:utilizada para determinar si el límite de error ha interceptado un error.
• Un staticmétodo llamado getDerivedStateFromError(): un método de ciclo de vida de React que se invoca después de que un componente descendiente arroja un error. El valor devuelto por el método actualiza el estado del componente de límite de error.
• Un componentDidCatch()método: un método especial del ciclo de vida de React que se llama cuando el límite de error detecta un error. Puede usarlo para registrar el error o informarlo a un sistema de gestión del rendimiento de la aplicación .
• Un render()método con if-elselógica: en caso de error, devuelve el componente de IU alternativo. De lo contrario, muestra los componentes secundarios envueltos por el límite de error.

Tenga en cuenta que React admite los métodos clave del ciclo de vida getDerivedStateFromError()y componentDidCatch()solo en componentes de clase. Esto significa que un límite de error no puede ser un componente funcional.

Este es el aspecto que debería tener un componente de clase de límite de error:

import React from "react";
import ErrorPage from "./ErrorPage";

export default class StandardErrorBoundary extends React.Component {
    constructor(props) {
        super(props);

        // to keep track of when an error occurs
        // and the error itself
        this.state = {
            hasError: false,
            error: undefined
        };
    }

    // update the component state when an error occurs
    static getDerivedStateFromError(error) {
        // specify that the error boundary has caught an error
        return {
            hasError: true,
            error: error
        };
    }

    // defines what to do when an error gets caught
    componentDidCatch(error, errorInfo) {
        // log the error
        console.log("Error caught!");
        console.error(error);
        console.error(errorInfo);

        // record the error in an APM tool...
    }

    render() {
        // if an error occurred
        if (this.state.hasError) {
            return <ErrorPage />;
        } else {
            // default behavior
            return this.props.children;
        }
    }
}

Cuando se produce un error en cualquiera de sus componentes secundarios, StandardErrorBoundarylo intercepta, lo registra, lo establece hasErroren verdadero y representa el <ErrorPage />componente de IU alternativo.

Esto es lo que ErrorPagepodría parecer:

export default function ErrorPage(props) {
    return (
        <div className={"error-page"}>
            <div className={"oops"}>Oops!</div>
            <div className={"message"}>Something went wrong...</div>
        </div>
    );
}

Puede personalizar y diseñar su componente de IU alternativo como desee. Un ErrorPagecomponente efectivo debe informar a los usuarios de lo sucedido, sin entrar en demasiados detalles ni preocuparlos.

¡Ahora sabe cómo definir un componente delimitador de errores en React! Todo lo que queda es ver cómo usarlo.

Usando su límite de error

Para implementar una capa de manejo de errores en React, simplemente envuelva su componente de aplicación de nivel superior con StandardErrorBoundary:

<StandardErrorBoundary>
  <MyApp />
</StandardErrorBoundary>

De ahora en adelante, cualquier error relacionado con React que ocurra en la aplicación será interceptado y manejado por el límite de error.

Tenga en cuenta que una aplicación React puede tener múltiples límites de error. Cada uno de ellos se encargará de manejar errores en diferentes subárboles de componentes. Sin embargo, para centralizar la lógica de error en un solo lugar, debe usar solo un límite de error de nivel superior.

Limitaciones de este enfoque

Los límites de error son una herramienta poderosa, pero también vienen con varias limitaciones que debe tener en cuenta. Profundicemos en ellos.

Como se menciona en la documentación oficial , los límites de error no pueden detectar errores en:

• Código asíncrono
• Controladores de eventos
• Componentes del servidor
• El propio límite de error

En otras palabras, un límite de error solo puede manejar los errores generados durante los ciclos de vida de React.

Además, los límites de error deben ser componentes de clase y no admiten ganchos.

Estas limitaciones pueden plantear fácilmente un problema para su aplicación React, especialmente teniendo en cuenta que JavaScript depende en gran medida de las devoluciones de llamada de eventos y el código asíncrono. Es por eso que necesitamos explorar un enfoque diferente para el manejo de errores en las aplicaciones React modernas.

Capa de manejo de errores conreact-error-boundary

react-error-boundary es una biblioteca npm React que proporciona una manera fácil y confiable de manejar errores con límites de error. Simplifica el proceso de creación de límites de error y ofrece soluciones eficaces para superar las limitaciones de un límite de error estándar.

En pocas palabras, react-error-boundarysimplifica enormemente el manejo de errores en React. Agréguelo a las dependencias de su proyecto con:

npm install react-error-boundary

A continuación, siga el tutorial y aprenda a crear una capa de manejo de errores en React con react-error-boundary.

Primeros pasos con el componente ErrorBoundary

react-error-boundaryexpone un ErrorBoundarycomponente, que admite varios accesorios para ayudarlo a crear un componente de límite de error sin esfuerzo. Así es como react-error-boundarypuede verse un límite de error creado con:

import ErrorPage from "./ErrorPage";
import { ErrorBoundary } from "react-error-boundary";

export default function ReactErrorBoundary(props) {
    return (
        <ErrorBoundary
            FallbackComponent={ErrorPage}
            onError={(error, errorInfo) => {
                // log the error
		console.log("Error caught!");  
		console.error(error);  
		console.error(errorInfo);
		
		// record the error in an APM tool...
            }}
        >
            {props.children}
        </ErrorBoundary>
    );
}

La FallbackComponentpropiedad contiene el componente de IU de reserva para representar en caso de error. Cuando esto sucede, ErrorBoundaryinvoca la función de devolución de llamada pasada a onError. De lo contrario, si no se produce ningún error, ErrorBoundaryrepresenta los componentes secundarios que envuelve. En otros términos, este fragmento hace exactamente lo que hace el límite de error definido anteriormente, pero con menos y más código legible.

Tal como lo hicimos anteriormente, envuelva su componente de nivel superior de React ReactErrorBoundarypara centralizar la lógica de manejo de errores:

<ReactErrorBoundary>
  <MyApp />
</ReactErrorBoundary>

No olvide que un componente de límite de error creado con react-error-boundarypuede ser un componente funcional o de clase. Ya no está limitado a los componentes de clase, y depende de usted tomar la mejor decisión de acuerdo con sus objetivos y preferencias.

Restablecer su aplicación después de un error

react-error-boundarytambién proporciona una forma de recuperarse de los errores detectados por el componente de límite de error. Específicamente, la onResetpropiedad acepta una función de devolución de llamada que ErrorBoundarypasa automáticamente al archivo FallbackComponent.

Actualice su ReactErrorBoundarycomponente como se muestra a continuación:

import ErrorPage from "./ErrorPage";
import { ErrorBoundary } from "react-error-boundary";

export default function ReactErrorBoundary(props) {
    return (
        <ErrorBoundary
            FallbackComponent={ErrorPage}
            onError={(error, errorInfo) => {
                // log the error
				console.log("Error caught!");  
				console.error(error);  
				console.error(errorInfo);
            }}
            onReset={() => {
                // reloading the page to restore the initial state
                // of the current page
                console.log("reloading the page...");
                window.location.reload();

                // other reset logic...
            }}
        >
            {props.children}
        </ErrorBoundary>
    );
}

Lo que hace la onReset función de devolución de llamada es simplemente volver a cargar la página actual a través de JavaScript. Esta es la lógica de reinicio de error más básica posible. En aplicaciones más complejas, es posible que deba restaurar el estado de la aplicación a un punto anterior o actualizar el estado de Redux.

De forma predeterminada, ErrorBoundarypasa a los FallbackComponentdos accesorios siguientes:

• error: almacena el objeto de error capturado por el límite de error.
• resetErrorBoundary: contiene la función de devolución de llamada pasada a la onResetpropiedad, si está definida.

Entonces, ahora puede agregar un botón de reintento ErrorPagecomo se muestra a continuación:

import "./ErrorPage.css";
export default function ErrorPage(props) {
    return (
        <div className={"error-page"}>
            <div className={"oops"}>Oops!</div>
            <div className={"message"}>Something went wrong...</div>
            {props.resetErrorBoundary && (
                <div>
                    <button className={"retry-button"} onClick={props.resetErrorBoundary}>
                        🔄 Try Again!
                    </button>
                </div>
            )}
        </div>
    );
}

La página de respaldo que se muestra en caso de error ahora tendrá un mensaje "¡Intentar de nuevo!" botón. Cuando el usuario haga clic en él, onResetse ejecutará la función y se recargará la página actual. Si el error no está en el renderizado inicial, sino que surgió como resultado de una interacción particular, la aplicación volverá a funcionar como se esperaba.

¡Excelente! ¡Ahora puede recuperarse de los errores!

Manejo de errores en código asíncrono

Otra gran característica que ofrece react-error-boundary es el useErrorHandler()gancho. Esto le permite detectar errores que de otro modo no serían detectados por un límite de error React tradicional. Esto significa que puede aprovechar useErrorHandler()para interceptar errores durante las solicitudes de API, los controladores de eventos y más.

Suponga que una de las páginas de su aplicación React se basa en una llamada API crucial. Cuando esta API falla, desea generar un error y manejarlo en la capa de error. Dado que las llamadas a la API involucran código asíncrono, no puede hacerlo con un límite de error estándar. Gracias a useErrorhandler(), puede lograr el resultado deseado con:

import { useEffect } from "react";
import { useErrorHandler } from "react-error-boundary";

export default function MyPageComponent(props) {
    const handleError = useErrorHandler();

    useEffect(() => {
      // API call
      fetchSomeData().then(() => {
          // ...
      }).catch((e) => {
          // propagate the error to the error boundary
          handleError(e);
      })
    }, [])

    // return ...
}

De manera similar, puede adoptar useErrorhandler()en otras situaciones en las que los límites de error estándar se quedan cortos. Además, tenga en cuenta que useErrorhandler()propaga el error a cualquier límite de error, independientemente de si se implementa con react-error-boundaryo con el enfoque estándar.

Et voila! ¡Tu capa de manejo de errores de React es más poderosa que nunca!

Capa de manejo de errores en acción

Puede jugar con la aplicación React de demostración en vivo a continuación para ver cómo los dos enfoques se comportan de manera diferente:

Caja de arena abierta

Cuando deshabilita la capa de manejo de errores, el primer botón dará como resultado una página en blanco. No olvides que así es como React maneja los errores de forma nativa. Por otro lado, el error asíncrono se registrará pero no pasará nada más.

Si usa la capa de manejo de errores con un límite de error estándar, el primer botón lo llevará a la página de error. Sin embargo, el error asíncrono no se interceptará como se desea.

Con la react-error-boundarycapa de error habilitada, tanto los errores de sincronización como los asíncronos se interceptarán y manejarán como se desee. Además, al hacer clic en el botón "¡Intentar de nuevo!" botón, la página se recargará y la aplicación se recuperará del error.

Si desea explorar el código de la aplicación de demostración o probarlo localmente, clone el repositorio que admite este artículo con:

git clone "https://github.com/Tonel/error-handling-layer-react"

Luego, inicie la aplicación React en su máquina con:

cd "error-handling-layer-react"
npm install
npm run start

¡Excelente! ¡Ahora sabe todo lo que necesita saber sobre el manejo de errores en React!

Conclusión

En este tutorial, aprendió qué es una capa de manejo de errores, sus beneficios esenciales en el mundo frontend y cómo integrarla en una aplicación React. Una capa de manejo de errores no es más que un componente de límite de error que detecta y maneja los errores con gracia. Esto le permite consolidar la lógica de manejo de errores en una sola capa de la arquitectura de la aplicación React, lo que facilita la depuración. Como se muestra en un ejemplo completo, implementar una capa de manejo de errores en React es simple y toma solo unos minutos.

#react #reactjs