7 Best Practices of React Exception Handling YOU Should Know

Error Handling in ReactJS
Content
import React, { useState, useEffect } from ‘react’;
// ErrorBoundary functional component to catch errors
const ErrorBoundary = ({ children }) => {
const [hasError, setHasError] = useState(false);
useEffect(() => {
const handleErrors = (error, errorInfo) => {
// You can log the error to a service like Sentry or display a user-friendly message
console.error(‘Error caught by ErrorBoundary:’, error, errorInfo);
setHasError(true);
};
// Attach the error handler to the global error event window.addEventListener('error', handleErrors); return () => { // Remove the error handler when the component unmounts window.removeEventListener('error', handleErrors); };
}, []);
if (hasError) {
return
Something went wrong. Please try again later.
;
}
return children;
};
// Your functional component wrapped with the ErrorBoundary
const MyComponent = () => {
const [count, setCount] = useState(0);
// Simulate an error by dividing by zero
if (count === 5) {
throw new Error(‘This is a simulated error!’);
}
return (

Counter: {count}
setCount(count + 1)}>Increment

);
};
export default MyComponent;
  • ErrorBoundary is a functional component that uses the useEffect hook to attach and remove a global error handler to catch errors.
  • If an error occurs in the child components (e.g., when the counter reaches 5), it will be caught by the global error handler, and an error message will be displayed instead of crashing the entire app.
import React, { useState } from ‘react’;
const MyComponent = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const fetchData = async () => {
try {
// Simulate an API call that may throw an error
const response = await fetch(‘https://api.example.com/data’);
if (!response.ok) {
throw new Error(‘Failed to fetch data’);
}
const result = await response.json(); setData(result); } catch (error) { // Handle the error and update the state setError(error.message); }
};
return (


Data Fetching Example

Fetch Data

{error && <div style={{ color: 'red' }}>{error}</div>} {data && ( <div> <h2>Received Data:</h2> <pre>{JSON.stringify(data, null, 2)}</pre> </div> )} </div>
);
};
export default MyComponent;
  • fetchData is an asynchronous function that simulates fetching data from an API using the fetch function.
  • The try block contains the code that may throw an error, such as checking the response status and parsing JSON.
  • If any error occurs during the try block, the catch block is executed, and the error is caught and handled. In this case, the error message is stored in the error state variable.
  • The component renders a button to trigger the data fetching, and it displays the error message or the fetched data based on the state.
import React, { useState } from ‘react’;
const MyComponent = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const fetchData = () => {
fetch(‘https://api.example.com/data’)
.then((response) => {
if (!response.ok) {
throw new Error(‘Failed to fetch data’);
}
return response.json();
})
.then((result) => {
// Process the data
setData(result);
})
.catch((error) => {
// Handle errors in the promise chain
setError(error.message);
});
};
return (


Data Fetching Example

Fetch Data

{error && <div style={{ color: 'red' }}>{error}</div>} {data && ( <div> <h2>Received Data:</h2> <pre>{JSON.stringify(data, null, 2)}</pre> </div> )} </div>
);
};
export default MyComponent;
  • The fetchData function uses the fetch API to make an asynchronous call to ‘https://api.example.com/data’.
  • The .then method is used to handle the successful response and process the JSON data.
  • The .catch method is used to handle any errors that may occur during the asynchronous operation. If the response status is not okay, an error is thrown and caught in the catch block. The error message is then stored in the error state variable.
  • The component renders a button to trigger the data fetching, and it displays the error message or the fetched data based on the state.
Daniyal Habib

Daniyal Habib

MERN Stack Developer
Share

Suggested Articles