fix: Enhance error handling in API responses and update routing for planner service

Author: iouhssei

backend/devops/backend-services/security/modsecurity/default.conf

@@ -179,7 +179,13 @@ server {
 		proxy_pass http://friends_notifications_ws_upstream;
 	}
 
-	location /plan {
+	# SPA route must not use prefix /plan (would match /planner → wrong upstream).
+	location = /planner {
+		proxy_pass http://frontend_upstream;
+	}
+
+	# Planner API: /plan/generate, /plan/:id, /plan/:id/export/...
+	location /plan/ {
 		proxy_pass http://planner_upstream;
 	}
 

backend/src/planner-service/src/lib/gemini.js

@@ -45,10 +45,21 @@ async function generateTripPlan({
 
   const jsonMatch = text.match(/\{[\s\S]*\}/);
   if (!jsonMatch) {
-    throw new Error('Gemini returned no valid JSON in response');
+    const preview = String(text).slice(0, 280).replace(/\s+/g, ' ').trim();
+    throw new Error(
+      `Gemini returned no JSON object (expected a single {...} trip plan). Preview: ${preview}`,
+    );
   }
 
-  const plan = JSON.parse(jsonMatch[0]);
+  let plan;
+  try {
+    plan = JSON.parse(jsonMatch[0]);
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : String(e);
+    throw new Error(
+      `Gemini JSON was not parseable (${msg}). Snippet: ${jsonMatch[0].slice(0, 200)}`,
+    );
+  }
 
   if (!plan.days || !Array.isArray(plan.days)) {
     throw new Error('Gemini response missing required "days" array');

frontend/package-lock.json

@@ -13,7 +13,7 @@
     isolation: isolate;
 }
 
-/* Liquid glass header surface */
+/* Liquid glass header surface
 .home-nav::before {
     content: "";
     position: absolute;
@@ -41,7 +41,7 @@
     filter: blur(18px);
     opacity: 0.55;
     animation: homeNavSheen 10s ease-in-out infinite;
-}
+} */
 
 @keyframes homeNavSheen {
     0% { transform: translate3d(-4%, -2%, 0) rotate(-6deg); }
@@ -63,7 +63,7 @@
 
 /* Home video: lighter glass so the video reads through */
 .home-nav.home-nav--home-video::before {
-    background: rgba(10, 10, 12, 0.28);
+    /* background: rgba(10, 10, 12, 0.28); */
     border-bottom: 1px solid rgba(255, 255, 255, 0.10);
     box-shadow:
         0 10px 30px rgba(0, 0, 0, 0.30),

frontend/src/components/shared/HomeNavBar.css

@@ -21,7 +21,6 @@ const PATH_TO_NAV_ID: Record<string, string> = {
 };
 
 type HomeNavBarProps = {
-  /** Hide bottom glass pill on small viewports (e.g. active chat thread). */
   hideMobileGlassNav?: boolean;
 };
 

frontend/src/components/shared/HomeNavBar.tsx

@@ -5,7 +5,7 @@ import GlassSearchBar from "./GlassSearchBar";
 import GlassCalendar from "./GlassCalendar";
 import { useAuth } from "../../context/AuthContext";
 import "./TripPlannerBar.css";
-import { resolveGatewayUrl } from "@/lib/api";
+import { parseApiJson, resolveGatewayUrl } from "@/lib/api";
 
 const PLANNER_URL = resolveGatewayUrl(
   import.meta.env.VITE_PLANNER_URL as string | undefined,
@@ -165,7 +165,8 @@ function TripPlannerBar({
         }),
       });
 
-      const data = await res.json();
+      const raw = await parseApiJson(res);
+      const data = raw as { ok?: boolean; error?: { message?: string }; data?: TripPlan };
 
       if (!data.ok) {
         throw new Error(data.error?.message ?? "Failed to generate plan");

frontend/src/components/shared/TripPlannerBar.tsx

@@ -41,3 +41,30 @@ export async function ensureCsrfToken(): Promise<string> {
 export function clearCachedCsrfToken() {
   cachedCsrfToken = null;
 }
+
+/**
+ * Read response body as text and parse JSON. Avoids `res.json()` throwing
+ * `Unexpected token '<'` when nginx/upstream returns an HTML error page.
+ */
+export async function parseApiJson(res: Response): Promise<unknown> {
+  const text = await res.text();
+  const t = text.trim();
+  if (!t) return null;
+  const looksHtml = /^<!DOCTYPE/i.test(t) || /^<html/i.test(t) || t.startsWith('<h');
+  if (looksHtml) {
+    const hint =
+      res.status >= 500
+        ? ' Planner may be down or the gateway returned an error page.'
+        : ' Check that the URL hits the API (e.g. /plan/... under https://localhost), not the SPA.';
+    throw new Error(
+      `Server returned HTML instead of JSON (HTTP ${res.status}).${hint}`,
+    );
+  }
+  try {
+    return JSON.parse(t);
+  } catch {
+    throw new Error(
+      `Invalid JSON (HTTP ${res.status}): ${t.slice(0, 180)}${t.length > 180 ? '…' : ''}`,
+    );
+  }
+}

frontend/src/lib/api.ts

@@ -11,7 +11,7 @@ import { needsInterestsOnboarding } from "@/lib/interestsOnboarding";
 import { useTheme } from "@/context/ThemeContext";
 import BackArrow from "@/components/shared/BackArrow";
 import GoogleCalendar from "@/components/shared/GoogleCalendar";
-import { resolveGatewayUrl } from "@/lib/api";
+import { parseApiJson, resolveGatewayUrl } from "@/lib/api";
 
 const PLANNER_URL =
   resolveGatewayUrl(import.meta.env.VITE_PLANNER_URL as string | undefined);
@@ -400,9 +400,16 @@ function PlannerSidebar({
 
 async function parseJson(res: Response): Promise<{ ok: boolean; data?: unknown; error?: { message?: string } }> {
   try {
-    return await res.json();
-  } catch {
-    return { ok: false, error: { message: "Invalid response" } };
+    const raw = await parseApiJson(res);
+    if (raw == null) {
+      return { ok: false, error: { message: "Empty response from server" } };
+    }
+    return raw as { ok: boolean; data?: unknown; error?: { message?: string } };
+  } catch (e) {
+    return {
+      ok: false,
+      error: { message: e instanceof Error ? e.message : "Invalid response" },
+    };
   }
 }
 

frontend/src/pages/PlannerPage.tsx

@@ -4,7 +4,7 @@ import HomeNavBar from "@/components/shared/HomeNavBar";
 import { useAuth } from "@/context/AuthContext";
 import { AI_PLACES_URL, resolvePlaceImageUrl } from "@/hooks/useCityPlaces";
 import { cn } from "@/lib/utils";
-import { resolveGatewayUrl } from "@/lib/api";
+import { parseApiJson, resolveGatewayUrl } from "@/lib/api";
 import {
   MapPin,
   Star,
@@ -553,7 +553,7 @@ function SavedPlacesPage() {
     setTripsLoading(true);
     setTripsError(null);
     fetch(`${PLANNER_URL}/plans`, { credentials: "include" })
-      .then((r) => r.json())
+      .then(async (r) => (await parseApiJson(r)) as PlansEnvelope)
       .then((env: PlansEnvelope) => {
         if (!env.ok) throw new Error(env.error?.message ?? "Failed to load saved trips");
         setTrips(env.data ?? []);