[$1000] Web - Chat - Offline avatar is not updated until page refresh

kbecciv commented 1 year 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!

Action Performed:

Go to https://staging.new.expensify.com/
Login to an account which has more than 20 chats
Disable the internet connection
Navigate to search page
Scroll and select a chat with offline default avatar
Enable the internet connection

Expected Result:

Avatar should be updated to default online image

Actual Result:

Offline avatar gets grey and is not updated until page refresh.

Workaround:

Unknown

Platforms:

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

[ ] Android / native
[x] Android / Chrome
[ ] iOS / native
[x] iOS / Safari
[x] Windows / Chrome
[ ] MacOS / Desktop

Version Number: 1.3.6.0

Reproducible in staging?: Yes

Reproducible in production?: yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

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

Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/93399543/234732792-7e5240dd-2119-40a7-aae9-42fae89cfc9d.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0152f84f02db9bee1c
Upwork Job ID: 1673533068774096896
Last Price Increase: 2023-07-04

MelvinBot commented 1 year ago

Triggered auto assignment to @sophiepintoraetz (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

MelvinBot commented 1 year ago

Bug0 Triage Checklist (Main S/O)

[x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
[x] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
[x] This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
[x] This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
[ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

sophiepintoraetz commented 1 year ago

I'm not able to reproduce this - my avatars updated without having to refresh the page (i.e. I just re-enabled the wifi)

https://user-images.githubusercontent.com/42940078/234776736-539e14fe-d410-46c9-a25f-21cb783400cf.mp4

lanitochka17 commented 1 year ago

Hello. Issue reproducible. Build 1.3.31.2.

https://github.com/Expensify/App/assets/78819774/a63abe2b-ef6a-49b7-a208-198791367f6f

sophiepintoraetz commented 1 year ago

Okay yup - I can reproduce this: 2023-06-27_15-22-02 (1)

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

Current assignee @sophiepintoraetz is eligible for the External assigner, not assigning anyone new.

melvin-bot[bot] commented 1 year ago

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

crazy-coding commented 1 year ago

Proposal

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

The offline avatar is not updated until the page refresh

What is the root cause of that problem?

https://github.com/Expensify/App/blob/e5f00f86fb412702e9c212b5a88766a8ef7da611/src/components/Avatar.js#L64:L73

The image is being loaded while the device is offline.

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

We should implement a mechanism to prevent the images from being fetched while the device is offline. This can be done by checking the user's network connection before fetching the images, and only fetching them if the connection is active.

melvin-bot[bot] commented 1 year ago

📣 @crazy-coding! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:
```
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>
```

crazy-coding commented 1 year ago

Contributor details Your Expensify account email: devjames214@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~0178098f00493ac910

melvin-bot[bot] commented 1 year ago

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

s77rt commented 1 year ago

@crazy-coding Thanks for the proposal. I wasn't able to reproduce the bug but I doubt your RCA being correct. As per the attached videos the avatar seems to reload but "fails?" with a grey image. Can you explain why is that happening? Is that because we are not passing the proper source or the source is not even loaded (no http request is made)

s77rt commented 1 year ago

@sophiepintoraetz I'm not able to reproduce this bug. Can we get better/easier reproduction steps?

crazy-coding commented 1 year ago

@s77rt This issue is unlikely to occur in production. Because it can occur if the link to the avatar image is broken for any reason. So the browser couldn't load the image but cached a gray image as you can see in the video.

For your reference, here are the steps to reproduce this bug.

Run the application locally without an internet connection.
The browser can access the application using a local address, but it will not fetch avatar images from the cloud.
When you reconnect to the internet, the avatar image is changed to a cached gray (empty) image. This is because of a state variable that triggers the condition for using the default avatar or not.

sophiepintoraetz commented 1 year ago

@s77rt - can you upload a video of you attempting to replicate the OP steps on staging? It's difficult to know where to improve the steps because I think they're pretty clear?

s77rt commented 1 year ago

@crazy-coding I was able to reproduce finally :grin:. I don't think your RCA is correct. On reconnect the image is fetched again but not displayed. I think this may have to do with background-image css style not re-rendering the image but not sure.

https://github.com/Expensify/App/assets/16493223/b2982964-2945-459e-9096-84898d779ae8

s77rt commented 1 year ago

@sophiepintoraetz While trying to make a video for how it's not working for me, it worked :sweat_smile:. Thanks!

crazy-coding commented 1 year ago

@s77rt I investigated all styles for this bug, but I couldn't find any specific problem with the style. I think react-native-image is using a cached image even if it loads the image later. I found an interesting thing that the <img> tag works normally instead of <RNImage> component of react-native. Actually, I am not sure this helps but I think we can use react-native-image-cache or react-native-cached-image library for cleaning cached image for previous URI.

s77rt commented 1 year ago

@crazy-coding I think we need to investigate this more before jumping into solutions

sophiepintoraetz commented 1 year ago

@s77rt - can we give more specific guidance on what needs to be investigated? If we're not sure, I'll need to take this to an external agency due to it being an older issue (and get it resolved quickly)

s77rt commented 1 year ago

@sophiepintoraetz Still looking for proposals that explain the root cause of that bug. This issue went external just 2 days ago so I think we can give it more time.

arthurmfgtab commented 1 year ago

Hey, @s77rt @sophiepintoraetz I'm Arthur from Callstack - expert contributor group - and I'd like to take a look at this issue

pasyukevich commented 1 year ago

Hi, @s77rt @sophiepintoraetz I'm Eugene from Callstack - an expert contributor group. I will take this issue in my work from Arthur as he was assigned to another issue.

crazy-coding commented 1 year ago

Hi, @s77rt @pasyukevich I don't know if "Callstack - an expert contributor group" has more priority than an Upwork freelancer like me.

I have investigated the bug thoroughly, including the exact reason and all possible cases. As I suspected, the bug is caused by a cache problem in the React-Native Image component.

React-Native Image uses background-image style instead of the img tag, which is common in web browsers. This can lead to a cache problem which is a chronic problem, where the wrong image is displayed in offline situations.

I have focused on finding a solution that will avoid caching the wrong image in offline situations. I have written code that successfully solves this problem.

It is important to note that this bug could occur not only with avatar images but with all images on the application. So It is possible that we will need to create a module to implement this functionality.

Here's the actual record and result record. Actual:

https://github.com/Expensify/App/assets/51104065/362bbbe7-c99e-406a-b8b3-3a8a242c043a

Result:

https://github.com/Expensify/App/assets/51104065/ac75e6be-25cc-4c7c-ba93-6abbc4fcd8d1

s77rt commented 1 year ago

@crazy-coding As far as I can tell:

User is offline
Div is mounted, it uses background-image style
The image is being fetched
Fetching the image failed
Div is updated with fallback icon
User is online
Div is updated and uses background-image style (same as in 2)
Browser sees the same url and remembered that the url is broken
Browser does not even make a new request
No image is loaded
The grey image is not a cached image but just a fill color (from background-color)

The simplest solution I guess is to prevent step 2, if we are offline we should not even bother load the image. Can you please update your proposal based on that?

I was doing some experiments on that as well:

https://github.com/Expensify/App/assets/16493223/d0c9e2ca-d6e1-4d05-a52a-5fc7db1fadb0

BTW, this issue will only be assigned to one of the agencies member if no proposal is accepted. Please update your proposal and tag me again.

crazy-coding commented 1 year ago

@s77rt Updated

I have tested your try-on record and have identified a few unexpected issues. For example, when the user is offline, all images are displayed as the default avatar, even if they have local(svg) avatars. If the user loads images online and then goes offline, all of the avatars will change to the default avatar.

So I suggest a trick. please check on the updated proposal.

s77rt commented 1 year ago

@crazy-coding

If the user loads images online and then goes offline, all of the avatars will change to the default avatar.

I don't think this is the case. If the images are loaded already then the browser will use the cached version when going offline (unless you disable the cache).

https://github.com/Expensify/App/assets/16493223/a9c656d7-bd6a-4ef0-9027-4b5eaf6c08c5

crazy-coding commented 1 year ago

@s77rt Yes, I updated the solution by checking the offline status when mounting. Can I share solution code here?

s77rt commented 1 year ago

@crazy-coding Sharing code diff is prohibited. Just state what needs to be done in plain English or use pseudo code if needed. You can also pinpoint what code needs to be changed. Please update your proposal and tag me again.

crazy-coding commented 1 year ago

@s77rt I will implement a React hook to check the existence of cached images from the URL when offline. This will ensure that users can still see the images even if they are not connected to the internet. If a cached image exists, it will be displayed. Otherwise, a patterned image will be displayed.

s77rt commented 1 year ago

@crazy-coding I don't see the point of that. It's seems like unnecessary work. Isn't just preventing the images from being fetched while offline enough?

crazy-coding commented 1 year ago

@s77rt Yes, I agree

melvin-bot[bot] commented 1 year ago

@s77rt, @sophiepintoraetz Whoops! This issue is 2 days overdue. Let's get this updated quick!

s77rt commented 1 year ago

@crazy-coding Cool. Can you please update your proposal based on that and let's get this going

crazy-coding commented 1 year ago

@s77rt Updated Proposal

s77rt commented 1 year ago

@crazy-coding Thanks, that should do it!

:ribbon: :eyes: :ribbon: C+ reviewed

Let's go with @crazy-coding's proposal https://github.com/Expensify/App/issues/18057#issuecomment-1609011748. Extended RCA and proof of concept solution: https://github.com/Expensify/App/issues/18057#issuecomment-1613904690

melvin-bot[bot] commented 1 year ago

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

iwiznia commented 1 year ago

Looks good, but not clear how we will trigger the download of the image after the user comes online. Can you explain that a bit please @crazy-coding ?

melvin-bot[bot] commented 1 year ago

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

s77rt commented 1 year ago

@iwiznia We have a hook useOnNetworkReconnect that will cause a re-render.

iwiznia commented 1 year ago

Ah nice!

melvin-bot[bot] commented 1 year ago

📣 @s77rt 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Upwork job

melvin-bot[bot] commented 1 year ago

📣 @crazy-coding You have been assigned to this job! Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs! Keep in mind: Code of Conduct | Contributing 📖

crazy-coding commented 1 year ago

@s77rt @iwiznia I just applied on Upwork.

s77rt commented 1 year ago

@sophiepintoraetz @iwiznia We had to close the PR raised by @crazy-coding. We worked on some solutions but none worked flawlessly. We think this is a browser bug (apparently only Chrome). Chrome caches results for requests that are made offline.

Do you think we should close this or re-open for more proposals?

sophiepintoraetz commented 1 year ago

@s77rt am I understanding that because of a bug in Chrome browser, rather than in the Expensify platform, it's hard to come up with a fix for now?

s77rt commented 1 year ago

@sophiepintoraetz Yes, that's it.

sophiepintoraetz commented 1 year ago

Wow, okay then. I'll wait for @iwiznia to weigh in but I think the only thing we can do is wait until Chrome releases an update that allows us to fix this? (which feels like a can of worms because when that would be, who knows).

iwiznia commented 1 year ago

Chrome caches results for requests that are made offline.

Very odd, did you find a chrome bug report for this? How do you know it is a bug that will be fixed vs expected behavior that will never change?

What are the alternatives?

Expensify / App