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

isagoico commented 6 days ago

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com 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): mallen@expensify.com 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.

As user B - Send a attachment to user A
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: @stitesExpensify

melvin-bot[bot] commented 6 days ago

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 commented 6 days ago

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

mallenexpensify commented 6 days ago

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 commented 5 days ago

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 commented 5 days ago

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

My steps were:

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

melvin-bot[bot] commented 5 days ago

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

melvin-bot[bot] commented 5 days ago

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

mallenexpensify commented 5 days ago

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

CyberAndrii commented 4 days ago

Precondition:

Have a verified account
Disable cache

Reproduction steps 1

Go to staging or dev (not production because Onyx.merge doesn't work there)
Open a chat (e.g with concierge)
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'});
```
Open a chat that has an image
Observe the image's preview is not loaded
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

Go to staging or dev (not production because Onyx.merge doesn't work there)
Open a chat that has an image
Run the command from the previous repro steps
Click on the image
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)

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

Video

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

mallenexpensify commented 4 days ago

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

mallenexpensify commented 3 days ago

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] commented 3 days ago

Triggered auto assignment to @stitesExpensify (AutoAssignerNewDotQuality)

mallenexpensify commented 3 days ago

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

CyberAndrii commented 1 day ago

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

The issues are:

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.
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 commented 6 hours ago

@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?

Expensify / App