Why do React Error Boundaries fail to catch errors in Server Components and how should developers handle RSC errors?

// app/error.js - Catches RSC errors (server-side)
export default function Error({ error, reset }) {
  logError(error); // Server-side logging
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}
// Client Component with Error Boundary
'use client';
class ClientErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  
  render() {
    if (this.state.hasError) {
      return <ErrorFallback error={this.state.error} />;
    }
    return this.props.children;
  }
}

// Server Component (no Error Boundary support)
async function ServerData() {
  try {
    const data = await db.query('SELECT * FROM users');
    return <UserList users={data} />;
  } catch (error) {
    // Manual try/catch required
    return <ErrorMessage>Failed to load users</ErrorMessage>;
  }
}