[$250] Tags - App freezes on import tags page when download backup is cancelled

[jponikarchuk]

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: v9.2.47-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exploratory around https://test-management.browserstack.com/projects/2219752/test-runs/TR-1880/folder/13176676/41236544/1002489875?p=2
Email or phone of affected tester (no customers): kiatest.78+ck117251@gmail.com
Issue reported by: Applause Internal Team
Device used: iPhone 16/iOS 18.7.1
App Component: Workspace Settings

Action Performed:

1. Launch Hybrid app & sign in with gmail account
2. Create workspace >> More features >> enable tags
3. Navigate to Tags option
4. Add few tags
5. Tap More >> Import spreadsheet
6. Select either Single level of tags or Multi-level tags (upgrade to control WS)
7. Click "download a backup" link
8. Cancel the download (do not save CSV export)
9. Click Cancel (or Switch Tag Levels)
10. Try clicking either Multi-level tags, Single level tags or back button in import tags page

Expected Result:

App should not freeze on import tags page after cancelling tags download backup. User should able to go back to add tag page

Actual Result:

App freezes on import tags page when download backup is cancelled

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021987717028372940651
• Upwork Job ID: 1987717028372940651
• Last Price Increase: 2025-11-10

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

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

[Burhan-Rashid]

Proposal

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

Tags - App freezes on import tags page when download backup is cancelled

What is the root cause of that problem?

Root cause is that when we cancel the download backup, Error is thrown from here:

App/src/libs/fileDownload/index.ios.ts

Line 54 in 5dc4f0c

.then(() => Share.open({url: localPath, failOnCancel: false, saveToFiles: true}))

Share.open({url: localPath, failOnCancel: false, saveToFiles: true})) throws error whenever saveToFiles: true even if we pass failOnCancel as false. The issue is reported by multiple people here: react-native-share/react-native-share#1517
When the error is thrown from the share.open, we directly go to the catch block and call the onDownloadFailed function here:

App/src/libs/fileDownload/index.ios.ts

Lines 58 to 63 in 5dc4f0c

	.catch(() => {
	if (!onDownloadFailed) {
	showGeneralErrorAlert();
	}
	onDownloadFailed?.();
	});

And we are already passing the onDownloadFailed function as second parameter at multiple places in this file:

App/src/pages/workspace/tags/ImportTagsOptionsPage.tsx

Lines 110 to 119 in 5dc4f0c

	if (hasIndependentTags && isMultiLevelTags) {
	downloadMultiLevelIndependentTagsCSV(policyID, () => {
	setIsDownloadFailureModalVisible(true);
	});
	} else {
	downloadTagsCSV(policyID, () => {
	setIsDownloadFailureModalVisible(true);
	});
	}
	}}

App/src/pages/workspace/tags/ImportTagsOptionsPage.tsx

Lines 136 to 145 in 5dc4f0c

	if (hasIndependentTags && isMultiLevelTags) {
	downloadMultiLevelIndependentTagsCSV(policyID, () => {
	setIsDownloadFailureModalVisible(true);
	});
	} else {
	downloadTagsCSV(policyID, () => {
	setIsDownloadFailureModalVisible(true);
	});
	}
	}}

Which causes the failure modal to open:

App/src/pages/workspace/tags/ImportTagsOptionsPage.tsx

Lines 209 to 217 in 5dc4f0c

	<DecisionModal
	title={translate('common.downloadFailedTitle')}
	prompt={translate('common.downloadFailedDescription')}
	isSmallScreenWidth={isSmallScreenWidth}
	onSecondOptionSubmit={() => setIsDownloadFailureModalVisible(false)}
	secondOptionText={translate('common.buttonConfirm')}
	isVisible={isDownloadFailureModalVisible}
	onClose={() => setIsDownloadFailureModalVisible(false)}
	/>

But in our case the failure modal gets opened in background and prevents the user from making any interaction and it seems to user like the app has freezed.

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

We need to handle the error catching in case user has cancelled the file saving. For that we need to add a catch block here:

App/src/libs/fileDownload/index.ios.ts

Lines 53 to 55 in 5dc4f0c

	return RNFS.writeFile(localPath, fileData, 'utf8')
	.then(() => Share.open({url: localPath, failOnCancel: false, saveToFiles: true}))
	.then(() => RNFS.unlink(localPath));

                return RNFS.writeFile(localPath, fileData, 'utf8')
                    .then(() => Share.open({url: localPath, failOnCancel: false, saveToFiles: true}))
                    .catch((error) => {
                        if (error?.message === 'CANCELLED' || error?.message === 'User did not share' || error?.error === 'User did not share') {
                            return; // user canceled — no need to throw
                        }
                        throw error;
                    })
                    .then(() => RNFS.unlink(localPath));
            });

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ShridharGoel]

Proposal

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

App freezes on import tags page when download backup is cancelled.

What is the root cause of that problem?

The iOS download helper always treats Share.open errors the same way. When the native picker is canceled, react-native-share rejects with PICKER_WAS_CANCELLED.

See this in the library: https://github.com/react-native-share/react-native-share/blob/0e5dde11bb27c0f9a16e75c851dc0968b6f355e4/ios/RNShare.mm#L376-L381

Since when the Files picker is cancelled, the Promise rejects and we immediately hit the failure handler, which keeps the blocker overlay active even though no modal pops up. That’s why the UI feels frozen.

App/src/libs/fileDownload/index.ios.ts

Lines 48 to 63 in 5dc4f0c

	.then((fileData) => {
	const finalFileName = appendTimeToFileName(fileName ?? 'Expensify');
	const expensifyDir = `${RNFS.DocumentDirectoryPath}/Expensify`;
	const localPath = `${expensifyDir}/${finalFileName}`;
	return RNFS.mkdir(expensifyDir).then(() => {
	return RNFS.writeFile(localPath, fileData, 'utf8')
	.then(() => Share.open({url: localPath, failOnCancel: false, saveToFiles: true}))
	.then(() => RNFS.unlink(localPath));
	});
	})
	.catch(() => {
	if (!onDownloadFailed) {
	showGeneralErrorAlert();
	}
	onDownloadFailed?.();
	});

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

Update postDownloadFile to recognize cancellation messages and skip the failure path when they occur. The helper should still remove temporary files, but it should quietly return instead of showing the blocking modal. The updated code in src/libs/fileDownload/index.ios.ts looks like this:

type ShareError = Error & {
    code?: string;
    error?: string | {code?: string; message?: string};
};

const SHARE_CANCELLATION_KEYWORDS = ['PICKER_WAS_CANCELLED', 'CANCELLED', 'User did not share'];

const doesValueIndicateCancellation = (value?: string) => {
    if (!value) {
        return false;
    }
    return SHARE_CANCELLATION_KEYWORDS.some((keyword) => value.includes(keyword));
};

const isShareCancelledError = (error: unknown): error is ShareError => {
    if (!error) {
        return false;
    }
    if (typeof error === 'string') {
        return doesValueIndicateCancellation(error);
    }
    if (error instanceof Error && doesValueIndicateCancellation(error.message)) {
        return true;
    }
    if (typeof error === 'object') {
        const shareError = error as ShareError;
        if (doesValueIndicateCancellation(shareError.code)) {
            return true;
        }
        if (typeof shareError.error === 'string') {
            return doesValueIndicateCancellation(shareError.error);
        }
        if (typeof shareError.error === 'object') {
            return doesValueIndicateCancellation(shareError.error.code) || doesValueIndicateCancellation(shareError.error.message);
        }
    }
    return false;
};

const postDownloadFile = (url: string, fileName?: string, formData?: FormData, onDownloadFailed?: () => void) => {
    // .... existing code
        .then((fileData) => {
            const finalFileName = appendTimeToFileName(fileName ?? 'Expensify');
            const expensifyDir = `${RNFS.DocumentDirectoryPath}/Expensify`;
            const localPath = `${expensifyDir}/${finalFileName}`;
            return RNFS.mkdir(expensifyDir)
                .then(() => RNFS.writeFile(localPath, fileData, 'utf8'))
                .then(() => Share.open({url: localPath, failOnCancel: false, saveToFiles: true}))
                .catch((error) => {
                    if (isShareCancelledError(error)) {
                        return;
                    }
                    throw error;
                })
                .finally(() => {
                    RNFS.unlink(localPath).catch(() => {});
                });
        })
        .catch((error) => {
            if (isShareCancelledError(error)) {
                return;
            }
            if (!onDownloadFailed) {
                showGeneralErrorAlert();
            }
            onDownloadFailed?.();
        });
};

Simulator.Screen.Recording.-.iPhone.16.Plus.-.2025-11-10.at.00.32.30.mp4

[Krishna2323]

Proposal

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

• Tags - App freezes on import tags page when download backup is cancelled
• Cancelling the iOS “Save to Files” picker causes a thrown error even when failOnCancel: false is passed.

What is the root cause of that problem?

• In ImportTagsOptionsPage, the TextLink triggers a new modal while the previous modal (ConfirmModal in ImportTagsOptionsPage) is still mounted. After the confirmation modal dismissed, interaction remains blocked due to the stacked overlays.
  

  App/src/pages/workspace/tags/ImportTagsOptionsPage.tsx

  Lines 134 to 146 in 5dc4f0c

  	<TextLink
  	onPress={() => {
  	if (hasIndependentTags && isMultiLevelTags) {
  	downloadMultiLevelIndependentTagsCSV(policyID, () => {
  	setIsDownloadFailureModalVisible(true);
  	});
  	} else {
  	downloadTagsCSV(policyID, () => {
  	setIsDownloadFailureModalVisible(true);
  	});
  	}
  	}}
  	>

• In other places (e.g., WorkspaceTagsPage, WorkspaceCategoriesPage, WorkspaceMembersPage), we already call close(() => startDownload()) to unmount the modal/popover before starting the download, which prevents the freeze.
  

  App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

  Lines 421 to 437 in 5dc4f0c

  	onSelected: () => {
  	if (isOffline) {
  	close(() => setIsOfflineModalVisible(true));
  	return;
  	}
  	close(() => {
  	if (hasIndependentTags) {
  	downloadMultiLevelIndependentTagsCSV(policyID, () => {
  	setIsDownloadFailureModalVisible(true);
  	});
  	} else {
  	downloadTagsCSV(policyID, () => {
  	setIsDownloadFailureModalVisible(true);
  	});
  	}
  	});
  	},

  
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 310 in 5dc4f0c

  close(() => setIsOfflineModalVisible(true));

  
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Lines 340 to 350 in 5dc4f0c

  	onSelected: () => {
  	if (isOffline) {
  	close(() => setIsOfflineModalVisible(true));
  	return;
  	}
  	close(() => {
  	downloadCategoriesCSV(policyId, () => {
  	setIsDownloadFailureModalVisible(true);
  	});
  	});
  	},

• The native picker always throws a cancellation as an error. This happens even if we pass failOnCancel: false. That error then reaches our postDownloadFile catch block.
  

  App/src/libs/fileDownload/index.ios.ts

  Lines 31 to 64 in 5dc4f0c

  	const postDownloadFile = (url: string, fileName?: string, formData?: FormData, onDownloadFailed?: () => void) => {
  	const fetchOptions: RequestInit = {
  	method: 'POST',
  	body: formData,
  	};
  	return fetch(url, fetchOptions)
  	.then((response) => {
  	if (!response.ok) {
  	throw new Error('Failed to download file');
  	}
  	const contentType = response.headers.get('content-type');
  	if (contentType === 'application/json' && fileName?.includes('.csv')) {
  	throw new Error();
  	}
  	return response.text();
  	})
  	.then((fileData) => {
  	const finalFileName = appendTimeToFileName(fileName ?? 'Expensify');
  	const expensifyDir = `${RNFS.DocumentDirectoryPath}/Expensify`;
  	const localPath = `${expensifyDir}/${finalFileName}`;
  	return RNFS.mkdir(expensifyDir).then(() => {
  	return RNFS.writeFile(localPath, fileData, 'utf8')
  	.then(() => Share.open({url: localPath, failOnCancel: false, saveToFiles: true}))
  	.then(() => RNFS.unlink(localPath));
  	});
  	})
  	.catch(() => {
  	if (!onDownloadFailed) {
  	showGeneralErrorAlert();
  	}
  	onDownloadFailed?.();
  	});
  	};

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

• Close the currently opened modals before opening a new one. Wrap the onPress CB with close(() => cb) so the current modals are unmounted before opening a new one. This matches the working pattern already used elsewhere.
  

  App/src/pages/workspace/tags/ImportTagsOptionsPage.tsx

  Lines 109 to 119 in 5dc4f0c

  	onPress={() => {
  	if (hasIndependentTags && isMultiLevelTags) {
  	downloadMultiLevelIndependentTagsCSV(policyID, () => {
  	setIsDownloadFailureModalVisible(true);
  	});
  	} else {
  	downloadTagsCSV(policyID, () => {
  	setIsDownloadFailureModalVisible(true);
  	});
  	}
  	}}

• Create a util function to handle user-cancel error in postDownloadFile and return from the catch block without calling showGeneralErrorAlert/onDownloadFailed:

const isUserCancelled = (err: unknown) => {
    let msg = '';
    if (typeof err === 'string') {
        msg = err.toLowerCase();
    } else if (err && typeof err === 'object') {
        const errorMessage = (err as {message?: unknown}).message;
        const errorError = (err as {error?: unknown}).error;
        if (typeof errorMessage === 'string') {
            msg = errorMessage.toLowerCase();
        } else if (typeof errorError === 'string') {
            msg = errorError.toLowerCase();
        }
    }
    return /cancel|did not share/.test(msg);
};

.catch((error) => {
    if (isUserCancelled(error)) {
        return;
    }
    if (!onDownloadFailed) {
        showGeneralErrorAlert();
    }
    onDownloadFailed?.();
});

• We also miss the close() wrapper in WorkspacePerDiemPage.
  

  App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

  Lines 301 to 303 in 5dc4f0c

  	downloadPerDiemCSV(policyID, () => {
  	setIsDownloadFailureModalVisible(true);
  	});

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)

Result

[melvin-bot]

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

[melvin-bot]

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

[hungvu193]

Will review today