Abfangen und Anzeigen von asynchronen Fetch-Fehlern im Komponenten-State

import { useState, useEffect } from 'react';
 
export function SafeDataLoader() {
  const [errorMessage, setErrorMessage] = useState(null);
 
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
      } catch (err) {
        setErrorMessage(err.message);
      }
    }
 
    fetchData();
  }, []);
 
  if (errorMessage) {
    return <p role="alert">Error: {errorMessage}</p>;
  }
  return <p>Data loaded successfully.</p>;
}