Remove metrics

lib/Onyx.js

@@ -5,7 +5,7 @@ import * as Logger from './Logger';
 import cache from './OnyxCache';
 import * as Str from './Str';
 import createDeferredTask from './createDeferredTask';
-import * as PerformanceUtils from './metrics/PerformanceUtils';
+import * as PerformanceUtils from './PerformanceUtils';
 import Storage from './storage';
 import utils from './utils';
 import unstable_batchedUpdates from './batch';
@@ -1554,21 +1554,7 @@ function setMemoryOnlyKeys(keyList) {
  *     },
  * });
  */
-function init({
-    keys = {},
-    initialKeyStates = {},
-    safeEvictionKeys = [],
-    maxCachedKeysCount = 1000,
-    captureMetrics = false,
-    shouldSyncMultipleInstances = Boolean(global.localStorage),
-    debugSetState = false,
-} = {}) {
-    if (captureMetrics) {
-        // The code here is only bundled and applied when the captureMetrics is set
-        // eslint-disable-next-line no-use-before-define
-        applyDecorators();
-    }
-
+function init({keys = {}, initialKeyStates = {}, safeEvictionKeys = [], maxCachedKeysCount = 1000, shouldSyncMultipleInstances = Boolean(global.localStorage), debugSetState = false} = {}) {
     if (debugSetState) {
         PerformanceUtils.setShouldDebugSetState(true);
     }
@@ -1630,42 +1616,4 @@ const Onyx = {
     hasPendingMergeForKey,
 };
 
-/**
- * Apply calls statistic decorators to benchmark Onyx
- *
- * @private
- */
-function applyDecorators() {
-    // We're requiring the script dynamically here so that it's only evaluated when decorators are used
-    const decorate = require('./metrics');
-
-    // Re-assign with decorated functions
-    /* eslint-disable no-func-assign */
-    get = decorate.decorateWithMetrics(get, 'Onyx:get');
-    set = decorate.decorateWithMetrics(set, 'Onyx:set');
-    multiSet = decorate.decorateWithMetrics(multiSet, 'Onyx:multiSet');
-    clear = decorate.decorateWithMetrics(clear, 'Onyx:clear');
-    merge = decorate.decorateWithMetrics(merge, 'Onyx:merge');
-    mergeCollection = decorate.decorateWithMetrics(mergeCollection, 'Onyx:mergeCollection');
-    getAllKeys = decorate.decorateWithMetrics(getAllKeys, 'Onyx:getAllKeys');
-    initializeWithDefaultKeyStates = decorate.decorateWithMetrics(initializeWithDefaultKeyStates, 'Onyx:defaults');
-    update = decorate.decorateWithMetrics(update, 'Onyx:update');
-    /* eslint-enable */
-
-    // Re-expose decorated methods
-    /* eslint-disable rulesdir/prefer-actions-set-data */
-    Onyx.set = set;
-    Onyx.multiSet = multiSet;
-    Onyx.clear = clear;
-    Onyx.merge = merge;
-    Onyx.mergeCollection = mergeCollection;
-    Onyx.update = update;
-    /* eslint-enable */
-
-    // Expose stats methods on Onyx
-    Onyx.getMetrics = decorate.getMetrics;
-    Onyx.resetMetrics = decorate.resetMetrics;
-    Onyx.printMetrics = decorate.printMetrics;
-}
-
 export default Onyx;

lib/PerformanceUtils.ts

@@ -0,0 +1,66 @@
+import lodashTransform from 'lodash/transform';
+import {deepEqual} from 'fast-equals';
+
+type UnknownObject = Record<string, unknown>;
+
+type LogParams = {
+    keyThatChanged?: string;
+    difference?: unknown;
+    previousValue?: unknown;
+    newValue?: unknown;
+};
+
+type Mapping = Record<string, unknown> & {
+    key: string;
+    displayName: string;
+};
+
+let debugSetState = false;
+
+function setShouldDebugSetState(debug: boolean) {
+    debugSetState = debug;
+}
+
+/**
+ * Deep diff between two objects. Useful for figuring out what changed about an object from one render to the next so
+ * that state and props updates can be optimized.
+ */
+function diffObject<TObject extends UnknownObject, TBase extends UnknownObject>(object: TObject, base: TBase): UnknownObject {
+    return lodashTransform(object, (result: UnknownObject, value, key) => {
+        if (deepEqual(value, base[key])) {
+            return;
+        }
+
+        if (typeof value === 'object' && typeof base[key] === 'object') {
+            // eslint-disable-next-line no-param-reassign
+            result[key] = diffObject(value as UnknownObject, base[key] as UnknownObject);
+        } else {
+            // eslint-disable-next-line no-param-reassign
+            result[key] = value;
+        }
+    });
+}
+
+/**
+ * Provide insights into why a setState() call occurred by diffing the before and after values.
+ */
+function logSetStateCall(mapping: Mapping, previousValue: unknown, newValue: unknown, caller: string, keyThatChanged: string) {
+    if (!debugSetState) {
+        return;
+    }
+
+    const logParams: LogParams = {};
+    if (keyThatChanged) {
+        logParams.keyThatChanged = keyThatChanged;
+    }
+    if (newValue && previousValue && typeof newValue === 'object' && typeof previousValue === 'object') {
+        logParams.difference = diffObject(previousValue as UnknownObject, newValue as UnknownObject);
+    } else {
+        logParams.previousValue = previousValue;
+        logParams.newValue = newValue;
+    }
+
+    console.debug(`[Onyx-Debug] ${mapping.displayName} setState() called. Subscribed to key '${mapping.key}' (${caller})`, logParams);
+}
+
+export {logSetStateCall, setShouldDebugSetState};