[HOLD for payment 2024-11-05] [$250] IOU - mWeb - User trying to upload receipt by quickly tapping capture button shows error

[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: v9.0.43-1
Reproducible in staging?: Y
Reproducible in production?: N
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to DM.
3. Submit an expense.
4. Go to transaction thread.
5. Tap Add receipt modal.
6. Quickly tap capture button many times before the camera is initiated.

Expected Result:

User trying to upload receipt by quickly tapping capture button must able to upload receipt.

Actual Result:

User trying to upload receipt by quickly tapping capture button shows error "The receipt didn't upload.Download the file or dismiss this error and lose it."

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6622046_1727886169840.Screenrecorder-2024-10-02-21-46-43-70_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021841557091803230884
• Upwork Job ID: 1841557091803230884
• Last Price Increase: 2024-10-02
• Automatic offers:
• QichenZhu | Contributor | 104415140

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

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

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

[marcochavezf]

This is a frontend issue, making it external to get more 👀

[melvin-bot]

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

[melvin-bot]

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

[marcochavezf]

I cannot reproduce this error consistently in staging. Also, I don't think this specific behavior on mweb should be considered a blocker, but it still needs a fix

[QichenZhu]

Edited by proposal-police: This proposal was edited at 2024-10-03 09:00:50 UTC.

Proposal

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

Quickly tapping the shutter results in an error or crash.

What is the root cause of that problem?

The root causes for web and native platforms are different.

Android mWeb & iOS mWeb

1. This line below calls getScreenshot.

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 487 in efa3274

const imageBase64 = cameraRef.current.getScreenshot();

3. The method returns null when the camera is not ready.
   https://github.com/mozmorris/react-webcam/blob/7522284fd66f98ff2d846e73881f65d35e840dab/src/react-webcam.tsx#L195-L205

4. The line below generates an empty file if the return value is null.

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 490 in efa3274

const file = FileUtils.base64ToFile(imageBase64 ?? '', filename);

5. The server returns an error when the file is empty.

Android Native & iOS Native

1. Quickly tapping the shutter starts multiple asynchronous operations.

After one operation completes, the page navigates back and the camera closes, so the remaining operations fail.

App/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx

Lines 454 to 459 in efa3274

	camera?.current
	?.takePhoto({
	flash: flash && hasFlash ? 'on' : 'off',
	enableShutterSound: !user?.isMutedAllSounds,
	})
	.then((photo: PhotoFile) => {

2. There is a didCapturePhoto state that can lock the camera to make sure only one operation runs at a time. But it only partially works for new money requests and doesn’t work when editing requests.

App/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx

Lines 465 to 470 in efa3274

	if (isEditing) {
	updateScanAndNavigate(file, source);
	return;
	}
	setDidCapturePhoto(true);
	navigateToConfirmationStep(file, source);

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

Android mWeb & iOS mWeb

1. Add an isReady state.

const [isReady, setIsReady] = useState(false);

2. Set it to true in the onUserMedia handler.
   

   App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

   Line 469 in efa3274

   const setupCameraPermissionsAndCapabilities = (stream: MediaStream) => {

setIsReady(true);

3. Disable and hide the shutter button when it is false.
   

   App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

   Line 634 in efa3274

   accessibilityLabel={translate('receipt.shutter')}

style={[styles.alignItemsCenter, !isReady && styles.opacity0]}
disabled={!isReady}

4. There's one more issue to fix on the backend. If you upload an empty file to an expense, future uploads even with valid photos will always fail for that expense.

Android Native & iOS Native

1. Move Line 469 before Line 454 to lock the camera immediately when the shutter is tapped, so following taps will be ignored.

App/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx

Line 469 in efa3274

setDidCapturePhoto(true);

App/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx

Lines 454 to 455 in efa3274

	camera?.current
	?.takePhoto({

2. Replace Line 471 with the code below to unlock the camera on error.

}, () => {
    setDidCapturePhoto(false);
    showCameraAlert();
    Log.warn('Error reading photo');
});

What alternative solutions did you explore? (Optional)

Android mWeb & iOS mWeb

On the frontend, we can add a null check after calling getScreenshot and return early to simply ignore clicks on the shutter button before the camera is ready.

App/src/pages/iou/request/step/IOURequestStepScan/index.tsx

Line 487 in efa3274

const imageBase64 = cameraRef.current.getScreenshot();

if (imageBase64 === null) {
    return;
}

[Christinadobrzyn]

hi @fedirjh can you review this proposal? TY!

[marcochavezf]

Not overdue waiting for C+ review and/or more proposals

[Christinadobrzyn]

@fedirjh can you provide an update on this? Thanks!

[fedirjh]

@QichenZhu Proposal looks good to me. The root cause analysis and solution seem accurate. Let's move forward with the alternative solution. It is straightforward and does not require any design changes.

🎀 👀 🎀 C+ reviewed

[QichenZhu]

@fedirjh This is marked as Android mWeb only, but I got an error pop-up when testing on Android Native, and the app crashed on iOS Native.

Android	iOS
android.mp4	ios.mov

Do you think it should be handled in a separate issue?

cc @marcochavezf @Christinadobrzyn

[Christinadobrzyn]

I think we can just include it in this issue if it's the same issue on a different device. Does that sound good, @fedirjh?

[QichenZhu]

I think the issue on native platforms is not related to the web issue. Previously, we had an issue #36520, where double tapping the shutter caused an error. It was fixed by #38320 for the new money request workflow but not for the edit request workflow, so it appears here now. The root cause is explained here: #36520 (comment).

[QichenZhu]

Proposal

Updated

Added the root cause and solution for the native platform issue.

[Christinadobrzyn]

@fedirjh can you please review and let us know what you think is best, should these be fixed together or separate?

[melvin-bot]

@marcochavezf @fedirjh @Christinadobrzyn @QichenZhu 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]

@marcochavezf, @fedirjh, @Christinadobrzyn, @QichenZhu Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[marcochavezf]

@QichenZhu thanks for bringing this up, the solution for native LGTM. We can address any other issue (if any) in the PR

[Christinadobrzyn]

Just checking in on this, I think we're working on a PR, is that right @QichenZhu?

[QichenZhu]

@Christinadobrzyn The PR #50770 has been merged and deployed to staging.

[melvin-bot]

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

[melvin-bot]

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

• Fix errors after quickly tapping the shutter #50770

If no regressions arise, payment will be issued on 2024-11-05. 🎊

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

• @fedirjh requires payment through NewDot Manual Requests
• @QichenZhu requires payment automatic offer (Contributor)

[melvin-bot]

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:

• [@fedirjh] The PR that introduced the bug has been identified. Link to the PR:
• [@fedirjh] 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:
• [@fedirjh] 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:
• [@fedirjh] Determine if we should create a regression test for this bug.
• [@fedirjh] 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.
• [@Christinadobrzyn] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/442076

[Christinadobrzyn]

Payouts due:

• Contributor: $250 @QichenZhu (Upwork offer - https://www.upwork.com/nx/wm/offer/104415140)
• Reviewer: $250 @fedirjh (payment through NewDot)

@fedirjh do we need a regression test for this?

[fedirjh]

do we need a regression test for this?

Yes.

Regression Test Proposal

Precondition: Camera permission is granted.

1. Open New Dot on mobile web or native app
2. Go to DM
3. Submit a manual expense
4. Go to transaction thread
5. Tap the receipt placeholder
6. Once you see the shutter button quickly tap it several times before the camera initializes
7. Verify that there is no error message or crash

• Do we agree 👍 or 👎

[Christinadobrzyn]

Awesome! payment day is today. Payment Summary.

Regression test https://github.com/Expensify/Expensify/issues/442076

@fedirjh can you please request payment through ND?

[Christinadobrzyn]

DMd @fedirjh to request payment. Going to close this as complete since that's all that's outstanding.