10. Obsługa błędów w React

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

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

  componentDidCatch(error, errorInfo) {
    // Loguj błąd do serwisu monitorowania
    console.error('Caught by ErrorBoundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-fallback">
          <h2>Coś poszło nie tak</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false })}>
            Spróbuj ponownie
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Użycie
function App() {
  return (
    <ErrorBoundary>
      <UserProfile />
      <ErrorBoundary>
        <ProductList />  {/* Błąd tu nie psuje UserProfile */}
</ErrorBoundary>
    </ErrorBoundary>
  );
}

function DataComponent({ url }) {
  const [state, setState] = useState({ loading: true, error: null, data: null });

  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(data => setState({ loading: false, error: null, data }))
      .catch(error => setState({ loading: false, error: error.message, data: null }));
  }, [url]);

  if (state.loading) return <Spinner />;
  if (state.error) return <ErrorMessage message={state.error} />;
  return <DataDisplay data={state.data} />;
}