fix(storage): handle variable quota size errors

Author: dvcol

src/stores/data/image.store.ts

@@ -10,7 +10,7 @@ import type { ImagePayload } from '~/models/poster.model';
 import { ErrorService } from '~/services/error.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
-import { localCache, storage } from '~/utils/browser/browser-storage.utils';
+import { setStorageWrapper, storage } from '~/utils/browser/browser-storage.utils';
 import { getShortLocale } from '~/utils/browser/browser.utils';
 import { CachePrefix } from '~/utils/cache.utils';
 import { debounce } from '~/utils/debounce.utils';
@@ -94,11 +94,11 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
   const saveState = debounce(
     (_images = images) =>
       Promise.all([
-        localCache(ImageStoreConstants.LocalMovie, _images.movie, CachePrefix.Tmdb),
-        localCache(ImageStoreConstants.LocalShow, _images.show, CachePrefix.Tmdb),
-        localCache(ImageStoreConstants.LocalSeason, _images.season, CachePrefix.Tmdb),
-        localCache(ImageStoreConstants.LocalEpisode, _images.episode, CachePrefix.Tmdb),
-        localCache(ImageStoreConstants.LocalPerson, _images.person, CachePrefix.Tmdb),
+        setStorageWrapper(ImageStoreConstants.LocalMovie, _images.movie, CachePrefix.Tmdb),
+        setStorageWrapper(ImageStoreConstants.LocalShow, _images.show, CachePrefix.Tmdb),
+        setStorageWrapper(ImageStoreConstants.LocalSeason, _images.season, CachePrefix.Tmdb),
+        setStorageWrapper(ImageStoreConstants.LocalEpisode, _images.episode, CachePrefix.Tmdb),
+        setStorageWrapper(ImageStoreConstants.LocalPerson, _images.person, CachePrefix.Tmdb),
       ]),
     1000,
   );

src/utils/browser/browser-storage.utils.ts

@@ -30,12 +30,23 @@ const getLocalStorageSize = (storage = window.localStorage, encoder = new TextEn
   return Object.entries(storage).reduce((acc, [key, value]) => acc + encoder.encode(key).length + encoder.encode(value).length, 0);
 };
 
+export type StorageAreaWrapper = {
+  name: string;
+  getBytesInUse: () => Promise<number>;
+  getAll: <T>(regex?: string | RegExp) => Promise<T>;
+  get: <T>(key: string) => Promise<T>;
+  set: <T>(key: string, value: T) => Promise<void>;
+  remove: (key: string) => Promise<void>;
+  removeAll: (regex: string | RegExp) => Promise<void>;
+  clear: () => Promise<void>;
+};
+
 /**
  * This function is used to wrap the storage areas to provide type inference and a more convenient interface.
  * @param area The storage area to wrap.
  * @param name The name of the storage area.
  */
-export const storageWrapper = (area: chrome.storage.StorageArea, name: string) => {
+export const storageWrapper = (area: chrome.storage.StorageArea, name: string): StorageAreaWrapper => {
   if (!globalThis?.chrome?.storage) {
     console.warn('Storage API is not available, using local storage instead.');
 
@@ -62,6 +73,7 @@ export const storageWrapper = (area: chrome.storage.StorageArea, name: string) =
 
     window.trakt = { ...window.trakt, [name]: storage };
     return {
+      name,
       getBytesInUse: async (): Promise<number> => getLocalStorageSize(window.localStorage),
       getAll: async <T>(regex?: string | RegExp): Promise<T> => (regex ? filterObject(storage.values, regex) : storage.values) as T,
       get: async <T>(key: string): Promise<T> => storage.values[key] as T,
@@ -74,6 +86,7 @@ export const storageWrapper = (area: chrome.storage.StorageArea, name: string) =
     };
   }
   return {
+    name,
     getBytesInUse: (): Promise<number> => area.getBytesInUse(),
     getAll: <T>(regex?: string | RegExp): Promise<T> => area.get().then(data => (regex ? filterObject(data, regex) : data) as T),
     get: <T>(key: string): Promise<T> => area.get(key).then(({ [key]: value }) => value),
@@ -104,32 +117,76 @@ export const storage = {
   session: storageWrapper(sessionStorage, 'session'),
 };
 
-export const defaultMaxLocalStorageSize = 10485760;
+/**
+ * Determines whether an error is a QuotaExceededError.
+ *
+ * Browsers love throwing slightly different variations of QuotaExceededError
+ * (this is especially true for old browsers/versions), so we need to check
+ * different fields and values to ensure we cover every edge-case.
+ *
+ * @param err - The error to check
+ * @return Is the error a QuotaExceededError?
+ */
+export const isQuotaExceededError = (err: unknown): boolean => {
+  if (!(err instanceof DOMException)) return false;
+  if (err.name === 'QuotaExceededError') return true;
+  if (err.name === 'NS_ERROR_DOM_QUOTA_REACHED') return true; // Firefox
+  if (err.code === 22) return true;
+  return err.code === 1014; // Firefox
+};
 
-export const localCache: <T>(key: string, value: T, regex?: string | RegExp) => Promise<void> = async (key, value, regex) => {
-  let inUse = await storage.local.getBytesInUse();
+/**
+ * The default maximum size of the local/session storage.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria
+ */
+export const defaultMaxLocalStorageSize = 10485760 / 2;
+
+/**
+ * Wrapper around the storage set method with additional checks for the size of the storage and storage eviction.
+ * @param key The key to store the value under.
+ * @param value The payload to store.
+ * @param regex An optional regex to filter the keys to remove when the storage is full.
+ * @param area The storage area to use.
+ */
+export const setStorageWrapper: <T>(key: string, value: T, regex?: string | RegExp, area?: StorageAreaWrapper) => Promise<void> = async (
+  key,
+  value,
+  regex,
+  area = storage.local,
+) => {
+  let inUse = await area.getBytesInUse();
 
   const max = globalThis?.chrome?.storage?.local.QUOTA_BYTES ?? defaultMaxLocalStorageSize;
 
   const encoder = new TextEncoder();
   const payload = encoder.encode(JSON.stringify(value)).length;
 
   if (payload > max) {
-    console.warn('Payload is too large to store in local storage.', { payload, max, inUse });
+    console.warn('Payload is too large to store in local storage.', { payload, max, inUse, regex, area: area.name });
     return Promise.resolve();
   }
 
   if (inUse + payload >= max) {
-    console.warn('Local storage is full, clearing cache.', { payload, max, inUse });
-    if (regex) await storage.local.removeAll(regex);
-    else await storage.local.clear();
+    console.warn('Local storage is full, clearing cache.', { payload, max, inUse, regex, area: area.name });
+    if (regex) await area.removeAll(regex);
+    else await area.clear();
   }
 
-  inUse = await storage.local.getBytesInUse();
+  inUse = await area.getBytesInUse();
   if (inUse + payload >= max) {
-    console.warn('Local storage is still full, skipping cache.', { payload, max, inUse });
+    console.warn('Local storage is still full, skipping cache.', { payload, max, inUse, regex, area: area.name });
     return Promise.resolve();
   }
 
-  return storage.local.set(key, value);
+  try {
+    return area.set(key, value);
+  } catch (error) {
+    if (isQuotaExceededError(error)) {
+      console.warn('Local storage is full, clearing cache.', { payload, max, inUse, regex, area: area.name });
+      if (regex) await area.removeAll(regex);
+      else await area.clear();
+      return area.set(key, value);
+    }
+    throw error;
+  }
 };

src/utils/cache.utils.ts

@@ -3,7 +3,7 @@ import { CacheRetention } from '@dvcol/common-utils/common/cache';
 import type { ResponseOrTypedResponse, TypedResponse } from '@dvcol/base-http-client';
 import type { CacheStore, CacheStoreEntity } from '@dvcol/common-utils/common';
 
-import { localCache, storage, type StorageArea } from '~/utils/browser/browser-storage.utils';
+import { setStorageWrapper, storage, type StorageArea } from '~/utils/browser/browser-storage.utils';
 
 type FlatResponse<T extends Response = ResponseOrTypedResponse> = Record<keyof T, unknown>;
 
@@ -61,7 +61,7 @@ export class ChromeCacheStore<T> implements CacheStore<T> {
     this.retention = retention;
     this.store = {
       ...store,
-      set: <V>(key: string, value: V) => localCache(key, value, this.prefix),
+      set: <V>(key: string, value: V) => setStorageWrapper(key, value, this.prefix, store),
     };
     this.prefix = prefix;
   }