How do React Error Boundaries work, and how do you handle errors in Server Components?

Error Boundary isolates failures

class ErrorBoundary extends Component {
  state = { hasError: false, error: null };
  static getDerivedStateFromError(error) { return { hasError: true, error }; }
  render() {
    if (this.state.hasError) return <ErrorFallback error={this.state.error} reset={() => this.setState({ hasError: false })} />;
    return this.props.children;
  }
}

// Each widget isolated
<ErrorBoundary><StatsWidget /></ErrorBoundary>
<ErrorBoundary><ChartWidget /></ErrorBoundary>

Next.js: error.tsx catches route errors

// app/dashboard/error.tsx
"use client";
export default function Error({ error, reset }) {
  return <div><h2>Something went wrong</h2><button onClick={reset}>Try again</button></div>;
}