[$250] Web - Attachment - Onyx and DataCloneError console rrrors when sending an image attachment

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.49-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5084384&group_by=cases:section_id&group_order=asc&group_id=292107
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with a new Gmail account
3. Navigate to FAB - Start chat
4. Start a 1:1 DM with any account
5. Send any image attachment to the chat

Expected Result:

There shouldn't be any console errors.

Actual Result:

Onyx and DataCloneError console errors when sending an image attachment to a 1:1 DM.
Expensify.tsx:50 [Onyx] Attempted to set invalid data set in Onyx. Please ensure all data is serializable.

index.js:40 Uncaught (in promise) DataCloneError: Failed to execute 'put' on 'IDBObjectStore': function arrayBuffer() { [native code] } could not be cloned.
at index.js:40:15
at index.js:13:51

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1510.txt

Bug6634941_1728975190721.bandicam_2024-10-15_08-47-55-299.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021846724620826087266
• Upwork Job ID: 1846724620826087266
• Last Price Increase: 2024-12-05

Issue Owner

Current Issue Owner: @rlinoz

[melvin-bot]

Triggered auto assignment to @RachCHopkins (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@RachCHopkins FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[RachCHopkins]

I can't repro this, I don't get any errors at all. I note the steps are very specific - does the account need to be brand new and also need to be gmail @IuliiaHerets ?

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Onyx and DataCloneError console errors when sending an image attachment to a 1:1 DM.
Expensify.tsx:50 [Onyx] Attempted to set invalid data set in Onyx. Please ensure all data is serializable.

What is the root cause of that problem?

When sending attachment as first message in a new chat room, a SendAttachment request is called, but response's previousUpdateID doesn't match with request's clientUpdateID, thus trigerring SaveResponseInOnyx middleware logics:

In SaveResponseInOnyx, we save the whole request object when the above case happens:

App/src/libs/Middleware/SaveResponseInOnyx.ts

Lines 26 to 32 in 927b40d

	const responseToApply = {
	type: CONST.ONYX_UPDATE_TYPES.HTTPS,
	lastUpdateID: Number(response?.lastUpdateID ?? 0),
	previousUpdateID: Number(response?.previousUpdateID ?? 0),
	request,
	response: response ?? {},
	};

App/src/libs/Middleware/SaveResponseInOnyx.ts

Line 39 in 927b40d

OnyxUpdates.saveUpdateInformation(responseToApply);

In the case of SendAttachment request, the request contains a File object, which is a non-serializable object, which makes Onyx unable to set request values into OnyxDB.

What changes do you think we should make in order to solve the problem?

1. We can handle this in BE side to response AddAttachment with previousUpdateID matches with clientUpdateID to prevent SaveResponseInOnyx being called
2. We can serialize File object by wrapping request around JSON.stringify and JSON.parse:
   

   App/src/libs/Middleware/SaveResponseInOnyx.ts

   Line 30 in 927b40d

   request,

request: JSON.parse(JSON.stringify(request))

We can limit this logic to apply only on SendAttachment as well

const shouldParseRequest = request.command === WRITE_COMMANDS.ADD_ATTACHMENT
/* ... */
request: shouldParseRequest ? JSON.parse(JSON.stringify(request)) : request

What alternative solutions did you explore? (Optional)

[daledah]

@RachCHopkins From my testings, you can try to reproduce with the following conditions:

• Start a chat with an existing user, not optimistic user
• Send image as the first message in the chat

[RachCHopkins]

Strange, no, I can't repro. But I trust you @daledah, if you can, then that's good enough for me!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021846724620826087266

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Pujan92 (External)

[melvin-bot]

@Pujan92, @RachCHopkins Eep! 4 days overdue now. Issues have feelings too...

[RachCHopkins]

@Pujan92 can you check out the above proposal, please?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[huult]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Onyx and DataCloneError console errors when sending an image attachment

What is the root cause of that problem?

This issue related RCA with issue 49329 and 44114

This issue occurs on the backend because when we call the AddAttachment request, the lastUpdateIDFromClient is less than the previousUpdateID received. As a result, the responseToApply ends up using the wrong function to store the responseToApply, which is OnyxUpdates.saveUpdateInformation(responseToApply). In this case, we expect to use OnyxUpdates.apply(responseToApply); to save the response. Additionally, when we use this function, the responseToApply from AddAttachment needs to be serialized first; otherwise, it will throw an error log in this ticket.

{"lastUpdateIDFromClient":2571094520,"previousUpdateID":2571094574}

What changes do you think we should make in order to solve the problem?

To resolve this issue, we need to make a change on the backend so that the previousUpdateID is less than the lastUpdateIDFromClient in this case, or we should always update ADD_ATTACHMENT to the most current state. Something like this:

//.src/libs/Middleware/SaveResponseInOnyx.ts#L12
const requestsToIgnoreLastUpdateID: string[] = [
    WRITE_COMMANDS.OPEN_APP,
    SIDE_EFFECT_REQUEST_COMMANDS.RECONNECT_APP,
    WRITE_COMMANDS.CLOSE_ACCOUNT,
+    WRITE_COMMANDS.ADD_ATTACHMENT,
    WRITE_COMMANDS.DELETE_MONEY_REQUEST,
    SIDE_EFFECT_REQUEST_COMMANDS.GET_MISSING_ONYX_MESSAGES,
];

[melvin-bot]

@Pujan92, @RachCHopkins 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[RachCHopkins]

@Pujan92 how do you feel about these proposals?

[Pujan92]

Reviewing

[Pujan92]

As both proposals stated, I think this needs to be fixed in the BE if possible, to correct the values of previousUpdateID and lastUpdateIDFromClient. So that the correct function OnyxUpdates.apply gets called. Adding an internal engineer for the quick look.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @rlinoz, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rlinoz]

Im not very familiar with the updateIDs logic, but I will try to take a look today.

[huult]

If the backend doesn't have a solution to update it, I think we can still fix this on the frontend, and we can add it to requestsToIgnoreLastUpdateID because, upon checking, it seems we don't need to wait for any requests to update fields in the add attachment request.

[rlinoz]

Im not being able to repro this 🤔

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[rlinoz]

Waiting for proposals.

[rlinoz]

Still watiting

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@rlinoz, @Pujan92, @RachCHopkins Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[rlinoz]

Waiting for proposals and retest

[rlinoz]

Waiting for proposals and retest

[rlinoz]

Might get fixed here though #53417

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@rlinoz, @Pujan92, @RachCHopkins Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[rlinoz]

Looking here #53417 (comment) I will go ahead and close this issue on favor of that comment/issue.

Let me know if you think I should reopen this one @kubabutkiewicz

[kubabutkiewicz]

Hi, wanted to ask if this is still reproducible? I was trying today and no luck but I see that fix to backend about order of ids from here #51712 (comment) is deployed so maybe its also fixed that issue?

[rlinoz]

I was never really able to reproduce this, can you please try @Pujan92?

[Pujan92]

I tried when @rlinoz closed the issue and couldn't reproduce it. so it might be fixed with the backend fix as mentioned by @kubabutkiewicz.