Método ReactJS componenteDidCatch()

El método componentDidCatch() se invoca si se produce algún error durante la fase de representación de cualquier método de ciclo de vida o cualquier componente secundario. Este método se usa para implementar los límites de error para la aplicación React. Se llama durante la fase de confirmación, por lo que, a diferencia de getDerivedStateFromError(), que se llamó durante la fase de procesamiento, los efectos secundarios están permitidos en este método. Este método también se utiliza para registrar errores.

Sintaxis:

componentDidCatch(error, info)

Parámetros: acepta dos parámetros, es decir, error e información, como se describe a continuación:

• error: Es el error que arrojó el componente descendiente.
• info: Almacena el rastro de componenteStack de qué componente ha arrojado este error.

Creando la aplicación React:

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

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: Programa para demostrar el uso del método componentDidCatch().

Nombre de archivo: App.js:  

import React, { Component } from 'react';
 
export default class App extends Component {
  // Initializing the state
  state = {
    error: false,
  };
 
  componentDidCatch(error) {
    // Changing the state to true
    // if some error occurs
    this.setState({
      error: true
    });
  }
 
  render() {
    return (
      <React.StrictMode>
        <div>
          {this.state.error ? <div>Some error</div> : <GFGComponent />}
        </div>
      </React.StrictMode>
    );
  }
}
 
class GFGComponent extends Component {
 
  // GFGComponent throws error as state of
  // GFGCompnonent is not defined
   
  render() {
    return <h1>{this.state.heading}</h1>;
  }
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

producción

Referencia: https://reactjs.org/docs/react-component.html#componentdidcatch