Skip to content

Conversation

@adhorodyski
Copy link
Contributor

@adhorodyski adhorodyski commented Jan 29, 2026

@roryabraham @sosek108 @tgolen

Details

This PR makes Onyx storage calls async so we can await the initialization task before executing them.

Related Issues

$ Expensify/App#81835

Automated Tests

Manual Tests

(With EApp)
2. In dev, put a new Log.info call really early on, before Onyx initializes (example)
3. Log into the app
4. Navigate to Workspaces -> New -> New Workspace (/workspaces/confirmation)
5. Refresh the page
6. Observe the Currency field reporting undefined and navigating into it results in a missing list of currencies to choose from
7. Remove the newly added Log.info call
8. Go back to the app, refresh it
9. Observe currency is displayed correctly and the list (while navigating into the pick list) is displayed correctly

Author Checklist

  • I linked the correct issue in the ### Related Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android / native
    • Android / Chrome
    • iOS / native
    • iOS / Safari
    • MacOS / Chrome / Safari
    • MacOS / Desktop
  • I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
  • I followed proper code patterns (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
    • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
  • I verified that if a function's arguments changed that all usages have also been updated correctly
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
  • I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we still need to return promises in all these cases. There is still code that uses them, isn't there?

@adhorodyski adhorodyski marked this pull request as ready for review January 30, 2026 02:16
@adhorodyski adhorodyski requested a review from a team as a code owner January 30, 2026 02:16
@melvin-bot melvin-bot bot requested review from carlosmiceli and removed request for a team January 30, 2026 02:17
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e176ab0db3

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

lib/Onyx.ts Outdated
Comment on lines 414 to 418
function update<TKey extends OnyxKey>(data: Array<OnyxUpdate<TKey>>): Promise<void> {
// First, validate the Onyx object is in the format we expect
for (const {onyxMethod, key, value} of data) {
if (!Object.values(OnyxUtils.METHOD).includes(onyxMethod)) {
throw new Error(`Invalid onyxMethod ${onyxMethod} in Onyx update.`);
}
if (onyxMethod === OnyxUtils.METHOD.MULTI_SET) {
// For multiset, we just expect the value to be an object
if (typeof value !== 'object' || Array.isArray(value) || typeof value === 'function') {
throw new Error('Invalid value provided in Onyx multiSet. Onyx multiSet value must be of type object.');
return OnyxUtils.getDeferredInitTask().promise.then(() => {
// First, validate the Onyx object is in the format we expect
for (const {onyxMethod, key, value} of data) {
if (!Object.values(OnyxUtils.METHOD).includes(onyxMethod)) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve synchronous validation errors in update

Wrapping the entire body in getDeferredInitTask().promise.then(...) makes the validation errors throw asynchronously. Callers (and tests like tests/unit/onyxTest.ts around the “should throw an error…” case) currently rely on a synchronous throw from Onyx.update to fail fast when invalid data is passed; with this change, the same misuse becomes an unhandled promise rejection unless every caller awaits/catches the returned promise. This is a behavior change that breaks existing try/catch usage and can let invalid updates slip past immediate error handling.

Useful? React with 👍 / 👎.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@adhorodyski @roryabraham @tgolen

Overall the comment is right about these throws in Onyx.update. In the particular case where some Onyx.updates were called before initialisation and they happen to fail after Onyx.init, they won't throw synchronous errors anymore as they were chained in getDeferredInitTask().promise.then(...). That would represent a problem in E/App if we were handling them with try/catch, but:

  1. I couldn't find any logic in E/App where we are using try/catch to handle Onyx.update synchronous failures. In fact, we rarely handle the asynchronous Onyx failures too.
  2. This synchronous error throwing would made the application crash, it's the only Onyx method where we do this and it's even different from how we are handling wrong mergeCollection updates, just a few lines below in the same function.

So in this commit I made some adjustments to:

  1. Instead of throwing errors, handle these cases with Logger.logInfo and skipping the individual operation in the same way we are doing with mergeCollection at the same function, so the error handling there are now standartised.
  2. Fix the tests to accommodate these changes (actually these tests were never "working" before because of the way they were written)

Let me know what you think.

@roryabraham roryabraham self-requested a review January 30, 2026 02:20
@fabioh8010
Copy link
Contributor

Updates:

  • I've applied this change to make the Onyx methods be executed directly (without additional promise chain) if Onyx is already initialised, which fixed all the failing unit tests here.
  • I tested the changes against E/App in this PR and unit tests were getting stuck due to lack of Onyx.init in some files, which I fixed with these changes.
  • However, after putting the missing Onyx.init, there are a few tests that started to fail. I noticed that even without the Onyx changes the exact same tests are going to fail anyway if I put the Onyx.init in them, so they were probably already "broken" before.

lib/Onyx.ts Outdated
Comment on lines 158 to 162
if (OnyxUtils.getDeferredInitTask().isResolved) {
return OnyxUtils.setWithRetry({key, value, options});
}

return OnyxUtils.getDeferredInitTask().promise.then(() => OnyxUtils.setWithRetry({key, value, options}));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's DRY this pattern up into a utility method like performAction(() => OnyxUtils.setWithRetry({key, value, options}))

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fair, applying this one

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

applied with afterInit, happy to change to a better name (wanted something more explicit)

Replace repeated deferredInitTask checks with OnyxUtils.afterInit
to simplify async initialization handling for set, multiSet, merge,
clear,
update, and collection methods.
tgolen
tgolen previously approved these changes Feb 3, 2026
Copy link
Collaborator

@tgolen tgolen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks great. Thank you!

@fabioh8010
Copy link
Contributor

Let's hold merge a bit, I'm adding some unit tests

expect(callback).toHaveBeenCalledTimes(1);
});

it('should only execute the callback after Onyx initialization', async () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌🏻

roryabraham
roryabraham previously approved these changes Feb 4, 2026
Copy link
Contributor

@roryabraham roryabraham left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One other idea to clean this up a bit would be to create a new file, OnyxInit, that encapsulates OnyxInit.init and the logic for the initialization promise. Right now, it's kind of awkwardly split between Onyx.ts and OnyxUtils.ts.

Ultimately I don't really have any strictly blocking comments though, so I'm approving.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taking a look at this file, I think it could be replaced by Promise.withResolvers. We have a Polyfill for it in E/App (for Hermes).

I think that could end up being a nice simplification.

Even if you don't go that route, is there any advantage to adding isResolved as opposed to just awaiting the promise we've already got? How important is it the Onyx.set proceeds in the same microtask?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taking a look at this file, I think it could be replaced by Promise.withResolvers. We have a Polyfill for it in E/App (for Hermes).

I think that could end up being a nice simplification.

Will have a look on this.

Even if you don't go that route, is there any advantage to adding isResolved as opposed to just awaiting the promise we've already got? How important is it the Onyx.set proceeds in the same microtask?

Answered here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Promise.withResolvers

Done, much better now 🎉

lib/Onyx.ts Outdated
// The key is a skippable one, so we set the new changes to undefined.
// eslint-disable-next-line no-param-reassign
changes = undefined;
const mergeOperation = () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my opinion keeping this anonymous inside Onyx.afterInit is a bit cleaner.

@@ -136,6 +136,21 @@ function getDeferredInitTask(): DeferredTask {
return deferredInitTask;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know you didn't add them here, but I feel like the getters in this function don't provide any useful abstraction. In java, it's a common practice to have private members with public getters and public (semantic) setters.

This doesn't accomplish that - the "getters" just provide a mutable reference to a variable, which isn't really any more helpful than just exporting the variable directly. We could just get rid of these functions and return the variable directly, and it would be a simplification.

Alternatively, we could create semantic getters and setters based on logical usage (i.e: enqueueMerge, hasPendingMergeForKey, etc...), but keep the variables private. That seems like a better improvement.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're planning to keep the merge queue for the time being, I think it'd be cleaner to move that into a dedicated file like MergeQueue instead of OnyxUtils.ts. These utils files can grow very large and hard to follow.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(the comments in this thread can be out-of-scope for this PR btw, but I'd be happy to review a follow-up PR if you agree)

lib/Onyx.ts Outdated
// For multiset, we just expect the value to be an object
if (typeof value !== 'object' || Array.isArray(value) || typeof value === 'function') {
throw new Error('Invalid value provided in Onyx multiSet. Onyx multiSet value must be of type object.');
const updateOperation = () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a bit clearer if you just keep the function anonymous.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, it's like this because we wasn't using the extracted afterInit function before. I will adjust.

@carlosmiceli carlosmiceli removed their request for review February 4, 2026 17:00
@fabioh8010
Copy link
Contributor

Updates:

@roryabraham I agree we check/address these comments (#727 (comment), #727 (comment)) in a follow-up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants