Error Boundaries with Error Reporting

Illustrate the use of error boundaries in React for capturing errors in the UI, logging them, and showing a graceful fallback UI.
class ErrorBoundary extends React.Component {
  constructor(props) {
    this.state = { hasError: false, errorInfo: null };

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

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
    this.setState({ errorInfo });

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;

    return this.props.children;
This is a React component called ErrorBoundary that catches JavaScript errors anywhere in its child component tree, logs those errors, and displays a fallback UI instead of the component tree that crashed. componentDidCatch is used to log errors.
function logErrorToMyService(error, errorInfo) {
  // Send error report to an error-reporting service
  console.error('Logging error:', error, errorInfo);
  // Replace with your error reporting logic, e.g. integration with external services
This is a function to send error reports to an error-reporting service. Replace the console.error with your actual error reporting logic.
function MyComponent() {
  return (
      <h1>My App</h1>
        <MyWidget />

function MyWidget() {
  // This will throw an error when rendered!
  throw new Error('I crashed!');
This function represents a React component that nests a widget inside an ErrorBoundary. If MyWidget throws an error, ErrorBoundary will catch it and display a fallback UI.
.errorBoundaryFallback {
  color: red;
  font-size: 20px;
  padding: 15px;
CSS styles for the ErrorBoundary fallback UI, giving it a red color and larger font size for better visibility.