react-native-onyx 1.0.62 → 1.0.64

package/lib/Onyx.js

@@ -844,6 +844,20 @@ function remove(key) {
     return Storage.removeItem(key);
 }
 
+/**
+ * @private
+ * @returns {Promise<void>}
+ */
+function reportStorageQuota() {
+    return Storage.getDatabaseSize()
+        .then(({bytesUsed, bytesRemaining}) => {
+            Logger.logInfo(`Storage Quota Check -- bytesUsed: ${bytesUsed} bytesRemaining: ${bytesRemaining}`);
+        })
+        .catch((dbSizeError) => {
+            Logger.logAlert(`Unable to get database size. Error: ${dbSizeError}`);
+        });
+}
+
 /**
  * If we fail to set or merge we must handle this by
  * evicting some data from Onyx and then retrying to do
@@ -856,7 +870,7 @@ function remove(key) {
  * @return {Promise}
  */
 function evictStorageAndRetry(error, onyxMethod, ...args) {
-    Logger.logInfo(`Handled error: ${error}`);
+    Logger.logInfo(`Failed to save to storage. Error: ${error}. onyxMethod: ${onyxMethod.name}`);
 
     if (error && Str.startsWith(error.message, 'Failed to execute \'put\' on \'IDBObjectStore\'')) {
         Logger.logAlert('Attempted to set invalid data set in Onyx. Please ensure all data is serializable.');
@@ -865,14 +879,17 @@ function evictStorageAndRetry(error, onyxMethod, ...args) {
 
     // Find the first key that we can remove that has no subscribers in our blocklist
     const keyForRemoval = _.find(recentlyAccessedKeys, key => !evictionBlocklist[key]);
-
     if (!keyForRemoval) {
+        // If we have no acceptable keys to remove then we are possibly trying to save mission critical data. If this is the case,
+        // then we should stop retrying as there is not much the user can do to fix this. Instead of getting them stuck in an infinite loop we
+        // will allow this write to be skipped.
         Logger.logAlert('Out of storage. But found no acceptable keys to remove.');
-        throw error;
+        return reportStorageQuota();
     }
 
     // Remove the least recently viewed key that is not currently being accessed and retry.
     Logger.logInfo(`Out of storage. Evicting least recently accessed key (${keyForRemoval}) and retrying.`);
+    reportStorageQuota();
     return remove(keyForRemoval)
         .then(() => onyxMethod(...args));
 }

package/lib/storage/__mocks__/index.js

@@ -55,6 +55,9 @@ const idbKeyvalMock = {
         return Promise.resolve(_.keys(storageMapInternal));
     },
     config() {},
+    getDatabaseSize() {
+        return Promise.resolve({bytesRemaining: 0, bytesUsed: 99999});
+    },
 };
 
 const idbKeyvalMockSpy = {
@@ -74,6 +77,7 @@ const idbKeyvalMockSpy = {
     setInitialMockData: jest.fn((data) => {
         storageMapInternal = data;
     }),
+    getDatabaseSize: jest.fn(idbKeyvalMock.getDatabaseSize),
 };
 
 export default idbKeyvalMockSpy;

package/lib/storage/providers/IDBKeyVal.js

@@ -13,7 +13,15 @@ import {
 import _ from 'underscore';
 import fastMerge from '../../fastMerge';
 
-const customStore = createStore('OnyxDB', 'keyvaluepairs');
+// We don't want to initialize the store while the JS bundle loads as idb-keyval will try to use global.indexedDB
+// which might not be available in certain environments that load the bundle (e.g. electron main process).
+let customStoreInstance;
+const getCustomStore = () => {
+    if (!customStoreInstance) {
+        customStoreInstance = createStore('OnyxDB', 'keyvaluepairs');
+    }
+    return customStoreInstance;
+};
 
 const provider = {
     /**
@@ -22,7 +30,7 @@ const provider = {
      * @param {*} value
      * @return {Promise<void>}
      */
-    setItem: (key, value) => set(key, value, customStore),
+    setItem: (key, value) => set(key, value, getCustomStore()),
 
     /**
      * Get multiple key-value pairs for the give array of keys in a batch.
@@ -30,7 +38,7 @@ const provider = {
      * @param {String[]} keysParam
      * @return {Promise<Array<[key, value]>>}
      */
-    multiGet: keysParam => getMany(keysParam, customStore)
+    multiGet: keysParam => getMany(keysParam, getCustomStore())
         .then(values => _.map(values, (value, index) => [keysParam[index], value])),
 
     /**
@@ -38,7 +46,7 @@ const provider = {
      * @param {Array<[key, value]>} pairs
      * @return {Promise<void>}
      */
-    multiMerge: pairs => customStore('readwrite', (store) => {
+    multiMerge: pairs => getCustomStore()('readwrite', (store) => {
         // Note: we are using the manual store transaction here, to fit the read and update
         // of the items in one transaction to achieve best performance.
 
@@ -70,33 +78,33 @@ const provider = {
      * @param {Array<[key, value]>} pairs
      * @return {Promise<void>}
      */
-    multiSet: pairs => setMany(pairs, customStore),
+    multiSet: pairs => setMany(pairs, getCustomStore()),
 
     /**
      * Clear everything from storage and also stops the SyncQueue from adding anything more to storage
      * @returns {Promise<void>}
      */
-    clear: () => clear(customStore),
+    clear: () => clear(getCustomStore()),
 
     /**
      * Returns all keys available in storage
      * @returns {Promise<String[]>}
      */
-    getAllKeys: () => keys(customStore),
+    getAllKeys: () => keys(getCustomStore()),
 
     /**
      * Get the value of a given key or return `null` if it's not available in storage
      * @param {String} key
      * @return {Promise<*>}
      */
-    getItem: key => get(key, customStore),
+    getItem: key => get(key, getCustomStore()),
 
     /**
      * Remove given key and it's value from storage
      * @param {String} key
      * @returns {Promise<void>}
      */
-    removeItem: key => del(key, customStore),
+    removeItem: key => del(key, getCustomStore()),
 
     /**
      * Remove given keys and their values from storage
@@ -104,7 +112,26 @@ const provider = {
      * @param {Array} keysParam
      * @returns {Promise}
      */
-    removeItems: keysParam => delMany(keysParam, customStore),
+    removeItems: keysParam => delMany(keysParam, getCustomStore()),
+
+    /**
+     * Gets the total bytes of the database file
+     * @returns {Promise<number>}
+     */
+    getDatabaseSize() {
+        if (!window.navigator || !window.navigator.storage) {
+            throw new Error('StorageManager browser API unavailable');
+        }
+
+        return window.navigator.storage.estimate()
+            .then(value => ({
+                bytesUsed: value.usage,
+                bytesRemaining: value.quota - value.usage,
+            }))
+            .catch((error) => {
+                throw new Error(`Unable to estimate web storage quota. Original error: ${error}`);
+            });
+    },
 };
 
 export default provider;

package/lib/storage/providers/SQLiteStorage.js

@@ -3,6 +3,7 @@
  * converting the value to a JSON string
  */
 import {open} from 'react-native-quick-sqlite';
+import {getFreeDiskStorage} from 'react-native-device-info';
 import _ from 'underscore';
 
 const DB_NAME = 'OnyxDB';
@@ -143,6 +144,22 @@ const provider = {
      * Noop on mobile for now.
      */
     setMemoryOnlyKeys: () => {},
+
+    /**
+     * Gets the total bytes of the database file
+     * @returns {Promise}
+     */
+    getDatabaseSize() {
+        return Promise.all([db.executeAsync('PRAGMA page_size;'), db.executeAsync('PRAGMA page_count;'), getFreeDiskStorage()])
+            .then(([pageSizeResult, pageCountResult, bytesRemaining]) => {
+                const pageSize = pageSizeResult.rows.item(0).page_size;
+                const pageCount = pageCountResult.rows.item(0).page_count;
+                return {
+                    bytesUsed: pageSize * pageCount,
+                    bytesRemaining,
+                };
+            });
+    },
 };
 
 export default provider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -67,6 +67,7 @@
     "prop-types": "^15.7.2",
     "react": "18.2.0",
     "react-native": "0.71.2",
+    "react-native-device-info": "^10.3.0",
     "react-native-performance": "^2.0.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
     "react-test-renderer": "18.1.0",
@@ -79,7 +80,8 @@
     "idb-keyval": "^6.2.1",
     "react": ">=18.1.0",
     "react-native-performance": "^4.0.0",
-    "react-native-quick-sqlite": "^8.0.0-beta.2"
+    "react-native-quick-sqlite": "^8.0.0-beta.2",
+    "react-native-device-info": "^10.3.0"
   },
   "peerDependenciesMeta": {
     "idb-keyval": {
@@ -90,6 +92,9 @@
     },
     "react-native-quick-sqlite": {
       "optional": true
+    },
+    "react-native-device-info": {
+      "optional": true
     }
   },
   "engines": {