ReactJS - componentDidCatch() Method

---

---

React is a popular JavaScript library for creating user interfaces. And while creating the React applications we may face errors in our code. When these errors occur in React components, handling them properly can be a difficult task. This is where the componentDidCatch function can be used. So, componentDidCatch catches errors in our components and prevents our entire app from crashing. So we will see how it works with the help of an example.

What is componentDidCatch?

componentDidCatch is a function that can be defined in React components. Its major function is to detect errors in any of the component's child elements, no matter how deep down the component tree that is located.

When an error happens in any child component, React will call componentDidCatch. It gives us a chance to respond to the error.

One common use of componentDidCatch is to log the error. In production, this can be sent to an error reporting service, allowing us to track and fix issues.

Syntax

componentDidCatch(error, info)

Parameters

There are two parameters used in componentDidCatch function: error and info.

• error − This is the error that was thrown. It is commonly an instance of the Error object, but it could also be strings or null.

• info − This is data regarding the error. It provides a stack trace that indicates where the issue occurred and which components were involved.

Return Value

The componentDidCatch function does not return anything. It is used mainly to tell errors not to produce results.

How to use it?

We will create an app and use componentDidCatch to show the usage of it −

In this app, we have a MyComponent that knowingly throws an error in its componentDidMount function to get an error. We will use MyComponent in an ErrorBoundary, which will catch and handle any errors that occur in MyComponent. If an error occurs in MyComponent, the ErrorBoundary will display a custom fallback UI with the error message.

Examples

Example

import React from 'react';

class MyComponent extends React.Component {
   constructor(props) {
      super(props);
      this.state = { data: null };
   }   
   componentDidMount() {
      // Try to parse invalid JSON to evoke an error.
      try {
         JSON.parse("This is not valid JSON");
      } catch (error) {
         throw new Error("Something went wrong in MyComponent!");
      }
   }   
   render() {
      
      // Render the component as usual
      return <div>{this.state.data}</div>;
   }
}
class ErrorBoundary extends React.Component {
   constructor(props) {
      super(props);
      this.state = { hasError: false, error: null };
   }
   
   static getDerivedStateFromError(error) {
      
      // Update state to show a fallback UI and store the error
      return { hasError: true, error };
   }   
   componentDidCatch(error, info) {
      console.error("Error caught by ErrorBoundary:", error);
      console.error("Component Stack:", info.componentStack);
   }   
   render() {
   if (this.state.hasError) {
      
      // Render a custom fallback UI with the error message
      return (
         <div>
            <h2>Something went wrong</h2>
            <p>{this.state.error.message}</p>
         </div>
      );
   }
   
   // Render the child components if no error found
   return this.props.children;
   }
}
function App() {
   return (
      <div>
         <h1>My App</h1>
         <ErrorBoundary>
         <MyComponent />
         </ErrorBoundary>
      </div>
   );
}

export default App;

Output

Example − Dynamic Form with Error Handling

This app shows a dynamic form where users can input data into fields. If there is an error during form data processing, the componentDidCatch method logs the error and informs the user about the issue.

import React, { Component } from 'react';

class DynamicForm extends Component {
   constructor(props) {
      super(props);
      this.state = {
         formData: {},
         hasError: false,
      };
   }   
   handleInputChange = (field, value) => {
      try {
         // Logic to handle dynamic form data
         this.setState(prevState => ({
            formData: {
               ...prevState.formData,
               [field]: value,
            },
         }));
      } catch (error) {
         // Handle errors
         this.setState({ hasError: true });
      }
   };   
   handleButtonClick = () => {
      
      // Sending form data to a server
      try {
         
         // Logic to send data to the server
         console.log('Sending form data:', this.state.formData);
      } catch (error) {
         
         // Handle errors in sending data
         console.error('Error sending form data:', error);
         this.setState({ hasError: true });
      }
   };   
   componentDidCatch(error, info) {
      console.error('Form Error:', error, info);
      this.setState({ hasError: true });
   }   
   render() {
      if (this.state.hasError) {
         return <div>Sorry, there was an issue with the form.</div>;
      }
      
      return (
         <div>
            <h1>Dynamic Form</h1>
            <input
               type="text"
               placeholder="Field 1"
               onChange={e => this.handleInputChange('field1', e.target.value)}
            />
            <input
               type="text"
               placeholder="Field 2"
               onChange={e => this.handleInputChange('field2', e.target.value)}
            />
            <button onClick={this.handleButtonClick}>Send Data</button>
         </div>
      );
   }
}

export default DynamicForm;

Output

When the user clicks the "Send Data" button, the form data will be logged to the console. We can replace the console.log statement in the handleButtonClick method with our actual logic for sending data to the server using fetch.

Notes

• In the past, developers used setState inside componentDidCatch to change the user interface and display error warnings. This method is now considered outdated. For handling errors, it is better to use static getDerivedStateFromError.

• In development and production, React behaves differently. In development, componentDidCatch will catch errors and send them to the browser's global error handlers. They will not bubble up in production, so we must explicitly catch them with componentDidCatch.

Summary

componentDidCatch is a helpful React feature that allows us to manage errors in our components properly. It is like having a safety net that records errors and allows us to log them or display error messages. Just keep in mind that it should be used in combination with getDerivedStateFromError and that there are changes between development and production settings.