Límites de error de React.js

Límites de error: los límites de error básicamente proporcionan algún tipo de límite o verificación de errores. Son componentes de React que se utilizan para manejar errores de JavaScript en su árbol de componentes secundarios.

Reaccione los componentes que detectan errores de JavaScript en cualquier parte de su árbol de componentes secundarios, registre esos errores y muestre una interfaz de usuario alternativa. Detecta errores durante el renderizado, en los métodos del ciclo de vida, etc.

Motivo de uso: supongamos que hay un error en JavaScript dentro del componente, entonces solía corromper el estado interno de React y hacer que emitiera errores crípticos. Los límites de error ayudan a eliminar estos errores y muestran una interfaz de usuario alternativa en su lugar (lo que significa que se muestra un error de que algo se rompió en el código).

Principio de funcionamiento: el límite de error funciona casi de manera similar a catch en JavaScript. Supongamos que se encuentra un error, lo que sucede es que tan pronto como hay una parte de JavaScript rota en los métodos de procesamiento o ciclo de vida, intenta encontrar la etiqueta de límites de error más cercana.

Creando la aplicación React: 

Paso 1 : Cree una aplicación React usando el siguiente comando:

create-react-app error-boundary

Paso 2: después de crear el directorio de límite de error, muévase a él.

cd error-boundary

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. 

Nombre de archivo: App.js

import React from "react";
 
class ErrorBoundary extends React.Component {
 
  // Constructor for initializing Variables etc in a state
  // Just similar to initial line of useState if you are familiar
  // with Functional Components
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }
 
  // This method is called if any error is encountered
  componentDidCatch(error, errorInfo) {
 
    // Catch errors in any components below and
    // re-render with error message
    this.setState({
      error: error,
      errorInfo: errorInfo
    })
 
    // You can also log error messages to an error
    // reporting service here
  }
 
  // This will render this component wherever called
  render() {
    if (this.state.errorInfo) {
 
      // Error path
      return (
        <div>
          <h2>An Error Has Occurred</h2>
          <details>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }
    // Normally, just render children, i.e. in
    // case no error is Found
    return this.props.children;
  }
}
 
 
// This is a component for Counter,Named Counter
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick() {
    this.setState(({ counter }) => ({
      counter: counter + 1
    }));
  }
 
  render() {
    if (this.state.counter === 3) {
 
      // Simulate a JS error
      throw new Error('Crashed!!!!');
    }
    return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
  }
}
 
function App() {
  return (
    <div style={{ marginLeft: '30px', marginTop: '50px' }}>
      <div style={{ textAlign: "center" }}>
        <h1>
          <strong>To see the working of Error boundaries
           click on the Counters to increase the value
          </strong>
        </h1>
         
         
 
<p>
          Program is made such a way that as soon as the counter
          reaches the value of 3, Error boundaries will throw an
          error.
        </p>
 
 
 
      </div>
      <hr style={{ width: "500px" }} />
      <ErrorBoundary>
         
         
 
<p>
          These two counters are inside the same error boundary.
          If one crashes, then the effect will be done on both
          as the error boundary will replace both of them.
        </p>
 
 
 
        <Counter />
        <Counter />
      </ErrorBoundary>
      <hr style={{ width: "500px" }} />
       
       
 
<p>
        These two counters are each inside of their
        own error boundary. So if one crashes, the
        other is not affected.
      </p>
 
 
 
      <ErrorBoundary><Counter /></ErrorBoundary>
      <ErrorBoundary><Counter /></ErrorBoundary>
    </div>
  );
}
 
export default App;

 
Nombre de archivo: index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 
reportWebVitals();

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto. 

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida. 

Explicación: el código anterior está escrito de tal manera que si el contador alcanza el valor de 3, los límites de error generarán un error.

Como se muestra en el código anterior, se incluyen dos contadores en el mismo componente de límite de error a través del cual, si alguno de ellos causa algún tipo de error al alcanzar el valor de 3, en lugar de representar cualquiera de ellos, se proporcionará un mensaje detallado en la pantalla.

En el otro extremo, debajo, ambos contadores están incluidos en el componente Límites de error individuales, por lo que lo que sucede es que solo el contador que ha causado el error no se procesa, mientras que los demás se procesan normalmente.

Los límites de error no detectan errores para los siguientes eventos:

• Controladores de eventos
• Código asíncrono (Ejemplo de cuadro de animación de solicitud, etc.)
• Representación del lado del servidor
• Los errores se lanzan en el propio límite de error (en lugar de sus hijos)

Try/Catch: una pregunta que podría estar haciéndole cosquillas en la mente es que, dado que Error Boundaries funciona como Catch, ¿por qué no simplemente probar/atrapar y por qué debería aprender este nuevo concepto? Bueno, la respuesta es try/catch se usa con código imperativo, pero como sabemos, React es de naturaleza declarativa, y los límites de error ayudan a preservar la naturaleza declarativa de React.

Cambios no detectados: dado que no detecta errores en algunos casos particulares, ¿qué pasa con los errores que quedaron sin verificar o no detectados? A partir de React 16, los errores que no fueron detectados por ningún límite de error resultarán en el desmontaje de todo el árbol de componentes de React. Esto significa que después de migrar a React 16 y usar Límites de error, podrá brindar una mejor experiencia de usuario, ya que ahora los usuarios podrán ver el motivo antes de un bloqueo inesperado, en lugar de solo adivinar.

Componente Stack Trace: React 16 imprime todos los errores que ocurrieron, proporciona el componente Stack Trace . Esto ayuda al usuario a identificar el punto donde se ha producido un error.

Oyentes de eventos: los límites de error no verifican los errores en los controladores de eventos, por lo que esto debería contarse como una especie de limitación de los límites de error. debido a ellos, React simplemente lo mostrará en la pantalla. 

Límites de error:

• Solo se puede usar con componentes de clase.
• No detecta errores para los controladores de eventos, el código asincrónico (cuadro de animación de solicitud de ejemplo), la representación del lado del servidor y los errores se arrojan en el propio límite de error (en lugar de sus elementos secundarios).
• Está disponible solo en React 16 o posterior.

Referencia: https://reactjs.org/docs/error-boundaries.html