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} />}
    </>
  );
}

• ID: directory-map-location.location-search.geolocation-permission

• Severity: critical

• What to look for: Test the "near me" or "find nearby" feature. Grant location permission and verify it works. Then test with permission denied. Check whether the app shows an error message, offers an address input fallback, or disables the feature gracefully (not crashes).

• Pass criteria: Clicking "near me" requests permission via navigator.geolocation.getCurrentPosition(). If granted, the search works. If denied, the app shows a clear message within no more than 3 seconds and offers at least 1 alternative (e.g., "Enter a zip code or address instead"). Enumerate all error paths (denied, unavailable, timeout) and confirm each has a user-facing fallback. No crashes or silent failures. On pass, report the count of error paths with fallbacks vs. total error paths.

• Fail criteria: "Near me" button is missing or broken. Permission denial causes a crash, silent failure, or confusing error. No fallback offered. Catching the error but showing no message does not count as pass.

• Skip (N/A) when: No "near me" or location-based search feature exists.

• Detail on fail: "Clicking 'Find Near Me' crashes the app when location permission is denied" or "Geolocation permission request never shown; feature silently fails"

• Remediation: Implement graceful geolocation with fallback:

  function NearMeButton() {
    const [error, setError] = useState<string | null>(null);
  
    const handleNearMe = () => {
      if (!navigator.geolocation) {
        setError('Geolocation is not supported in this browser');
        return;
      }
  
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          searchListings(pos.coords.latitude, pos.coords.longitude, 5);
        },
        (err) => {
          if (err.code === 1) {
            setError('Location access denied. Enter a zip code or address instead.');
          } else {
            setError('Unable to get location. Please try again.');
          }
          showAddressInput();
        }
      );
    };
  
    return (
      <>
        <button onClick={handleNearMe}>Find Nearby</button>
        {error && <Alert variant="warning">{error}</Alert>}
      </>
    );
  }