[Due for payment 2025-01-22] [$250] Mac/Safari - [AU] Attachment - "WebKitBlobResource error" console error when sending a PDF attachment

[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: 9.0.79-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5386106&group_by=cases:section_id&group_id=292107&group_order=asc
Issue reported by: Applause Internal Team
Device used: macOS Sequoia 15.0 - Safari
App Component: Other

Action Performed:

1. Navigate to https://staging.new.expensify.com/ and open Safari Web Inspector
2. Log in with a new Gmail account
3. Open any 1:1 DM
4. Send any PDF attachment

Expected Result:

Console error shouldn't show.

Actual Result:

"WebKitBlobResource error" console error when sending a PDF attachment to a 1:1 DM.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6703307_1735366281759!Console.txt

Bug6703307_1735366281706.Screen_Recording_2024-12-27_At_22.03.00.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021876132827778405205
• Upwork Job ID: 1876132827778405205
• Last Price Increase: 2025-01-06
• Automatic offers:
• shubham1206agra | Contributor | 105616263

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

[kpadmanabhan]

Proposal

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

Uploading of attachment in 1:1 DM shows console error

What is the root cause of that problem?

Though on an initial look, this may point fingers at Safari unable to handle pdf blobs, it is not a Safari alone issue. As against what's tagged in the title of this bug, this occurs on other browsers as well.

As Blob URLs are temporary in memory references to data from browser memory, a GET call to this URL fails to get it, because the encryptedAuthToken is invalid.

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

If we make a call to the blob URL without the encryptedAuthToken, the call succeeds.

The attachment is added without encryptedAuthToken in
https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx#L262
However a further call to get attachment is made using encryptedAuthToken, which results in display of error message in console.

Remove encryptedAuthToken parameter if reportAction is attachment without any comment.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N.A.

What alternative solutions did you explore? (Optional)

N.A.

[shubham1206agra]

Proposal

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

Attachment - "WebKitBlobResource error" console error when sending a PDF attachment

What is the root cause of that problem?

When we upload the PDF file, we store the file temporarily in Browser file blob storage. But when we try to fetch the file using source, we add the encryptedAuthToken here

App/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx

Line 26 in b7b5dda

const sourceURLWithAuth = addEncryptedAuthTokenToURL(source);

But we should not have added the authToken for temporary file in memory.

This causes the console error since the file could not be loaded.

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

Change source to use without encryptedAuthToken, and add isAuthTokenRequired={!!sourceID} to add the authToken when required.

App/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx

Line 61 in b7b5dda

source={sourceURLWithAuth}

To make the desired behavior, we also have to update the condition here

App/src/components/Attachments/AttachmentView/index.tsx

Line 178 in b7b5dda

if (!hasPDFFailedToLoad && (isSourcePDF || isFilePDF)) {

to stop rendering the pdf view when the file is being uploaded.

Use !isUploading && !hasPDFFailedToLoad && (isSourcePDF || isFilePDF)

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

[RachCHopkins]

I think this is related to last week's fire. @IuliiaHerets can we please get a retest?

[IuliiaHerets]

@RachCHopkins Tester still can reproduce this issue in the latest build v9.0.80-1

Screen.Recording.2025-01-01.At.5.59.51.mp4

[melvin-bot]

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

[RachCHopkins]

I can't repro this at all.

[RachCHopkins]

Ok, confirmed Kadie can repro!

[melvin-bot]

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

[melvin-bot]

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

[hungvu193]

I will review today!

[hungvu193]

, and add isAuthTokenRequired={!!sourceID} to add the authToken when required.

@shubham1206agra Which case do we need this one?

[shubham1206agra]

, and add isAuthTokenRequired={!!sourceID} to add the authToken when required.

@shubham1206agra Which case do we need this one?

When the attachment is uploaded, we need to fetch it from a server. That's why we need authToken then.

[NJ-2020]

Proposal

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

"WebKitBlobResource error" console error when sending a PDF attachment

What is the root cause of that problem?

There's also similar bug on this issue when trying uploading the PDF file, it's because we're trying to encrypting the local source file url

App/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx

Line 26 in e933f4a

const sourceURLWithAuth = addEncryptedAuthTokenToURL(source);

So when the PDF previewer try to load the local source(that has been encrypted) it doesn't work and showing error

It doesn't happen when uploading video because we will only encrypt the source url if it is not local source file

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Line 76 in b23c478

const [sourceURL] = useState(() => VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001));

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

We will encrypt the source url if it's not a local source url similar like what we do for video attachment

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Line 76 in b23c478

const [sourceURL] = useState(() => VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001));

// BaseAnchorForAttachmentsOnly.tsx
const finalSourceURL = FileUtils.isLocalFile(source) ? source : addEncryptedAuthTokenToURL(source);

return (
    <ShowContextMenuContext.Consumer>
            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                <PressableWithoutFeedback
                    style={[style, (isOffline || !sourceID) && styles.cursorDefault]}
                    onPress={() => {
                        if (isDownloading || isOffline || !sourceID) {
                            return;
                        }
                        Download.setDownload(sourceID, true);
                        fileDownload(finalSourceURL, displayName, '', Browser.isMobileSafari()).then(() => Download.setDownload(sourceID, false));
                    }}
            ...
            <AttachmentView
                source={finalSourceURL}
            ...
)

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

[hungvu193]

@shubham1206agra Which case do we need this one?

When the attachment is uploaded, we need to fetch it from a server. That's why we need authToken then.

I can't reproduce it, even when I didn't add isAuthTokenRequired={!!sourceID}, there's still no error shown.

[hungvu193]

Yep, I can reproduce, I just clarify the part of Shubham proposal above.

[melvin-bot]

📣 @shubham1206agra 🎉 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 📖

[hungvu193]

Any ETA for the PR? @shubham1206agra

[shubham1206agra]

@hungvu193 Today

[shubham1206agra]

@hungvu193 I need to do some discussion marked https://expensify.slack.com/archives/C02NK2DQWUX/p1735452999294309

[melvin-bot]

@mjasikowski @hungvu193 @RachCHopkins @shubham1206agra 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!

[hungvu193]

Discussing on slack

[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.85-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fixed PDF console error on uploading #55133

If no regressions arise, payment will be issued on 2025-01-22. 🎊

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

• @hungvu193 requires payment through NewDot Manual Requests
• @shubham1206agra requires payment automatic offer (Contributor)

[melvin-bot]

@hungvu193 / @shubham1206agra @RachCHopkins @hungvu193 / @shubham1206agra The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[hungvu193]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] 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: https://github.com/Expensify/App/pull/44889/files#r1921988161

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: N/A

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Test:

1. Open App.
2. Open any 1:1 DM.
3. Send any PDF attachments.
4. Verify that there's no error in the console.

Do we agree 👍 or 👎

[garrettmknight]

$250 approved for @hungvu193

[RachCHopkins]

Payment Summary:

• Contributor: @shubham1206agra to be paid $250 via Upwork
• Contributor+: @hungvu193 paid $250 via NewDot Manual Request

Upwork job here

[RachCHopkins]

Contributors have been paid, the contract has been completed, and the Upwork post has been closed.