Skip to main content

ErrorBoundary

Location: src/components/ErrorBoundary.jsx

Overview​

ErrorBoundary is a React class component that catches JavaScript errors during rendering, lifecycle methods, and constructors of its child component tree. When an error occurs, it displays a friendly fallback UI with a page reload button instead of crashing the entire application.

This is the top-level error safety net for CommonPlace. It logs caught errors to the console via componentDidCatch.

Props​

PropTypeRequiredDefaultDescription
childrenReactNodeYes--The component tree to wrap with error protection

Key Behaviors​

  • Error Capture: Uses getDerivedStateFromError to set error state and componentDidCatch to log the error and error info.
  • Fallback UI: Renders a centered message ("Something went wrong") with a "Reload Page" button that calls window.location.reload().
  • Pass-through: When no error has occurred, renders this.props.children unchanged.

Usage​

import ErrorBoundary from '@/components/ErrorBoundary';

<ErrorBoundary>
  <App />
</ErrorBoundary>
  • This component wraps the entire application tree in main.jsx.

Last updated: 2026-02-07