¿Qué es un límite de error?

Al crear aplicaciones, los errores son inevitables. Pueden provenir de API, UI o de varios otros lugares.

Es muy importante manejar estos errores con elegancia y mantener una buena experiencia de usuario a pesar de estos errores.

Límite de error es una de esas formas de manejo de errores en React.

¿Cómo ayuda el límite de error?

Para entender esto, comprendamos la situación antes de la introducción del límite de error.

Antes de los límites de error, los errores que ocurrían dentro de los componentes eventualmente se propagaban y rompían la interfaz de usuario o mostraban la pantalla blanca.

Esto provocó una experiencia de usuario realmente mala.

Error Boundary nos ayuda a manejar dichos errores y mostrar una interfaz de usuario alternativa en lugar de romper la interfaz de usuario o la pantalla blanca mostrada.

¿Cómo utilizar el límite de error?

React v16 presentó oficialmente el límite de error.

Es un componente basado en clases que se puede utilizar para empaquetar su aplicación.

Acepta que se muestre una interfaz de usuario alternativa en caso de que su aplicación tenga errores o no, simplemente representa el componente secundario para reanudar el flujo normal de su aplicación.

Así es como la documentación de React recomienda usarlo,

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

¿Cuál es el problema con el límite de error de React?

No puede detectar errores que ocurren en,

• Controladores de eventos (estos errores deben manejarse con bloques try-catch)
• Código asincrónico (API, setTimeout, requestAnimationFrame, etc.)
• Renderizado del lado del servidor
• El error que ocurre en el propio Límite de error
• No funciona con componentes funcionales. Aunque podemos hacerlo funcionar con algunos cambios de código.
• No se pueden utilizar ganchos en su interior.

¿Cual es la solución?

Hay un paquete npm llamado reaccionar-error-límite que es un contenedor sobre el componente tradicional Error Boundary.

Al utilizar este paquete, podemos superar todos los problemas que enfrenta el componente tradicional de límite de error.

¿Cómo usarlo?

Puedes empaquetar toda tu aplicación o puedes empaquetar componentes individuales con .

La granularidad de la implementación depende de usted.

Entendamos cómo usarlo.

import React from 'react';
import { ErrorBoundary } from "react-error-boundary";

const App = () => {
return Something went wrong}>
/* rest of your component */

}

Este es el ejemplo más simple del uso de ErrorBoundary. Hay más en esta biblioteca.

Comprender la API de límite de error de reacción

Intentemos comprender la API con diferentes escenarios.

1. Quiero mostrar una interfaz de usuario alternativa genérica para errores en la aplicación

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const App = () => {
 return Something went wrong}>
 /* rest of your component */
 
 }

2. Quiero mostrar detalles de error específicos en mi componente alternativo

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

 import { useErrorBoundary } from "react-error-boundary";

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return 
 }

"use client";