[HOLD for payment 2024-07-24] [$250] Profile - App crashes when uploading profile picture

lanitochka17 commented 1 month 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.6.0 Reproducible in staging?: Y Reproducible in production?: N If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Email or phone of affected tester (no customers): applausetester+uo0710@applause.expensifail.com Issue reported by: Applause - Internal Team

Action Performed:

Open New Expensify and open profile
Tap profile picture and tap "upload photo"
Select "choose from gallery" and select and photo

Expected Result:

New profile picture is uploaded

Actual Result:

The app crashes on edit profile picture screen

Workaround:

Unknown

Platforms:

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

[ ] Android: Native
[ ] Android: mWeb Chrome
[ ] iOS: Native
[ ] iOS: mWeb Safari
[ ] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/515d1072-afba-4c01-a9f5-aac9e70ad95b

https://github.com/Expensify/App/assets/78819774/24424bb1-0bfe-4d20-9b0c-0e12a67925c1

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~012a2b40164b680402
Upwork Job ID: 1811767351593075552
Last Price Increase: 2024-07-12
Automatic offers:

Ahmed-Abdella | Contributor | 103120778
QichenZhu | Contributor | 103123196

Issue Owner

Current Issue Owner: @muttmuure

melvin-bot[bot] commented 1 month ago

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

melvin-bot[bot] commented 1 month ago

Triggered auto assignment to @yuwenmemon (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

github-actions[bot] commented 1 month ago

:wave: 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:

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

yuwenmemon commented 1 month ago

Able to reproduce.

yuwenmemon commented 1 month ago

Installing a fresh simulator to give this a test

yuwenmemon commented 1 month ago

Seems like this is coming from reanimated, and the ImageCropView component - but nothing was recently changed about them on the staging version 🤔

yuwenmemon commented 1 month ago

@roryabraham Could this somehow have affected the reanimated patch that we apply on staging?

yuwenmemon commented 1 month ago

We renamed the reanimated patches here and I'm not sure why 🤔 - but it looks awfully sus

danieldoglas commented 1 month ago

I don't think this is related to backend, removing the DeployBlocker tag

Julesssss commented 1 month ago

@roryabraham Could this somehow have affected the reanimated patch that we apply on staging?

Tagging the other PR reviewers who are also familiar with the changes: @AndrewGable @fabioh8010

yuwenmemon commented 1 month ago

Damn, I can't reproduce on dev with the iOS simulator 🤔

yuwenmemon commented 1 month ago

Ah, we renamed them to reflect the current version of reanimated we're using in the app.

roryabraham commented 1 month ago

No, I don't think that PR would have affected the Reanimated patch. All that PR does is fail patch-package if it has an errors or warnings.

For the Reanimated patches, they produced warnings because we had updated the version of Reanimated we were using without updating the patches accordingly. This was a mistake easily missed by reviewers, but my PR would have prevented it. In order to get ✅ on the PR, I had to rename the Reanimated patches to suppress the warning(s).

Why do I say this likely did not cause the crash? Because patch-package was already applying the reanimated patches despite the version mis-match. So app should have been unaffected

roryabraham commented 1 month ago

The warning that I fixed looks like this:

Warning: patch-package detected a patch file version mismatch

  Don't worry! This is probably fine. The patch was still applied
  successfully. Here's the deets:

  Patch file created for

    react-native-reanimated@3.7.2

  applied to

    react-native-reanimated@3.8.1

  At path

    node_modules/react-native-reanimated

  This warning is just to give you a heads-up. There is a small chance of
  breakage even though the patch was applied successfully. Make sure the package
  still behaves like you expect (you wrote tests, right?) and then run

    patch-package react-native-reanimated

  to update the version in the patch file name and make this warning go away.

yuwenmemon commented 1 month ago

We're trying a revert of Rory's PR here: https://github.com/Expensify/App/pull/45312

melvin-bot[bot] commented 1 month ago

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

melvin-bot[bot] commented 1 month ago

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

yuwenmemon commented 1 month ago

Let's see if anyone from the community has an idea how to fix. I think we'd want to build on https://github.com/Expensify/App/pull/45314 in some way maybe

QichenZhu commented 1 month ago

Proposal

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

App crashes when uploading an avatar.

What is the root cause of that problem?

Just as the error message states, tried to synchronously call non-worklet functions on the UI thread.

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

In addition to @yuwenmemon's PR https://github.com/Expensify/App/pull/45314, we need to make the function below a worklet too. https://github.com/Expensify/App/blob/fef8ef8c30e69b1807c9ec958e744dbc37816597/src/components/AvatarCropModal/ImageCropView.tsx#L59-L67

What alternative solutions did you explore? (Optional)

N/A

Ahmed-Abdella commented 1 month ago

Proposal

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

App crashes when uploading an avatar.

What is the root cause of that problem?

The issue happens inside the Slider component.

Screenshot 2024-07-13 at 10 20 09 PM

in useAnimatedStyle function we didn't add the dependencies array

https://github.com/Expensify/App/blob/4ae133db275f32b59592e40a54ef6727c8f4891e/src/components/AvatarCropModal/Slider.tsx#L33-L35

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

We need to add the dependencies array and add the SliderValue inside it.

   const rSliderStyle = useAnimatedStyle(() => ({
        transform: [{translateX: sliderValue.value}],
    }), [sliderValue]);

Result

https://github.com/user-attachments/assets/49e653ca-9fe6-4518-80f6-a520cf0f3d89

What alternative solutions did you explore? (Optional)

N/A

Ahmed-Abdella commented 1 month ago

I think my solution also fixes this issue #45164 maybe partially. it makes the slider moves after click to show that the image is zoomed.

Julesssss commented 1 month ago

Exellent find @Ahmed-Abdella. This is the much simpler solution and I'm going to go ahead and create the PR myself now due to the high priority. Assigning you for the bounty.

@QichenZhu I would be interested to hear more about your proposals perhaps it is a secondary fix that should be made on top of the simpler changes?

melvin-bot[bot] commented 1 month ago

📣 @Ahmed-Abdella 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job ~~Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻~~ Keep in mind: Code of Conduct | Contributing 📖

Julesssss commented 1 month ago

Again, no need for the PR here.

Julesssss commented 1 month ago

I think my solution also fixes this issue #45164 maybe partially. it makes the slider moves after click to show that the image is zoomed.

If I remember correctly, that is the same behaviour that we saw last week.

Pujan92 commented 1 month ago

Commenting for the assignment

QichenZhu commented 1 month ago

@QichenZhu I would be interested to hear more about your proposals perhaps it is a secondary fix that should be made on top of the simpler changes?

@Julesssss Thanks for your interest. My proposal is on top of @yuwenmemon's PR https://github.com/Expensify/App/pull/45314. Regarding the simpler solution by adding a dependencies array, it was also my initial thought. Unfortunately, it didn't fix the crash on iOS native.

Ahmed-Abdella commented 1 month ago

Thanks @Julesssss for your words and offer accepted. Looks like there are some changes happened in the behavior of the useAnimatedStyle and the Reanimated package in 3.8.0. Maybe this PR in react-native-reanimated and it's related issue help us to understand. I also found many other issues around the usAnimatedStyle dependencies Array. I will keep working on this trying to solve the other issue #45164

Pujan92 commented 1 month ago

@Ahmed-Abdella for iOS it is still throwing an error [Reanimated] Tried to synchronously call a non-worklet function on the UI thread.

Ahmed-Abdella commented 1 month ago

Will check Now

QichenZhu commented 1 month ago

@Julesssss @Pujan92 My proposal works on iOS.

https://github.com/user-attachments/assets/bfeb64e9-e127-45d0-8ba1-052b68ae97a0

Julesssss commented 1 month ago

@QichenZhu -- yeah, I missed that the accepted proposal didn't work on iOS.

Do you think your solution would work alongside the accepted proposal?

QichenZhu commented 1 month ago

@Julesssss Tested and it doesn't work with the accepted proposal, but works with https://github.com/Expensify/App/pull/45314.

Julesssss commented 1 month ago

I will keep working on this trying to solve the other issue https://github.com/Expensify/App/issues/45164

Okay thanks, in the meantime I'll need to switch proposals as this issue is a major blocker for us internally. We can sort out bounties later.

Julesssss commented 1 month ago

@Julesssss Tested and it doesn't work with the accepted proposal, but works with #45314.

@QichenZhu could you please go ahead with your proposal? I have just merged @yuwenmemon's PR, so pleasepull main before you branch from it.

melvin-bot[bot] commented 1 month ago

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

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

QichenZhu commented 1 month ago

Thanks, @Julesssss! Starting now.

Ahmed-Abdella commented 1 month ago

Okay thanks, in the meantime I'll need to switch proposals as this issue is a major blocker for us internally. We can sort out bounties later.

@Julesssss Sure thing. I just couldn't test it on iOS because there was a bug causing an iOS build failure.

Julesssss commented 1 month ago

Hey @Pujan92, @QichenZhu's PR is ready for testing now/ Let us know if you aren't available. thanks

Pujan92 commented 1 month ago

Yes @Julesssss , looking into it and testing

melvin-bot[bot] commented 1 month ago

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot[bot] commented 1 month ago

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.7-8 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2024-07-24. :confetti_ball:

For reference, here are some details about the assignees on this issue:

@Pujan92 does not require payment (Contractor)
@applausebot requires payment (Needs manual offer from BZ)
@QichenZhu requires payment automatic offer (Contributor)
@Ahmed-Abdella requires payment automatic offer (Contributor)

melvin-bot[bot] commented 1 month ago

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[ ] [@Pujan92] The PR that introduced the bug has been identified. Link to the PR:
[ ] [@Pujan92] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[ ] [@Pujan92] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[ ] [@Pujan92] Determine if we should create a regression test for this bug.
[ ] [@Pujan92] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[ ] [@muttmuure] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

melvin-bot[bot] commented 3 weeks ago

@yuwenmemon, @Pujan92, @applausebot, @muttmuure, @QichenZhu, @Ahmed-Abdella Whoops! This issue is 2 days overdue. Let's get this updated quick!

muttmuure commented 2 weeks ago

@Pujan92 - $250 C+ @QichenZhu - $250 C @Ahmed-Abdella - $250 C

muttmuure commented 2 weeks ago

@Pujan92 can you clarify if we need a regression test?

Pujan92 commented 2 weeks ago

Regression Test Steps

Open profile page
Tap profile picture and select "upload photo"
Select any photo from gallary
Verify that the app doesn't crash

JmillsExpensify commented 2 weeks ago

$250 approved for @Pujan92

melvin-bot[bot] commented 2 weeks ago

@yuwenmemon, @Pujan92, @applausebot, @muttmuure, @QichenZhu, @Ahmed-Abdella Whoops! This issue is 2 days overdue. Let's get this updated quick!

melvin-bot[bot] commented 1 week ago

@yuwenmemon, @Pujan92, @applausebot, @muttmuure, @QichenZhu, @Ahmed-Abdella Still overdue 6 days?! Let's take care of this!

Expensify / App