Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 0 additions & 53 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -351,59 +351,6 @@ const ReportActionsView = ({reportID, isActiveReport}) => {
export default ReportActionsView;
```

# Benchmarks

Provide the `captureMetrics` boolean flag to `Onyx.init` to capture call statistics

```js
Onyx.init({
keys: ONYXKEYS,
evictableKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
captureMetrics: Config.BENCHMARK_ONYX,
});
```

At any point you can get the collected statistics using `Onyx.getMetrics()`.
This will return an object containing `totalTime`, `averageTime` and `summaries`.
`summaries` is a collection of statistics for each method it contains data about:
- method name
- total, max, min, average times for this method calls
- calls - a list of individual calls with each having: start time; end time; call duration; call arguments
- start/end times are relative to application launch time - 0.00 being exactly at launch

If you wish to reset the metrics and start over use `Onyx.resetMetrics()`

Finally, there's a `Onyx.printMetrics()` method which prints human statistics information on the dev console. You can use this method during debugging. For example add an `Onyx.printMetrics()` line somewhere in code or call it through the dev console. It supports 3 popular formats *MD* - human friendly markdown, *CSV* and *JSON*. The default is MD if you want to print another format call `Onyx.printMetrics({ format: 'csv' })` or
`Onyx.printMetrics({ format: 'json' })`.

Sample output of `Onyx.printMetrics()`

```
### Onyx Benchmark
- Total: 1.5min
- Last call finished at: 12.55sec

| method | total time spent | max | min | avg | time last call completed | calls made |
|-----------------|-----------------:|----------:|---------:|----------:|-------------------------:|-----------:|
| Onyx:getAllKeys | 1.2min | 2.16sec | 0.159ms | 782.230ms | 12.55sec | 90 |
| Onyx:merge | 4.73sec | 2.00sec | 74.412ms | 591.642ms | 10.24sec | 8 |
| Onyx:set | 3.90sec | 846.760ms | 43.663ms | 433.056ms | 7.47sec | 9 |
| Onyx:get | 8.87sec | 2.00sec | 0.063ms | 61.998ms | 10.24sec | 143 |


| Onyx:set |
|---------------------------------------------------------------|
| start time | end time | duration | args |
|-----------:|----------:|----------:|--------------------------|
| 291.042ms | 553.079ms | 262.037ms | session, [object Object] |
| 293.719ms | 553.316ms | 259.597ms | account, [object Object] |
| 294.541ms | 553.651ms | 259.109ms | network, [object Object] |
| 365.378ms | 554.246ms | 188.867ms | iou, [object Object] |
| 1.08sec | 2.20sec | 1.12sec | network, [object Object] |
| 1.08sec | 2.20sec | 1.12sec | iou, [object Object] |
| 1.17sec | 2.20sec | 1.03sec | currentURL, / |
```

# Debug mode

It can be useful to log why Onyx is calling `setState()` on a particular React component so that we can understand which key changed, what changed about the value, and the connected component that ultimately rendered as a result. When used correctly this can help isolate problem areas and unnecessary renders in the code. To enable this feature, pass `debugSetState: true` to the config and grep JS console logs for `[Onyx-Debug]`.
Expand Down
32 changes: 0 additions & 32 deletions lib/GlobalSettings.ts

This file was deleted.

28 changes: 0 additions & 28 deletions lib/Onyx.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ import OnyxKeys from './OnyxKeys';
import logMessages from './logMessages';
import type {Connection} from './OnyxConnectionManager';
import connectionManager from './OnyxConnectionManager';
import * as GlobalSettings from './GlobalSettings';
import decorateWithMetrics from './metrics';
import OnyxMerge from './OnyxMerge';

/** Initialize the store with actions and listening for storage events */
Expand All @@ -38,17 +36,11 @@ function init({
evictableKeys = [],
maxCachedKeysCount = 1000,
shouldSyncMultipleInstances = !!global.localStorage,
enablePerformanceMetrics = false,
enableDevTools = true,
skippableCollectionMemberIDs = [],
ramOnlyKeys = [],
snapshotMergeKeys = [],
}: InitOptions): void {
if (enablePerformanceMetrics) {
GlobalSettings.setPerformanceMetricsEnabled(true);
applyDecorators();
}

initDevTools(enableDevTools);

Storage.init();
Expand Down Expand Up @@ -605,25 +597,5 @@ const Onyx = {
registerLogger: Logger.registerLogger,
};

function applyDecorators() {
// We are reassigning the functions directly so that internal function calls are also decorated
// @ts-expect-error Reassign
connect = decorateWithMetrics(connect, 'Onyx.connect');
// @ts-expect-error Reassign
connectWithoutView = decorateWithMetrics(connectWithoutView, 'Onyx.connectWithoutView');
// @ts-expect-error Reassign
set = decorateWithMetrics(set, 'Onyx.set');
// @ts-expect-error Reassign
multiSet = decorateWithMetrics(multiSet, 'Onyx.multiSet');
// @ts-expect-error Reassign
merge = decorateWithMetrics(merge, 'Onyx.merge');
// @ts-expect-error Reassign
mergeCollection = decorateWithMetrics(mergeCollection, 'Onyx.mergeCollection');
// @ts-expect-error Reassign
update = decorateWithMetrics(update, 'Onyx.update');
// @ts-expect-error Reassign
clear = decorateWithMetrics(clear, 'Onyx.clear');
}

export default Onyx;
export type {OnyxUpdate, ConnectOptions, SetOptions};
48 changes: 0 additions & 48 deletions lib/OnyxUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ import type {FastMergeOptions, FastMergeResult} from './utils';
import utils from './utils';
import type {DeferredTask} from './createDeferredTask';
import createDeferredTask from './createDeferredTask';
import * as GlobalSettings from './GlobalSettings';
import decorateWithMetrics from './metrics';
import type {StorageKeyValuePair} from './storage/providers/types';
import logMessages from './logMessages';

Expand Down Expand Up @@ -1771,52 +1769,6 @@ const OnyxUtils = {
setCollectionWithRetry,
};

GlobalSettings.addGlobalSettingsChangeListener(({enablePerformanceMetrics}) => {
if (!enablePerformanceMetrics) {
return;
}
// We are reassigning the functions directly so that internal function calls are also decorated

// @ts-expect-error Reassign
initStoreValues = decorateWithMetrics(initStoreValues, 'OnyxUtils.initStoreValues');
// @ts-expect-error Complex type signature
get = decorateWithMetrics(get, 'OnyxUtils.get');
// @ts-expect-error Reassign
getAllKeys = decorateWithMetrics(getAllKeys, 'OnyxUtils.getAllKeys');
// @ts-expect-error Reassign
keysChanged = decorateWithMetrics(keysChanged, 'OnyxUtils.keysChanged');
// @ts-expect-error Reassign
keyChanged = decorateWithMetrics(keyChanged, 'OnyxUtils.keyChanged');
// @ts-expect-error Reassign
sendDataToConnection = decorateWithMetrics(sendDataToConnection, 'OnyxUtils.sendDataToConnection');
// @ts-expect-error Reassign
scheduleSubscriberUpdate = decorateWithMetrics(scheduleSubscriberUpdate, 'OnyxUtils.scheduleSubscriberUpdate');
// @ts-expect-error Reassign
scheduleNotifyCollectionSubscribers = decorateWithMetrics(scheduleNotifyCollectionSubscribers, 'OnyxUtils.scheduleNotifyCollectionSubscribers');
// @ts-expect-error Reassign
remove = decorateWithMetrics(remove, 'OnyxUtils.remove');
// @ts-expect-error Reassign
reportStorageQuota = decorateWithMetrics(reportStorageQuota, 'OnyxUtils.reportStorageQuota');
// @ts-expect-error Complex type signature
retryOperation = decorateWithMetrics(retryOperation, 'OnyxUtils.retryOperation');
// @ts-expect-error Reassign
broadcastUpdate = decorateWithMetrics(broadcastUpdate, 'OnyxUtils.broadcastUpdate');
// @ts-expect-error Reassign
initializeWithDefaultKeyStates = decorateWithMetrics(initializeWithDefaultKeyStates, 'OnyxUtils.initializeWithDefaultKeyStates');
// @ts-expect-error Complex type signature
multiGet = decorateWithMetrics(multiGet, 'OnyxUtils.multiGet');
// @ts-expect-error Reassign
tupleGet = decorateWithMetrics(tupleGet, 'OnyxUtils.tupleGet');
// @ts-expect-error Reassign
subscribeToKey = decorateWithMetrics(subscribeToKey, 'OnyxUtils.subscribeToKey');
// @ts-expect-error Reassign
setWithRetry = decorateWithMetrics(setWithRetry, 'OnyxUtils.setWithRetry');
// @ts-expect-error Reassign
multiSetWithRetry = decorateWithMetrics(multiSetWithRetry, 'OnyxUtils.multiSetWithRetry');
// @ts-expect-error Reassign
setCollectionWithRetry = decorateWithMetrics(setCollectionWithRetry, 'OnyxUtils.setCollectionWithRetry');
});

export type {OnyxMethod};
export default OnyxUtils;
export {clearOnyxUtilsInternals};
39 changes: 0 additions & 39 deletions lib/dependencies/ModuleProxy.ts

This file was deleted.

12 changes: 0 additions & 12 deletions lib/dependencies/PerformanceProxy/index.native.ts

This file was deleted.

2 changes: 0 additions & 2 deletions lib/dependencies/PerformanceProxy/index.ts

This file was deleted.

51 changes: 0 additions & 51 deletions lib/metrics.ts

This file was deleted.

21 changes: 0 additions & 21 deletions lib/storage/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import PlatformStorage from './platforms';
import InstanceSync from './InstanceSync';
import MemoryOnlyProvider from './providers/MemoryOnlyProvider';
import type StorageProvider from './providers/types';
import * as GlobalSettings from '../GlobalSettings';
import decorateWithMetrics from '../metrics';

let provider = PlatformStorage as StorageProvider<unknown>;
let shouldKeepInstancesSync = false;
Expand Down Expand Up @@ -209,23 +207,4 @@ const storage: Storage = {
},
};

GlobalSettings.addGlobalSettingsChangeListener(({enablePerformanceMetrics}) => {
if (!enablePerformanceMetrics) {
return;
}

// Apply decorators
storage.getItem = decorateWithMetrics(storage.getItem, 'Storage.getItem');
storage.multiGet = decorateWithMetrics(storage.multiGet, 'Storage.multiGet');
storage.setItem = decorateWithMetrics(storage.setItem, 'Storage.setItem');
storage.multiSet = decorateWithMetrics(storage.multiSet, 'Storage.multiSet');
storage.mergeItem = decorateWithMetrics(storage.mergeItem, 'Storage.mergeItem');
storage.multiMerge = decorateWithMetrics(storage.multiMerge, 'Storage.multiMerge');
storage.removeItem = decorateWithMetrics(storage.removeItem, 'Storage.removeItem');
storage.removeItems = decorateWithMetrics(storage.removeItems, 'Storage.removeItems');
storage.clear = decorateWithMetrics(storage.clear, 'Storage.clear');
storage.getAllKeys = decorateWithMetrics(storage.getAllKeys, 'Storage.getAllKeys');
storage.getAll = decorateWithMetrics(storage.getAll, 'Storage.getAll');
});

export default storage;
6 changes: 0 additions & 6 deletions lib/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -407,12 +407,6 @@ type InitOptions = {
*/
shouldSyncMultipleInstances?: boolean;

/**
* If enabled it will use the performance API to measure the time taken by Onyx operations.
* @default false
*/
enablePerformanceMetrics?: boolean;

/**
* If enabled, it will connect to Redux DevTools Extension for debugging.
* This allows you to see all Onyx state changes in the Redux DevTools.
Expand Down
12 changes: 1 addition & 11 deletions lib/useOnyx.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@ import type {Connection} from './OnyxConnectionManager';
import connectionManager from './OnyxConnectionManager';
import OnyxUtils from './OnyxUtils';
import OnyxKeys from './OnyxKeys';
import * as GlobalSettings from './GlobalSettings';
import type {CollectionKeyBase, OnyxKey, OnyxValue} from './types';
import usePrevious from './usePrevious';
import decorateWithMetrics from './metrics';
import onyxSnapshotCache from './OnyxSnapshotCache';
import useLiveRef from './useLiveRef';

Expand Down Expand Up @@ -330,19 +328,11 @@ function useOnyx<TKey extends OnyxKey, TReturnValue = OnyxValue<TKey>>(
[key, options?.initWithStoredValues, options?.reuseConnection, checkEvictableKey],
);

const getSnapshotDecorated = useMemo(() => {
if (!GlobalSettings.isPerformanceMetricsEnabled()) {
return getSnapshot;
}

return decorateWithMetrics(getSnapshot, 'useOnyx.getSnapshot');
}, [getSnapshot]);

useEffect(() => {
checkEvictableKey();
}, [checkEvictableKey]);

const result = useSyncExternalStore<UseOnyxResult<TReturnValue>>(subscribe, getSnapshotDecorated);
const result = useSyncExternalStore<UseOnyxResult<TReturnValue>>(subscribe, getSnapshot);

return result;
}
Expand Down
Loading
Loading