fix: harden frontend against API errors and rate limiting (#265)

ehamwey · web-flow · commit 9753a6a56d9e · 2025-12-17T22:16:26.000-05:00
- Add type guards to validate API responses are arrays before use
- Throw errors on HTTP failures to enable react-query retry (3x with exponential backoff)
- Preserve previous valid data when refetches fail (useState only updates on success)
- Make prerender.ts handle missing/empty station data gracefully
- Add validation for prediction responses
diff --git a/src/hooks/useMbtaApi.ts b/src/hooks/useMbtaApi.ts
@@ -24,10 +24,23 @@ export interface MBTAApiReady {
 
 export type MBTAApiResponse = MBTAApi | MBTAApiReady;
 
+// Helper to validate array responses from API
+const isValidArray = <T>(data: unknown): data is T[] => {
+    return Array.isArray(data);
+};
+
 // if isFirstRequest is true, get train positions from intial request data JSON
 // if isFirstRequest is false, makes request for new train positions through backend server via chalice route defined in app.py
-const getTrainPositions = (routes: string[]): Promise<Train[]> => {
-    return fetch(`${APP_DATA_BASE_PATH}/trains/${routes.join(',')}`).then((res) => res.json());
+const getTrainPositions = async (routes: string[]): Promise<Train[]> => {
+    const res = await fetch(`${APP_DATA_BASE_PATH}/trains/${routes.join(',')}`);
+    if (!res.ok) {
+        throw new Error(`Failed to fetch trains: ${res.status} ${res.statusText}`);
+    }
+    const data = await res.json();
+    if (!isValidArray<Train>(data)) {
+        throw new Error(`Invalid train data received: ${JSON.stringify(data).slice(0, 100)}`);
+    }
+    return data;
 };
 
 const filterNew = (trains: Train[]) => {
@@ -59,12 +72,28 @@ const filterTrains = (trains: Train[], vehiclesAge: VehicleCategory) => {
     return trains;
 };
 
-const getStationsForRoute = (route: string) => {
-    return fetch(`${APP_DATA_BASE_PATH}/stops/${route}`).then((res) => res.json());
+const getStationsForRoute = async (route: string): Promise<Station[]> => {
+    const res = await fetch(`${APP_DATA_BASE_PATH}/stops/${route}`);
+    if (!res.ok) {
+        throw new Error(`Failed to fetch stations for ${route}: ${res.status} ${res.statusText}`);
+    }
+    const data = await res.json();
+    if (!isValidArray<Station>(data)) {
+        throw new Error(`Invalid station data for ${route}: ${JSON.stringify(data).slice(0, 100)}`);
+    }
+    return data;
 };
 
-const getRoutesInfo = (routes: string[]) => {
-    return fetch(`${APP_DATA_BASE_PATH}/routes/${routes.join(',')}`).then((res) => res.json());
+const getRoutesInfo = async (routes: string[]): Promise<Route[]> => {
+    const res = await fetch(`${APP_DATA_BASE_PATH}/routes/${routes.join(',')}`);
+    if (!res.ok) {
+        throw new Error(`Failed to fetch routes info: ${res.status} ${res.statusText}`);
+    }
+    const data = await res.json();
+    if (!isValidArray<Route>(data)) {
+        throw new Error(`Invalid routes info received: ${JSON.stringify(data).slice(0, 100)}`);
+    }
+    return data;
 };
 
 export const useMbtaApi = (
@@ -88,6 +117,8 @@ export const useMbtaApi = (
         enabled: !!routeNames,
         staleTime: FIFTEEN_SECONDS,
         refetchInterval: FIFTEEN_SECONDS,
+        retry: 3,
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
     });
 
     const trainsByRoute = useMemo(() => {
@@ -108,40 +139,43 @@ export const useMbtaApi = (
 
     useQuery({
         queryKey: ['getStations', routeNamesKey],
-        queryFn: () => {
+        queryFn: async () => {
             const nextStopsByRoute: Record<string, Station[]> = {};
-            return Promise.all(
-                routeNames.map((routeName) =>
-                    getStationsForRoute(routeName).then((data) => {
-                        nextStopsByRoute[routeName] = data;
-                    })
-                )
-            ).then(() => {
-                setStationsByRoute(nextStopsByRoute);
-                return nextStopsByRoute;
-            });
+            await Promise.all(
+                routeNames.map(async (routeName) => {
+                    const data = await getStationsForRoute(routeName);
+                    nextStopsByRoute[routeName] = data;
+                })
+            );
+            // Only update state on successful fetch
+            setStationsByRoute(nextStopsByRoute);
+            return nextStopsByRoute;
         },
         // if routeNames is empty, don't make the request
         enabled: !!routeNames && routeNames.length > 0,
         staleTime: ONE_DAY,
+        retry: 3,
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
     });
 
     useQuery({
         queryKey: ['getRoutesInfo', routeNamesKey],
-        queryFn: () => {
+        queryFn: async () => {
             const nextRoutesInfo: Record<string, Route> = {};
-            return getRoutesInfo(routeNames).then((routes: Route[]) => {
-                routes.forEach((route: Route) => {
-                    if (route.id) {
-                        nextRoutesInfo[route.id] = route;
-                    }
-                });
-                setRoutesInfoByRoute(nextRoutesInfo);
-                return nextRoutesInfo;
+            const routes = await getRoutesInfo(routeNames);
+            routes.forEach((route: Route) => {
+                if (route.id) {
+                    nextRoutesInfo[route.id] = route;
+                }
             });
+            // Only update state on successful fetch
+            setRoutesInfoByRoute(nextRoutesInfo);
+            return nextRoutesInfo;
         },
         enabled: !!routeNames && routeNames.length > 0,
         staleTime: ONE_DAY,
+        retry: 3,
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
     });
 
     const isReady =
diff --git a/src/hooks/usePrediction.ts b/src/hooks/usePrediction.ts
@@ -1,23 +1,40 @@
 import { APP_DATA_BASE_PATH, FIFTEEN_SECONDS } from '../constants';
+import { Prediction } from '../types';
 import { useQuery } from '@tanstack/react-query';
 
-const getPrediction = (tripId: string | null, stopId: string) => {
+const isValidPrediction = (data: unknown): data is Prediction => {
+    return (
+        data !== null &&
+        typeof data === 'object' &&
+        'departure_time' in data &&
+        data.departure_time !== 'null'
+    );
+};
+
+const getPrediction = async (tripId: string | null, stopId: string): Promise<Prediction | null> => {
     if (!tripId) {
-        return Promise.resolve(null);
+        return null;
     }
 
-    return fetch(`${APP_DATA_BASE_PATH}/predictions/${tripId}/${stopId}`).then((res) => {
-        return res.json();
-    });
+    const res = await fetch(`${APP_DATA_BASE_PATH}/predictions/${tripId}/${stopId}`);
+    if (!res.ok) {
+        return null;
+    }
+    const data = await res.json();
+    if (!isValidPrediction(data)) {
+        // Prediction may legitimately not exist, so just return null without error
+        return null;
+    }
+    return data;
 };
 
-export const usePrediction = (tripId: string | null, stopId: string) => {
+export const usePrediction = (tripId: string | null, stopId: string): Prediction | null => {
     const { data: prediction } = useQuery({
         queryKey: ['getPrediction', tripId, stopId],
         queryFn: () => getPrediction(tripId, stopId),
         enabled: !!tripId,
         staleTime: FIFTEEN_SECONDS,
     });
 
-    return prediction;
+    return prediction ?? null;
 };
diff --git a/src/prerender.ts b/src/prerender.ts
@@ -20,27 +20,21 @@ const getStationIdsWithinRange = (stationRange: Shape, stationIds: string[] | un
         return stations;
     }
     if (!start || !end) {
-        throw new Error(
-            'Improper use of {start, end} properties for stationRange. ' +
-                'These properties are required if stations property is not defined.'
-        );
+        return [];
     }
 
-    const startIndex = stationIds?.indexOf(start);
-    const endIndex = stationIds?.indexOf(end);
-    if (startIndex === -1 || endIndex === -1) {
-        throw new Error(
-            `Improper use of {start=${start}, end=${end}} properties for stationRange. ` +
-                'These stations do not exist on retrieved GTFS route -- ' +
-                'consider using stationRange.stations property instead.'
-        );
+    // If stationIds is empty or undefined, return empty array gracefully
+    if (!stationIds || stationIds.length === 0) {
+        return [];
     }
 
-    if (endIndex !== undefined) {
-        return stationIds?.slice(startIndex, endIndex + 1);
-    } else {
-        throw new Error(`End station ${end} not found in stationIds.`);
+    const startIndex = stationIds.indexOf(start);
+    const endIndex = stationIds.indexOf(end);
+    if (startIndex === -1 || endIndex === -1) {
+        return [];
     }
+
+    return stationIds.slice(startIndex, endIndex + 1);
 };
 
 const getStationPositions = (
@@ -126,7 +120,8 @@ export const prerenderLine = (
     Object.entries(line.routes).forEach(([routeId, { shape }]) => {
         const stations = stationsByRoute[routeId];
         const routeInfo = routesInfo[routeId];
-        const stationIds = stations?.map((s) => s.id);
+        // Safely get station IDs, handling missing/invalid data
+        const stationIds = Array.isArray(stations) ? stations.map((s) => s.id) : [];
         const { pathInterpolator, stationOffsets, pathDirective } = prerenderRoute(
             shape,
             stationIds
@@ -136,15 +131,17 @@ export const prerenderLine = (
             ...routeInfo,
             id: routeId,
             pathInterpolator: pathInterpolator,
-            stations: stations?.map((station) => {
-                return {
-                    id: station.id,
-                    name: station.name,
-                    latitude: station.latitude,
-                    longitude: station.longitude,
-                    offset: stationOffsets[station.id],
-                };
-            }),
+            stations: Array.isArray(stations)
+                ? stations.map((station) => {
+                      return {
+                          id: station.id,
+                          name: station.name,
+                          latitude: station.latitude,
+                          longitude: station.longitude,
+                          offset: stationOffsets[station.id],
+                      };
+                  })
+                : [],
             stationPositions: routeStationPositions,
             pathDirective,
         };
