fix: put cache error

.changeset/pretty-pumas-cheer.md

@@ -0,0 +1,5 @@
+---
+"@web-widget/shared-cache": patch
+---
+
+Fixed the problem of failing to process logs correctly after updating the cache error.

src/cache.ts

@@ -29,7 +29,9 @@ export class SharedCache implements Cache {
     }
 
     const resolveOptions = {
-      waitUntil() {},
+      async waitUntil(promise: Promise<any>) {
+        await promise.catch(console.error);
+      },
       ...options,
     };
 
@@ -138,11 +140,9 @@ export class SharedCache implements Cache {
         // Well actually, in this case it's fine to return the stale response.
         // But we'll update the cache in the background.
         this.#waitUntil(
-          this.#revalidate(request, resolveCacheItem, cacheKey, fetch).then(
-            () => {}
-          )
+          this.#revalidate(request, resolveCacheItem, cacheKey, fetch)
         );
-        this.#setCacheStatus(response.headers, STALE);
+        this.#setCacheStatus(response, STALE);
       } else {
         // NOTE: This will take effect when caching TTL is not working.
         await deleteCacheItem(request, this.#storage, cacheKey);
@@ -152,10 +152,10 @@ export class SharedCache implements Cache {
           cacheKey,
           fetch
         );
-        this.#setCacheStatus(response.headers, EXPIRED);
+        this.#setCacheStatus(response, EXPIRED);
       }
     } else {
-      this.#setCacheStatus(response.headers, HIT);
+      this.#setCacheStatus(response, HIT);
     }
 
     return response;
@@ -273,8 +273,8 @@ export class SharedCache implements Cache {
     });
   }
 
-  #setCacheStatus(headers: Headers, status: SharedCacheStatus) {
-    headers.set(CACHE_STATUS_HEADERS_NAME, status);
+  #setCacheStatus(response: Response, status: SharedCacheStatus) {
+    response.headers.set(CACHE_STATUS_HEADERS_NAME, status);
   }
 }
 

src/fetch.test.ts

@@ -1,19 +1,19 @@
 import { LRUCache } from 'lru-cache';
-import { CacheItem, KVStorage } from './types';
+import { KVStorage } from './types';
 import { createSharedCacheFetch } from './fetch';
 import { SharedCache } from './cache';
 import { BYPASS, DYNAMIC, HIT, MISS, STALE } from './constants';
 
 const TEST_URL = 'http://localhost/';
 
 const createCacheStore = (): KVStorage => {
-  const store = new LRUCache<string, CacheItem>({ max: 1024 });
+  const store = new LRUCache<string, any>({ max: 1024 });
 
   return {
     async get(cacheKey: string) {
-      return store.get(cacheKey) as CacheItem | undefined;
+      return store.get(cacheKey);
     },
-    async set(cacheKey: string, value: CacheItem, ttl?: number) {
+    async set(cacheKey: string, value: any, ttl?: number) {
       store.set(cacheKey, value, { ttl });
     },
     async delete(cacheKey: string) {

src/fetch.ts

@@ -39,46 +39,45 @@ export function createSharedCacheFetch(
     const request = new Request(input, init);
     const requestCache = getRequestCacheMode(request, init?.cache);
     const sharedCache = init?.sharedCache;
+    const interceptor = createInterceptor(fetcher, sharedCache);
 
     if (requestCache === 'no-store') {
-      const fetchedResponse = await fetcher(request);
-      setCacheControlAndVary(fetchedResponse, sharedCache);
-      setCacheStatus(fetchedResponse.headers, BYPASS);
+      const fetchedResponse = await interceptor(input, init);
+      setCacheStatus(fetchedResponse, BYPASS);
       return fetchedResponse;
     }
 
     const cachedResponse = await cache.match(request, {
       ...sharedCache,
-      _fetch: fetcher,
+      _fetch: interceptor,
       forceCache:
         requestCache === 'force-cache' || requestCache === 'only-if-cached',
     });
 
     if (cachedResponse) {
-      setCacheStatus(cachedResponse.headers, HIT);
+      setCacheStatus(cachedResponse, HIT);
       return cachedResponse;
     }
 
     if (requestCache === 'only-if-cached') {
       throw TypeError('Failed to fetch.');
     }
 
-    const fetchedResponse = await fetcher(request);
-    setCacheControlAndVary(fetchedResponse, sharedCache);
+    const fetchedResponse = await interceptor(request);
     const cacheControl = fetchedResponse.headers.get('cache-control');
 
     if (cacheControl) {
       if (bypassCache(cacheControl)) {
-        setCacheStatus(fetchedResponse.headers, BYPASS);
+        setCacheStatus(fetchedResponse, BYPASS);
       } else {
         const ok = await cache.put(request, fetchedResponse, sharedCache).then(
           () => true,
           () => false
         );
-        setCacheStatus(fetchedResponse.headers, ok ? MISS : DYNAMIC);
+        setCacheStatus(fetchedResponse, ok ? MISS : DYNAMIC);
       }
     } else {
-      setCacheStatus(fetchedResponse.headers, DYNAMIC);
+      setCacheStatus(fetchedResponse, DYNAMIC);
     }
 
     return fetchedResponse;
@@ -87,24 +86,30 @@ export function createSharedCacheFetch(
 
 export const sharedCacheFetch = createSharedCacheFetch();
 
-function setCacheStatus(headers: Headers, status: SharedCacheStatus) {
+function setCacheStatus(response: Response, status: SharedCacheStatus) {
+  const headers = response.headers;
   if (!headers.has(CACHE_STATUS_HEADERS_NAME)) {
     headers.set(CACHE_STATUS_HEADERS_NAME, status);
   }
 }
 
-function setCacheControlAndVary(
-  response: Response,
+function createInterceptor(
+  fetcher: typeof fetch,
   sharedCache?: SharedCacheRequestInitProperties
-) {
-  if (response.ok) {
-    if (sharedCache?.cacheControlOverride) {
-      cacheControl(response.headers, sharedCache.cacheControlOverride);
-    }
-    if (sharedCache?.varyOverride) {
-      vary(response.headers, sharedCache.varyOverride);
+): typeof fetch {
+  return async function fetch(...args) {
+    const response = await fetcher(...args);
+    const headers = response.headers;
+    if (response.ok) {
+      if (sharedCache?.cacheControlOverride) {
+        cacheControl(headers, sharedCache.cacheControlOverride);
+      }
+      if (sharedCache?.varyOverride) {
+        vary(headers, sharedCache.varyOverride);
+      }
     }
-  }
+    return response;
+  };
 }
 
 function bypassCache(cacheControl: string) {