Desktop - Money request - Onyx JS errors after few requests to the new user and blank chat

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR #10008

Action Performed:

1. Create and validate fresh NewDot user
2. Login as other user to the Desktop App
3. Start chat with newly created user
4. Send first money request and click on the "View details"
5. Send second money request and click on the "View details"

Expected Result:

The user should be able to send money requests and check details without any issues
No JS errors should be present in the console

Actual Result:

After second money request - JS Onyx error, not all information visible in details
Once details is opened - chat window cleared, all new messages not visible

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.85.5

Reproducible in staging?: Yes

Reproducible in production?: No

Email or phone of affected tester (no customers): yuriy.turbo+ch5@gmail.com/Aa111111

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5656095_Screen_Recording_2022-07-20_at_21.14.42.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @neil-marcellini (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[neil-marcellini]

Ooo yikes that's a bad one directly related to the fix for the last deploy blocker. Thank you for catching it in QA! I'll start taking a look.

[neil-marcellini]

I'm currently debugging, trying to see if the error is due to the data coming from the server, which is my first guess, or if it's exclusively a problem within the app. The error is happening within Onyx.applyMerge for the array case on this line

The mergeValues it fails with are:

[
    {
        "2": {
            "person": [
                {
                    "type": "TEXT",
                    "style": "strong",
                    "text": "Neil Marcellini"
                }
            ],
            "actorEmail": "neil@expensifail.com",
            "actorAccountID": 48,
            "message": [
                {
                    "type": "COMMENT",
                    "html": "Requested $1.00 from neil+new-req2@gmail.com",
                    "text": "Requested $1.00 from neil+new-req2@gmail.com",
                    "isEdited": false
                }
            ],
            "originalMessage": {
                "IOUReportID": 2227,
                "IOUTransactionID": "223338299412",
                "amount": 100,
                "comment": "",
                "currency": "USD",
                "type": "create"
            },
            "avatar": "https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_8.png",
            "created": "Jul 20 2022 12:58pm PDT",
            "timestamp": 1658347083,
            "automatic": false,
            "sequenceNumber": 2,
            "actionName": "IOU",
            "shouldShow": true,
            "clientID": "",
            "reportActionID": "2599",
            "isAttachment": false
        },
        "": null
    }
]

I'll keep thinking about exactly why it's failing and were the bad data is coming from. Any ideas @Julesssss?

[neil-marcellini]

The root problem here is that you cannot spread an object into an array unless it implements the iterable protocol. We are trying to spread the mergeValue object into the array data.

Maybe the if statement condition should be && not || @marcaaron ?

if (_.isArray(data) || _.every(mergeValues, _.isArray)) {
        // Array values will always just concatenate
        // more items onto the end of the array
        return _.reduce(mergeValues, (modifiedData, mergeValue) => [
            ...modifiedData,
            ...mergeValue,
        ], data || []);
    }

Instead of diving into Onyx I think the best solution is to make sure that the data we are merging in is an object instead of an array.

[neil-marcellini]

The quick fix would be to revert #9878

[neil-marcellini]

Reverting fixes this, but I'll continue to debug to try and figure out what went wrong.

[marcaaron]

The root problem here is that you cannot spread an object into an array unless it implements the iterable protocol.

Before you go down that rabbit hole. Earlier today we discovered that we are sending the wrong data type from the backend. Debugged this with @Julesssss this morning and we added a change in this PR...

https://github.com/Expensify/Web-Expensify/pull/34278/commits/9bb9e3bce65bc44a773c3db1f4c80f2df3e3145c
https://github.com/Expensify/Web-Expensify/pull/34278/commits/1585a4894ed38b4fe25d59d519b192632225df3a

Are you on the latest main for Web-Expensify?