Managing Network Failures in React Handlers with Custom Error Instances

class ApiTimeoutError extends Error {
  constructor(message = 'Request timed out') {
    super(message);
    this.name = 'ApiTimeoutError';
  }
}
 
function UserProfileViewer({ userId }) {
  const [userData, setUserData] = React.useState(null);
  const [errorType, setErrorType] = React.useState(null);
 
  const handleFetchProfile = async () => {
    setErrorType(null);
    try {
      const response = await fetch(`/api/users/${userId}`);
      if (!response.ok) {
        throw new ApiTimeoutError('Failed to retrieve user profile.');
      }
      const data = await response.json();
      setUserData(data);
    } catch (err) {
      if (err instanceof ApiTimeoutError) {
        setErrorType('timeout');
      } else {
        setErrorType('generic');
      }
    }
  };
 
  return (
    <div>
      <button onClick={handleFetchProfile}>Load Profile</button>
      {errorType === 'timeout' && <p role="alert">Timeout: Server took too long.</p>}
      {errorType === 'generic' && <p role="alert">Unexpected network error occurred.</p>}
      {userData && <div>Welcome, {userData.name}</div>}
    </div>
  );
}