fix: unhandled promise rejection in media blob cache

Evie Gauthier · Evie Gauthier · commit 77046ab5b267 · 2026-03-13T20:39:03.000-04:00
Fixes unhandled promise rejection when multiple components fetch
the same media URL and the initial request fails with 401.

### Root Cause
When a blob fetch request was in-flight and failed, subsequent callers
awaiting the same promise would receive an unhandled rejection because
the await was outside the try-catch block.

### Changes
1. useBlobCache: Wrap inflightRequests.get() await in try-catch
2. useBlobCache: Improve error message to include HTTP status
3. Service Worker: Add logging for session retrieval failures to
   diagnose authentication issues with media requests

Addresses Sentry issue with 401 errors on authenticated media endpoints.
diff --git a/src/app/hooks/useBlobCache.ts b/src/app/hooks/useBlobCache.ts
@@ -23,15 +23,21 @@ export function useBlobCache(url?: string): string | undefined {
 
     const fetchBlob = async () => {
       if (inflightRequests.has(url)) {
-        const existingBlobUrl = await inflightRequests.get(url);
-        if (isMounted) setCacheState({ sourceUrl: url, blobUrl: existingBlobUrl });
+        try {
+          const existingBlobUrl = await inflightRequests.get(url);
+          if (isMounted) setCacheState({ sourceUrl: url, blobUrl: existingBlobUrl });
+        } catch {
+          // Inflight request failed, silently ignore (consistent with fetchBlob behavior)
+        }
         return;
       }
 
       const requestPromise = (async () => {
         try {
           const res = await fetch(url, { mode: 'cors' });
-          if (!res.ok) throw new Error();
+          if (!res.ok) {
+            throw new Error(`Failed to fetch blob: ${res.status} ${res.statusText}`);
+          }
           const blob = await res.blob();
           const objectUrl = URL.createObjectURL(blob);
 
diff --git a/src/sw.ts b/src/sw.ts
@@ -91,9 +91,11 @@ async function cleanupDeadClients() {
 function setSession(clientId: string, accessToken: unknown, baseUrl: unknown) {
   if (typeof accessToken === 'string' && typeof baseUrl === 'string') {
     sessions.set(clientId, { accessToken, baseUrl });
+    console.debug('[SW] setSession: stored', clientId, baseUrl);
   } else {
     // Logout or invalid session
     sessions.delete(clientId);
+    console.debug('[SW] setSession: removed', clientId);
   }
 
   const resolveSession = clientToResolve.get(clientId);
@@ -124,12 +126,18 @@ async function requestSessionWithTimeout(
   timeoutMs = 3000
 ): Promise<SessionInfo | undefined> {
   const client = await self.clients.get(clientId);
-  if (!client) return undefined;
+  if (!client) {
+    console.warn('[SW] requestSessionWithTimeout: client not found', clientId);
+    return undefined;
+  }
 
   const sessionPromise = requestSession(client);
 
   const timeout = new Promise<undefined>((resolve) => {
-    setTimeout(() => resolve(undefined), timeoutMs);
+    setTimeout(() => {
+      console.warn('[SW] requestSessionWithTimeout: timed out after', timeoutMs, 'ms', clientId);
+      resolve(undefined);
+    }, timeoutMs);
   });
 
   return Promise.race([sessionPromise, timeout]);
@@ -274,6 +282,11 @@ self.addEventListener('fetch', (event: FetchEvent) => {
       if (s && validMediaRequest(url, s.baseUrl)) {
         return fetch(url, { ...fetchConfig(s.accessToken), redirect });
       }
+      console.warn(
+        '[SW fetch] No valid session for media request',
+        { url, clientId, hasSession: !!s },
+        'falling back to unauthenticated fetch'
+      );
       return fetch(event.request);
     })
   );
