feat(frontend): robust API calls with timeout and fallback; add size guard to avoid large upload timeouts

Author: kr1shnasomani

frontend/src/components/VideoUpload.tsx

@@ -14,6 +14,7 @@ interface VideoUploadProps {
 type ProcessingStage = "idle" | "uploading" | "analyzing" | "tracking" | "generating" | "complete";
 
 const VideoUpload = ({ onVideoProcessed }: VideoUploadProps) => {
+  const MAX_SIZE_MB = 60; // guard against very large uploads on free tiers
   const [uploadedVideo, setUploadedVideo] = useState<File | null>(null);
   const [videoUrl, setVideoUrl] = useState<string>("");
   const [processedVideoUrl, setProcessedVideoUrl] = useState<string>("");
@@ -36,6 +37,14 @@ const VideoUpload = ({ onVideoProcessed }: VideoUploadProps) => {
     const videoFile = files.find(file => file.type.startsWith('video/'));
 
     if (videoFile) {
+      if (videoFile.size > MAX_SIZE_MB * 1024 * 1024) {
+        toast({
+          title: "File too large",
+          description: `Please upload a video under ${MAX_SIZE_MB}MB for stable processing`,
+          variant: "destructive",
+        });
+        return;
+      }
       setUploadedVideo(videoFile);
       const url = URL.createObjectURL(videoFile);
       setVideoUrl(url);
@@ -55,6 +64,14 @@ const VideoUpload = ({ onVideoProcessed }: VideoUploadProps) => {
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file && file.type.startsWith('video/')) {
+      if (file.size > MAX_SIZE_MB * 1024 * 1024) {
+        toast({
+          title: "File too large",
+          description: `Please upload a video under ${MAX_SIZE_MB}MB for stable processing`,
+          variant: "destructive",
+        });
+        return;
+      }
       setUploadedVideo(file);
       const url = URL.createObjectURL(file);
       setVideoUrl(url);

frontend/src/lib/jobs.ts

@@ -1,13 +1,27 @@
 import { API_BASE } from "@/lib/api";
 
+async function fetchWithTimeout(input: RequestInfo | URL, init: RequestInit = {}, timeoutMs = 60000): Promise<Response> {
+  const controller = new AbortController();
+  const id = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    const res = await fetch(input, { ...init, signal: controller.signal });
+    return res;
+  } finally {
+    clearTimeout(id);
+  }
+}
+
 export async function createProcessingJob(file: File, fast = false): Promise<string> {
   const form = new FormData();
   form.append("video", file);
   form.append("fast", String(fast));
-  const res = await fetch(`${API_BASE ? API_BASE : ""}/api/jobs`, {
-    method: "POST",
-    body: form,
-  });
+  // Try absolute backend URL first; on network error, fall back to relative (Vercel rewrite)
+  let res: Response;
+  try {
+    res = await fetchWithTimeout(`${API_BASE ? API_BASE : ""}/api/jobs`, { method: "POST", body: form }, 120000);
+  } catch (_) {
+    res = await fetchWithTimeout(`/api/jobs`, { method: "POST", body: form }, 120000);
+  }
   if (!res.ok) throw new Error(await res.text());
   const data = await res.json();
   return data.job_id as string;
@@ -16,7 +30,12 @@ export async function createProcessingJob(file: File, fast = false): Promise<str
 export async function pollJob(jobId: string, { intervalMs = 3000, timeoutMs = 15 * 60 * 1000 } = {}): Promise<void> {
   const start = Date.now();
   while (true) {
-    const res = await fetch(`${API_BASE ? API_BASE : ""}/api/jobs/${jobId}/status`);
+    let res: Response;
+    try {
+      res = await fetchWithTimeout(`${API_BASE ? API_BASE : ""}/api/jobs/${jobId}/status`, {}, 30000);
+    } catch (_) {
+      res = await fetchWithTimeout(`/api/jobs/${jobId}/status`, {}, 30000);
+    }
     if (!res.ok) throw new Error(await res.text());
     const data = await res.json();
     if (data.status === "done") return;
@@ -27,7 +46,12 @@ export async function pollJob(jobId: string, { intervalMs = 3000, timeoutMs = 15
 }
 
 export async function fetchJobResult(jobId: string): Promise<Blob> {
-  const res = await fetch(`${API_BASE ? API_BASE : ""}/api/jobs/${jobId}/result`);
+  let res: Response;
+  try {
+    res = await fetchWithTimeout(`${API_BASE ? API_BASE : ""}/api/jobs/${jobId}/result`, {}, 60000);
+  } catch (_) {
+    res = await fetchWithTimeout(`/api/jobs/${jobId}/result`, {}, 60000);
+  }
   if (res.status === 202) throw new Error("Job not complete yet");
   if (!res.ok) throw new Error(await res.text());
   const contentType = res.headers.get("content-type") || "";