[$250] [Reproduction Steps] Attachments - Image preview did not load immediately after being received

[isagoico]

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.54-11 Reproducible in staging?: Yes Reproducible in production?: Unknown

Email or phone of affected tester (no customers): [email protected] Logs: https://stackoverflow.com/c/expensify/questions/4856

Issue reported by: @mallenexpensify Slack conversation: #quality

Deliverable

The deliverable is to provide reliable reproduction steps for the bug. - Follow the Propose a solution for a job process to submit the steps for review”. Inc. preconditions and additional details if they’re helpful. (ie. require x beta to be enabled, must be on a Collect plan)

Action Performed:

Precondition: Both user A and B are online at the same time. User A is logged in on Desktop app.

1. As user B - Send a attachment to user A
2. As user A - Check the attachment

Expected Result:

Image preview is displayed in the conversation history

Actual Result:

Grey box shows, image doesn't auto-load (it does load later)

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

onyx data image not showing.txt

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021851730798154046033
• Upwork Job ID: 1851730798154046033
• Last Price Increase: 2024-10-30

Issue Owner

Current Issue Owner: @abdulrahuman5196

[melvin-bot[bot]]

Triggered auto assignment to @strepanier03 (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.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[mallenexpensify]

This just happened again too

{
    "chatType": "policyRoom",
    "currency": "USD",
    "description": "",
    "errorFields": {},
    "hasOutstandingChildRequest": false,
    "hasOutstandingChildTask": false,
    "isCancelledIOU": false,
    "isOwnPolicyExpenseChat": false,
    "isPinned": false,
    "isWaitingOnBankAccount": false,
    "lastActionType": "ADDCOMMENT",
    "lastActorAccountID": "17703070",
    "lastMentionedTime": "2023-09-12 20:11:05.035",
    "lastMessageHtml": "<img src=\"https://www.expensify.com/chat-attachments/7836315334713329999/w_0b2547306b56ed7fdfc3a3c3cfed6b4a8e587b86.png.1024.jpg\" data-expensify-source=\"https://www.expensify.com/chat-attachments/7836315334713329999/w_0b2547306b56ed7fdfc3a3c3cfed6b4a8e587b86.png\" data-name=\"7D7A10CD-0856-4673-9F57-83625709C322.png\" data-expensify-height=\"1080\" data-expensify-width=\"1080\" />",
    "lastMessageText": "[Attachment]",
    "lastReadSequenceNumber": 0,
    "lastReadTime": "2024-10-30 00:30:34.852",
    "lastVisibleActionCreated": "2024-10-30 00:30:21.545",
    "lastVisibleActionLastModified": "2024-10-30 00:30:21.545",
    "nonReimbursableTotal": 0,
    "notificationPreference": "always",
    "oldPolicyName": "",
    "ownerAccountID": 0,
    "participants": {
        "1": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "297463": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "666702": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "3806748": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "4087621": {
            "hidden": false,
            "notificationPreference": "always"
        },
        "14974237": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320017": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320018": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320019": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320020": {
            "hidden": true,
            "notificationPreference": "hidden"
        },
        "15320021": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320022": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320024": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320025": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320026": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320028": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320034": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320035": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320036": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320037": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320038": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320039": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320040": {
            "hidden": false,
            "notificationPreference": "always"
        },
        "15320041": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320042": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320079": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15320603": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15586896": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "15983228": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16011549": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16080975": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16080978": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16131868": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16474093": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16474094": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16486925": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16499795": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16542756": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16557316": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "16713755": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "17362155": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "17506865": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "17703070": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "17870072": {
            "hidden": false,
            "notificationPreference": "daily"
        },
        "18471017": {
            "hidden": false,
            "notificationPreference": "daily"
        }
    },
    "permissions": [
        "read",
        "write",
        "share"
    ],
    "policyAvatar": "",
    "policyID": "1CAFAAA6EAD09539",
    "policyName": "Midtown Beer Garden",
    "private_isArchived": "",
    "reportID": "4764707605323013",
    "reportName": "#midtown-beer-garden-vendors-and-management",
    "stateNum": 0,
    "statusNum": 0,
    "total": 0,
    "type": "chat",
    "unheldNonReimbursableTotal": 0,
    "unheldTotal": 0,
    "visibility": "restricted",
    "welcomeMessage": "",
    "writeCapability": "all",
    "state": "OPEN",
    "lastMessageTranslationKey": "",
    "isEdited": true,
    "managerID": 0
}

[tgolen]

I witnessed this happening in a FullStory session for https://github.com/Expensify/Expensify/issues/439858. There isn't much for reproduction steps, they were trying to upload screenshots to concierge.

[isagoico]

I just experienced this in my conversation with Matt in Web.

My steps were:

1. I had the NewDot tab open but had not interacted with it for a while
2. I received the email notification which prompted me to go back to the tab
3. Tab opened and the image was not displayed

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[mallenexpensify]

Trying to nip this in the bud a bit since a few of us have experienced the bug but can't reliably reproduce.
Let's try to get reproduction steps first then see what might be going on.

Posted in #expensify-open-source too

• https://expensify.slack.com/archives/C01GTK53T8Q/p1730322290771629

[andriivitiv]

Precondition:

• Have a verified account
• Disable cache

Reproduction steps 1

1. Go to staging or dev (not production because Onyx.merge doesn't work there)
2. Open a chat (e.g with concierge)
3. Run the following code in the console. It works similarly to invalidateAuthToken() but also resets encryptedAuthToken - that's the token used specifically to fetch attachments. This step simulates auth token rotation that happens every 2 hours.

   Onyx.merge('session', {authToken: 'pizza', encryptedAuthToken: 'pizza'});
   

4. Open a chat that has an image
5. Observe the image's preview is not loaded
6. Note that the image request was made before Authenticate meaning it used an expired token

Video

https://github.com/user-attachments/assets/82f76b4e-ed24-4123-89c8-7aae5be64cdb

Reproduction steps 2

1. Go to staging or dev (not production because Onyx.merge doesn't work there)
2. Open a chat that has an image
3. Run the command from the previous repro steps
4. Click on the image
5. Observe the image is not loaded

Video

https://github.com/user-attachments/assets/a5a7a226-394f-4379-af72-a4ba37c55426

Reproduction steps 3

(same as https://github.com/Expensify/App/issues/44445#issuecomment-2385800574)

1. Log into OldDot with a gmail account
2. Create a collect policy, Settings > Workspaces > Group > New workspace
3. Create a report Reports > New Report
4. Add a comment to it and an attachment (not receipt)
5. Log into NewDot with the same gmail account
6. Navigate to the report
7. Observe the image is not loaded

Video

https://github.com/user-attachments/assets/bb12249d-6668-43ef-9d01-0fedd56b30ea

[mallenexpensify]

Thx @CyberAndrii . @abdulrahuman5196 can you attempt reproduction based on @CyberAndrii 's steps above? Thx

[mallenexpensify]

Just happened again to me. Vague repro steps

• Had Desktop closed overnight
• Saw comment in a thread that I'm subscribed to
• Clicked on the thread in LHN after it being there for ~5 mins
• thread opened, showed loading spinner then this

Posted in #contributor-plus for bonus 👀 too

[melvin-bot[bot]]

Triggered auto assignment to @stitesExpensify (AutoAssignerNewDotQuality)

[mallenexpensify]

Assigned an engineer to for bonus 👀 and help since this is def a quality issue, added to #quality too.

[andriivitiv]

Added 2 more reproduction steps: https://github.com/Expensify/App/issues/51699#issuecomment-2450789710

The issues are:

1. When an image is fetched with an expired authentication token, the backend currently redirects to www.expensify.com for reauthentication. Instead, it should return a 401 Unauthorized status code.

2. The image url is passed directly to RN's <Image /> component bypassing our middleware so a new token is not issued. It should call reauthenticate('Authenticate') upon receiving a 401 status code and load the image again with the new auth token.

[mallenexpensify]

@stitesExpensify , 👀 plz when you have a minute. Trying to figure out how best to proceed here.

@CyberAndrii , I see in your prerequisites, you have "Disable cache". I'm experiencing the bug and I don't have my cached disabled, what's the reasoning for it needing to be disabled in order to test?

[andriivitiv]

@CyberAndrii , I see in your prerequisites, you have "Disable cache". I'm experiencing the bug and I don't have my cached disabled, what's the reasoning for it needing to be disabled in order to test?

It's just for easier testing, real word steps with cache enabled would be:

1. Have a chat open
2. Wait for 2 hours without interacting with the page. During this time, do not lose internet connection or close the laptop lid. (important)
3. Receive an image

This way the image will be missing from the cache because it's being loaded for the first time.

[melvin-bot[bot]]

@mallenexpensify, @stitesExpensify, @abdulrahuman5196 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mallenexpensify]

@rushatgabhane experienced the bug this morning too, and he def hadn't viewed our chat for over 2 hours.

@stitesExpensify 👀 on above when you have a min

[Kalydosos]

Precondition:

1. Have a verified account
2. have the navigator parameter to pick up where it left off when opened
3. you must deactivate your navigator cache to make the tests more relevant

Reproduction steps

1. Have or open a chat with some images sent as attachments (it works for PDF files also as they turn up into images attachments)
2. have the chat report page open
3. go offline ie either disconnect from network if necessary or close your navigator (preferred). In fact the app must not ping the BE
4. wait for at least 3h. In fact the necessary time for the session to expire in the BE
5. go online ie either reconnect to network or open the navigator (preferred)
6. ensure that the navigator reopens at the same chat report page (you shouldn't have to click on the chat report) It(s a deeplinking access to the report.
7. you should see the bug

NOTE : you can referer to the proposed solution https://github.com/Expensify/App/issues/51888#issuecomment-2453519021 to this bug for more context

Video

https://github.com/user-attachments/assets/72295591-3162-4acd-8431-98c8da2ef195

https://github.com/user-attachments/assets/865639ce-35b9-4237-b7ac-aef3701d7c70

[melvin-bot[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[bot]]

Triggered auto assignment to @lschurr (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.

[mallenexpensify]

@lschurr I'm off the next week, can you please keep an eye on this issue til I'm back? Here's the SO for managing issues where we compensate for reproducible steps. tl,dr: it might be best to wait til I get back :/ That shouldn't stop progress if someone is able to reproduce and propose a solution.

[abdulrahuman5196]

Hi, Will check this today.

[melvin-bot[bot]]

@mallenexpensify @lschurr @stitesExpensify @abdulrahuman5196 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot[bot]]

@mallenexpensify, @lschurr, @stitesExpensify, @abdulrahuman5196 Huh... This is 4 days overdue. Who can take care of this?

[lschurr]

Any update @abdulrahuman5196?

[melvin-bot[bot]]

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

[Kalydosos]

@mallenexpensify @isagoico @abdulrahuman5196 @lschurr @stitesExpensify to help the process of reproduction i can create two branches where :

1. the attachment images dont possess a "data-expensify-source" attribute when renderingh them
2. the session tokens used by the attachment images requests are systematically fake

(check this comment for more context https://github.com/Expensify/App/issues/51888#issuecomment-2453519021)

those two branches will make the issue sources obvious. But i dont know how that will fit into the classical procedures.

[melvin-bot[bot]]

@mallenexpensify, @lschurr, @stitesExpensify, @abdulrahuman5196 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[stitesExpensify]

Hey @Kalydosos thanks for looking into this! I'm not fully following your comment here. Are you just asking if it would be okay to create 2 branches? I think that is totally fine if it shows us what the issue is, and then you could create a PR like normal to fix it