From e2cfe3b7844bdcc0219262a4084c72c228ba63be Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 2 Aug 2026 16:58:56 +0000 Subject: [PATCH] Surface actual HTTP status/error from /api/gmaps/key on the frontend MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fetch() never rejects on non-2xx status, so 'r.json()' on a 403 (Forbidden — origin mismatch) or 503 (key not configured) response silently parsed the error body without checking r.ok. The catch block then always logged the same generic 'No Google Maps API key returned' regardless of the real cause, making it impossible to diagnose from the browser console alone. Now checks r.ok/r.status and surfaces the actual error message and HTTP status in both the console error and the on-page banner. --- backend/public/app.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/backend/public/app.js b/backend/public/app.js index c24bc837..696c80a1 100644 --- a/backend/public/app.js +++ b/backend/public/app.js @@ -397,9 +397,11 @@ document.addEventListener('DOMContentLoaded', function () { }); fetch('/api/gmaps/key') - .then(r => r.json()) - .then(data => { - if (!data.key) throw new Error('No Google Maps API key returned'); + .then(r => r.json().then(data => ({ ok: r.ok, status: r.status, data }))) + .then(({ ok, status, data }) => { + if (!ok || !data.key) { + throw new Error(`${data.error || 'No Google Maps API key returned'} (HTTP ${status})`); + } const script = document.createElement('script'); script.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(data.key)}&callback=initMap&loading=async`; script.async = true; @@ -409,6 +411,6 @@ document.addEventListener('DOMContentLoaded', function () { }) .catch(err => { console.error('Failed to load Google Maps:', err); - showMapLoadError('Map unavailable: GOOGLE_MAPS_API_KEY is not configured.'); + showMapLoadError(`Map unavailable: ${err.message}`); }); });