#15321: Only one tab writes to the DB

.gitignore

@@ -14,3 +14,8 @@ dist/
 
 # Decrypted private key we do not want to commit
 .github/OSBotify-private-key.asc
+
+## Playwright e2e setup
+/test-results/
+/playwright-report/
+/playwright/.cache/

lib/ActiveClientManager/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Determines when the client is ready. We need to wait till the init method is called and the leader message is sent.
+ */
+declare function isReady(): Promise<void>;
+
+/**
+ * Subscribes to the broadcast channel to listen for messages from other tabs, so that
+ * all tabs agree on who the leader is, which should always be the last tab to open.
+ */
+declare function init(): void;
+
+/**
+ * Returns a boolean indicating if the current client is the leader.
+ */
+declare function isClientTheLeader(): boolean;
+
+/**
+ * Subscribes to when the client changes.
+ */
+declare function subscribeToClientChange(callback: () => {}): void;
+
+export {isReady, init, isClientTheLeader, subscribeToClientChange};

lib/ActiveClientManager/index.native.js

@@ -0,0 +1,23 @@
+/**
+ * For native devices, there will never be more than one
+ * client running at a time, so this lib is a big no-op
+ */
+
+function isReady() {
+    return Promise.resolve();
+}
+
+function isClientTheLeader() {
+    return true;
+}
+
+function init() {}
+
+function subscribeToClientChange() {}
+
+export {
+    isClientTheLeader,
+    init,
+    isReady,
+    subscribeToClientChange,
+};

lib/ActiveClientManager/index.web.js

@@ -0,0 +1,99 @@
+/**
+ * When you have many tabs in one browser, the data of Onyx is shared between all of them. Since we persist write requests in Onyx, we need to ensure that
+ * only one tab is processing those saved requests or we would be duplicating data (or creating errors).
+ * This file ensures exactly that by tracking all the clientIDs connected, storing the most recent one last and it considers that last clientID the "leader".
+ */
+
+import * as Str from '../Str';
+import * as Broadcast from '../broadcast';
+
+const NEW_LEADER_MESSAGE = 'NEW_LEADER';
+const REMOVED_LEADER_MESSAGE = 'REMOVE_LEADER';
+
+const clientID = Str.guid();
+const subscribers = [];
+let timestamp = null;
+
+let activeClient = null;
+let resolveSavedSelfPromise = () => {};
+const savedSelfPromise = new Promise((resolve) => {
+    resolveSavedSelfPromise = resolve;
+});
+
+/**
+ * Determines when the client is ready. We need to wait both till we saved our ID in onyx AND the init method was called
+ * @returns {Promise}
+ */
+function isReady() {
+    return savedSelfPromise;
+}
+
+/**
+ * Returns a boolean indicating if the current client is the leader.
+ *
+ * @returns {Boolean}
+ */
+function isClientTheLeader() {
+    return activeClient === clientID;
+}
+
+/**
+ * Subscribes to when the client changes.
+ * @param {Function} callback
+ */
+function subscribeToClientChange(callback) {
+    subscribers.push(callback);
+}
+
+/**
+ * Subscribe to the broadcast channel to listen for messages from other tabs, so that
+ * all tabs agree on who the leader is, which should always be the last tab to open.
+ */
+function init() {
+    Broadcast.subscribe((message) => {
+        switch (message.data.type) {
+            case NEW_LEADER_MESSAGE: {
+                // Only update the active leader if the message received was from another
+                // tab that initialized after the current one; if the timestamps are the
+                // same, it uses the client ID to tie-break
+                const isTimestampEqual = timestamp === message.data.timestamp;
+                const isTimestampNewer = timestamp > message.data.timestamp;
+                if (isClientTheLeader() && (isTimestampNewer || (isTimestampEqual && clientID > message.data.clientID))) {
+                    return;
+                }
+                activeClient = message.data.clientID;
+
+                subscribers.forEach(callback => callback());
+                break;
+            }
+            case REMOVED_LEADER_MESSAGE:
+                activeClient = clientID;
+                timestamp = Date.now();
+                Broadcast.sendMessage({type: NEW_LEADER_MESSAGE, clientID, timestamp});
+                subscribers.forEach(callback => callback());
+                break;
+            default:
+                break;
+        }
+    });
+
+    activeClient = clientID;
+    timestamp = Date.now();
+
+    Broadcast.sendMessage({type: NEW_LEADER_MESSAGE, clientID, timestamp});
+    resolveSavedSelfPromise();
+
+    window.addEventListener('beforeunload', () => {
+        if (!isClientTheLeader()) {
+            return;
+        }
+        Broadcast.sendMessage({type: REMOVED_LEADER_MESSAGE, clientID});
+    });
+}
+
+export {
+    isClientTheLeader,
+    init,
+    isReady,
+    subscribeToClientChange,
+};

lib/Onyx.d.ts

@@ -1,5 +1,6 @@
 import {Component} from 'react';
 import * as Logger from './Logger';
+import * as ActiveClientManager from './ActiveClientManager';
 import {CollectionKey, CollectionKeyBase, DeepRecord, KeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey} from './types';
 
 /**
@@ -293,6 +294,11 @@ declare function hasPendingMergeForKey(key: OnyxKey): boolean;
  */
 declare function setMemoryOnlyKeys(keyList: OnyxKey[]): void;
 
+/**
+ * Sets the callback to be called when the clear finishes executing.
+ */
+declare function onClear(callback: () => void): void;
+
 declare const Onyx: {
     connect: typeof connect;
     disconnect: typeof disconnect;
@@ -311,6 +317,10 @@ declare const Onyx: {
     isSafeEvictionKey: typeof isSafeEvictionKey;
     METHOD: typeof METHOD;
     setMemoryOnlyKeys: typeof setMemoryOnlyKeys;
+    onClear: typeof onClear;
+    isClientManagerReady: typeof ActiveClientManager.isReady,
+    isClientTheLeader: typeof ActiveClientManager.isClientTheLeader,
+    subscribeToClientChange: typeof ActiveClientManager.subscribeToClientChange,
 };
 
 export default Onyx;

lib/Onyx.js

@@ -7,6 +7,8 @@ import * as Str from './Str';
 import createDeferredTask from './createDeferredTask';
 import * as PerformanceUtils from './metrics/PerformanceUtils';
 import Storage from './storage';
+import * as Broadcast from './broadcast';
+import * as ActiveClientManager from './ActiveClientManager';
 import utils from './utils';
 import unstable_batchedUpdates from './batch';
 
@@ -19,6 +21,8 @@ const METHOD = {
     CLEAR: 'clear',
 };
 
+const ON_CLEAR = 'on_clear';
+
 // Key/value store of Onyx key and arrays of values to merge
 const mergeQueue = {};
 const mergeQueuePromise = {};
@@ -49,6 +53,12 @@ let defaultKeyStates = {};
 // Connections can be made before `Onyx.init`. They would wait for this task before resolving
 const deferredInitTask = createDeferredTask();
 
+// The promise of the clear function, saved so that no writes happen while it's executing
+let ongoingClear = false;
+
+// Callback to be executed after the clear execution ends
+let onClearCallback = null;
+
 let batchUpdatesPromise = null;
 let batchUpdatesQueue = [];
 
@@ -1060,6 +1070,15 @@ function removeNullValues(key, value) {
  * @returns {Promise}
  */
 function set(key, value) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.SET, key, value});
+        return Promise.resolve();
+    }
+
+    if (ongoingClear) {
+        return Promise.resolve();
+    }
+
     const valueWithoutNull = removeNullValues(key, value);
 
     if (valueWithoutNull === null) {
@@ -1106,6 +1125,15 @@ function prepareKeyValuePairsForStorage(data) {
  * @returns {Promise}
  */
 function multiSet(data) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.MULTI_SET, data});
+        return Promise.resolve();
+    }
+
+    if (ongoingClear) {
+        return Promise.resolve();
+    }
+
     const keyValuePairs = prepareKeyValuePairsForStorage(data);
 
     const updatePromises = _.map(data, (val, key) => {
@@ -1176,6 +1204,15 @@ function applyMerge(existingValue, changes, shouldRemoveNullObjectValues) {
  * @returns {Promise}
  */
 function merge(key, changes) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.MERGE, key, changes});
+        return Promise.resolve();
+    }
+
+    if (ongoingClear) {
+        return Promise.resolve();
+    }
+
     // Top-level undefined values are ignored
     // Therefore we need to prevent adding them to the merge queue
     if (_.isUndefined(changes)) {
@@ -1229,7 +1266,7 @@ function merge(key, changes) {
                 const updatePromise = broadcastUpdate(key, modifiedData, hasChanged, 'merge');
 
                 // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
-                if (!hasChanged) {
+                if (!hasChanged || ongoingClear) {
                     return updatePromise;
                 }
 
@@ -1283,6 +1320,17 @@ function initializeWithDefaultKeyStates() {
  * @returns {Promise<void>}
  */
 function clear(keysToPreserve = []) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.CLEAR, keysToPreserve});
+        return Promise.resolve();
+    }
+
+    if (ongoingClear) {
+        return Promise.resolve();
+    }
+
+    ongoingClear = true;
+
     return getAllKeys()
         .then((keys) => {
             const keysToBeClearedFromStorage = [];
@@ -1341,7 +1389,11 @@ function clear(keysToPreserve = []) {
 
             // Remove only the items that we want cleared from storage, and reset others to default
             _.each(keysToBeClearedFromStorage, key => cache.drop(key));
-            return Storage.removeItems(keysToBeClearedFromStorage).then(() => Storage.multiSet(defaultKeyValuePairs)).then(() => Promise.all(updatePromises));
+            return Storage.removeItems(keysToBeClearedFromStorage).then(() => Storage.multiSet(defaultKeyValuePairs)).then(() => {
+                ongoingClear = false;
+                Broadcast.sendMessage({type: METHOD.CLEAR, keysToPreserve});
+                return Promise.all(updatePromises);
+            });
         });
 }
 
@@ -1491,6 +1543,48 @@ function setMemoryOnlyKeys(keyList) {
     cache.setRecentKeysLimit(Infinity);
 }
 
+/**
+ * Sets the callback to be called when the clear finishes executing.
+ * @param {Function} callback
+ */
+function onClear(callback) {
+    onClearCallback = callback;
+}
+
+/**
+ * Subscribes to the Broadcast channel and executes actions based on the
+ * types of events.
+ */
+function subscribeToEvents() {
+    Broadcast.subscribe(({data}) => {
+        if (!ActiveClientManager.isClientTheLeader()) {
+            return;
+        }
+        switch (data.type) {
+            case METHOD.CLEAR:
+                clear(data.keysToPreserve);
+                break;
+            case METHOD.SET:
+                set(data.key, data.value);
+                break;
+            case METHOD.MULTI_SET:
+                multiSet(data.key, data.value);
+                break;
+            case METHOD.MERGE:
+                merge(data.key, data.changes);
+                break;
+            case ON_CLEAR:
+                if (!onClearCallback) {
+                    break;
+                }
+                onClearCallback();
+                break;
+            default:
+                break;
+        }
+    });
+}
+
 /**
  * Initialize the store with actions and listening for storage events
  *
@@ -1525,6 +1619,21 @@ function init({
     shouldSyncMultipleInstances = Boolean(global.localStorage),
     debugSetState = false,
 } = {}) {
+    ActiveClientManager.init();
+
+    ActiveClientManager.isReady().then(() => {
+        if (!ActiveClientManager.isClientTheLeader()) {
+            return;
+        }
+        subscribeToEvents();
+    });
+
+    // If the active client changes an the current client is the leader,
+    // subscribes to the events
+    ActiveClientManager.subscribeToClientChange(() => {
+        subscribeToEvents();
+    });
+
     if (captureMetrics) {
         // The code here is only bundled and applied when the captureMetrics is set
         // eslint-disable-next-line no-use-before-define
@@ -1587,6 +1696,10 @@ const Onyx = {
     setMemoryOnlyKeys,
     tryGetCachedValue,
     hasPendingMergeForKey,
+    onClear,
+    isClientManagerReady: ActiveClientManager.isReady,
+    isClientTheLeader: ActiveClientManager.isClientTheLeader,
+    subscribeToClientChange: ActiveClientManager.subscribeToClientChange,
 };
 
 /**