ErrorBoundary Example

App.jsx

import { Suspense, lazy } from "react";
import { ErrorBoundary, ErrorMessage } from "./Counter";
import "./App.css";

const Counter = lazy(() => import("./Counter"));

function App() {
  return (
    <div className="App">
      <Suspense fallback={<p>Loading...</p>}>
        <ErrorBoundary fallback={<ErrorMessage />}>
          <Counter />
        </ErrorBoundary>
      </Suspense>
    </div>
  );
}

export default App;

Counter.jsx

import { useState, useEffect, Component } from "react";

export class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

export function ErrorMessage() {
  return <p style={{ border: "1px solid red" }}>Something went wrong</p>;
}

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count === 3) {
      throw new Error("Counter reached 3");
    }
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}