Near me triggers geolocation API with graceful fallback on denial

A "near me" feature that crashes or silently fails when location permission is denied provides no usable fallback and locks out users who decline location sharing — a growing segment due to increased browser permission fatigue. ISO 25010:2011 reliability requires that systems handle expected failure conditions gracefully. From a product standpoint, permission denial is not an error state; it is a normal user choice. A crash or blank screen on denial destroys trust at exactly the moment a user is evaluating whether to engage with your directory. The feature is marked critical because it gates the primary location-based use case of the entire product.

Handle all three geolocation error codes explicitly and offer an address input fallback immediately on denial. Do not rely on the browser's default error dialog.

function NearMeButton() {
  const [error, setError] = useState<string | null>(null);
  const [showAddressInput, setShowAddressInput] = useState(false);

  const handleNearMe = () => {
    if (!navigator.geolocation) {
      setError('Your browser does not support location detection.');
      setShowAddressInput(true);
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (pos) => searchListings(pos.coords.latitude, pos.coords.longitude),
      (err) => {
        const messages: Record<number, string> = {
          1: 'Location access denied. Enter a zip code or address instead.',
          2: 'Location unavailable. Enter a zip code or address instead.',
          3: 'Location request timed out. Enter a zip code or address instead.',
        };
        setError(messages[err.code] ?? 'Could not detect location.');
        setShowAddressInput(true);
      },
      { timeout: 8000 }
    );
  };

  return (
    <>
      <button onClick={handleNearMe}>Find Nearby</button>
      {error && <p role="alert">{error}</p>}
      {showAddressInput && <AddressFallbackInput onSubmit={searchListings} />}
    </>
  );
}