[Due for payment 2025-12-25] [$250] Hybrid - Red dot is displayed on report preview after dismissed the error messages

[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.67-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #75831
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: iPhone 16 pro/26.1
App Component: Money Requests

Action Performed:

Precondition: Owner creates a workspace and invite member and approver

1. Open app
2. Employee submits expense in workspace chat
3. Employee goes offline
4. Approver at other device approves the expense
5. Employee retract and delete the expense
6. Employee goes back online
7. Employee taps on the expense
8. Employee taps on X button of error message
9. Employee scroll down to the end and tap on X button of error message
10. Employee tap back button for return to report preview

Expected Result:

Report preview should display without error

Actual Result:

Red dot is displayed on the report preview

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/~021995869885087855082
• Upwork Job ID: 1995869885087855082
• Last Price Increase: 2025-12-02
• Automatic offers:
• abzokhattab | Reviewer | 109746585

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

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

[abbasifaizan70]

Proposal

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

When an employee deletes an expense that was approved while they were offline, and then dismisses the error messages that appear, a red dot indicator still remains on the report preview even though all visible errors have been dismissed.

What is the root cause of that problem?

The root cause is in the error dismissal logic in PureReportActionItem.tsx. When errors are dismissed via the X button, the dismissError function only clears:

1. Transaction errors (via clearError(transactionID))
2. Report action errors (via clearAllRelatedReportActionErrors)

However, it does not clear errors from the report's errorFields property.

The red dot indicator is determined by the shouldShowRedBrickRoad function, which uses getAllReportErrors to check for errors. The getAllReportErrors function combines errors from two sources:

1. report.errorFields - Report-level errors stored directly on the report object
2. reportAction.errors - Errors stored on individual report actions

When an expense is deleted offline and then synced online, conflicts can occur (e.g., the expense was approved while offline, then deleted). These conflicts can result in errors being stored in report.errorFields in addition to reportAction.errors.

When the user dismisses errors by clicking the X button, only the reportAction.errors are cleared, but report.errorFields remain. Since getAllReportErrors still finds errors in report.errorFields, the red dot indicator continues to be displayed even though the user has dismissed all visible error messages.

Root Cause Chain:

1. Expense deleted offline → synced online → conflict errors occur
2. Errors stored in both reportAction.errors AND report.errorFields
3. User dismisses errors → only reportAction.errors cleared
4. report.errorFields still contains errors
5. getAllReportErrors finds errors in report.errorFields
6. shouldShowRedBrickRoad returns true → red dot displayed

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

Update the dismissError function in App/src/pages/home/report/PureReportActionItem.tsx to also clear report-level errorFields when dismissing errors.

Specific changes:

1. Import necessary dependencies: Ensure Onyx, ONYXKEYS, and isEmptyObject are available in the file.

2. Update dismissError callback: After clearing transaction and report action errors, also check if the report has any errorFields and clear them:

const dismissError = useCallback(() => {
    const transactionID = isMoneyRequestAction(action) ? getOriginalMessage(action)?.IOUTransactionID : undefined;
    if (transactionID) {
        clearError(transactionID);
    }
    clearAllRelatedReportActionErrors(reportID, action);
    
    // Also clear any report-level errorFields that might be related to this expense
    // This is needed when expenses are deleted offline and synced online, as errors
    // can be stored in report.errorFields in addition to reportAction.errors
    if (report?.errorFields && !isEmptyObject(report.errorFields)) {
        const reportErrorFieldsToClear: Record<string, null> = {};
        Object.keys(report.errorFields).forEach((key) => {
            reportErrorFieldsToClear[key] = null;
        });
        Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
            errorFields: reportErrorFieldsToClear,
        });
    }
}, [reportID, report, clearError, clearAllRelatedReportActionErrors, action]);

This ensures that when errors are dismissed, both report action errors AND report-level errorFields are cleared, which will remove the red dot indicator.

Why this approach:

• It addresses the root cause by clearing all error sources
• It's consistent with how errors are cleared elsewhere in the codebase (using null values in merge operations)
• It's minimal and focused - only adds the missing error clearing logic
• It doesn't affect other functionality since it only runs when errors are explicitly dismissed

What alternative solutions did you explore? (Optional)

Alternative 1: Clear errorFields in clearAllRelatedReportActionErrors
We could modify clearAllRelatedReportActionErrors to also clear report errorFields, but this would be too broad and might clear errors that shouldn't be cleared in other contexts. The dismissal action should be explicit about what it's clearing.

Alternative 2: Filter out errorFields in getAllReportErrors for deleted expenses
We could modify getAllReportErrors to ignore certain errorFields when an expense is deleted, but this would be a workaround that doesn't address the root cause. The errors should be properly cleared when dismissed, not just hidden.

Alternative 3: Clear errorFields when expense is deleted
We could clear errorFields in the delete expense logic, but this doesn't address the case where errors appear after deletion (during sync conflicts) and need to be dismissed by the user.

[samranahm]

Proposal

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

Red dot is displayed on report preview after dismissed the error messages

What is the root cause of that problem?

Currently getAllReportActionsErrorsAndReportActionThatRequiresAttention function iterates through all report actions to check for errors, filtering out only those that are deleted (!isDeletedAction(action)). It does not filter out retracted actions.

App/src/libs/ReportUtils.ts

Line 9233 in cb1fbb1

const reportActionsArray = Object.values(reportActions ?? {}).filter((action) => !isDeletedAction(action));

In a scenario "retract and delete", the action transitions to a RETRACTED state. But because the code doesn't explicitly exclude retracted actions, we still checks them for errors. If that retracted action retains any error data (which happens during the offline sync process), the function returns it as an "action requiring attention," causing the RBR (red dot) to persist on the report preview.

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

we should explicitly adds !isRetractedAction(action) to the filter, to ensures that any RETRACTED action ignored during the error calculation, preventing it from triggering the red dot. This aligns the behavior of retracted actions with deleted actions, which is the correct expected behavior for this feature.

const reportActionsArray = Object.values(reportActions ?? {}).filter((action) => !isDeletedAction(action) && !isRetractedAction(action));

here

App/src/libs/ReportUtils.ts

Line 9233 in cb1fbb1

const reportActionsArray = Object.values(reportActions ?? {}).filter((action) => !isDeletedAction(action));

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.

[melvin-bot]

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

[melvin-bot]

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

[lorretheboy]

Proposal

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

Red dot is displayed on the report preview

What is the root cause of that problem?

When an employee submits an expense --> goes offline --> approver (on another device) approves the expense --> employee (offline) retracts and deletes the expense --> employee goes back online --> Sync conflicts occur, and errors get attached to report actions. When the user clears errors by tapping the X button, the errors on the retracted action may persist, causing the red brick road (RBR) indicator to continue showing.

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

We should clear all report action errors when retraction succeeds

const expenseReportActions = getAllReportActions(expenseReport.reportID);
const clearedReportActionErrors: Record<string, Pick<OnyxTypes.ReportAction, 'errors'>> = {};
Object.keys(expenseReportActions).forEach((reportActionID) => {
      clearedReportActionErrors[reportActionID] = {errors: null};
});

App/src/libs/actions/IOU.ts

Line 11010 in 6121fce

value: {
    [optimisticRetractReportAction.reportActionID]: {
        pendingAction: null,
    },
    ...clearedReportActionErrors,
},

App/src/libs/actions/IOU.ts

Lines 11015 to 11019 in 6121fce

	value: {
	[optimisticRetractReportAction.reportActionID]: {
	pendingAction: null,
	},
	},

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.

[github-actions]

⚠️ @lorretheboy Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[nkdengineer]

Proposal

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

Red dot is displayed on the report preview

What is the root cause of that problem?

The IOU action errors are cleared twice

App/src/components/ReportActionItem/MoneyRequestReceiptView.tsx

Line 233 in 938fac5

clearAllRelatedReportActionErrors(report.reportID, parentReportAction);

The first time is this line which clears all errors

App/src/libs/actions/ReportActions.ts

Line 89 in 938fac5

clearReportActionErrors(reportID, reportAction, keys);

The second time is this line which updates all parentErrorKeys errors to null

App/src/libs/actions/ReportActions.ts

Line 96 in 938fac5

clearAllRelatedReportActionErrors(report.parentReportID, parentReportAction, 'child', parentErrorKeys);

When merging, Onyx now keeps the null value key here, which causes the IOU action to have a key error with null value

https://github.com/Expensify/react-native-onyx/blob/ae1ec3f931ac74c56100f38d9f9269cf8e86596c/lib/OnyxMerge/index.native.ts#L22-L27

And the RBR is shown based on the function here

App/src/libs/ReportUtils.ts

Lines 11015 to 11025 in 938fac5

	function hasActionWithErrorsForTransaction(reportID: string | undefined, transaction: Transaction | undefined): boolean {
	if (!reportID) {
	return false;
	}
	const reportActions = allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`] ?? {};
	return Object.values(reportActions)
	.filter(Boolean)
	.some((action) => {
	if (isMoneyRequestAction(action) && getOriginalMessage(action)?.IOUTransactionID) {
	if (getOriginalMessage(action)?.IOUTransactionID === transaction?.transactionID) {
	return !isEmptyObject(action.errors);

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

Since the null value can appear in the errors object now, we should check if it has the valid error instead

const hasErrors = Object.values(action.errors ?? {}).filter(Boolean).length > 0;
if (isMoneyRequestAction(action) && getOriginalMessage(action)?.IOUTransactionID) {
    if (getOriginalMessage(action)?.IOUTransactionID === transaction?.transactionID) {
        return hasErrors;
    }
    return false;
}
return hasErrors;

App/src/libs/ReportUtils.ts

Lines 11015 to 11025 in 938fac5

	function hasActionWithErrorsForTransaction(reportID: string | undefined, transaction: Transaction | undefined): boolean {
	if (!reportID) {
	return false;
	}
	const reportActions = allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`] ?? {};
	return Object.values(reportActions)
	.filter(Boolean)
	.some((action) => {
	if (isMoneyRequestAction(action) && getOriginalMessage(action)?.IOUTransactionID) {
	if (getOriginalMessage(action)?.IOUTransactionID === transaction?.transactionID) {
	return !isEmptyObject(action.errors);

What alternative solutions did you explore? (Optional)

To prevent the action error from being cleared unexpectedly a second time, we can create clearedReportActionIDs param and check it before clearing the error

function clearAllRelatedReportActionErrors(reportID: string | undefined, reportAction: ReportAction | null | undefined, ignore?: IgnoreDirection, keys?: string[], clearedReportActionIDs?: string[]) {
    const errorKeys = keys ?? Object.keys(reportAction?.errors ?? {});
    if (!reportAction || errorKeys.length === 0 || !reportID) {
        return;
    }

    if (!clearedReportActionIDs || !clearedReportActionIDs.includes(reportAction.reportActionID)) {
        clearReportActionErrors(reportID, reportAction, keys);
        clearedReportActionIDs = [...(clearedReportActionIDs ?? []), reportAction.reportActionID];
    }

    const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
    if (report?.parentReportID && report?.parentReportActionID && ignore !== 'parent') {
        const parentReportAction = getReportAction(report.parentReportID, report.parentReportActionID);
        const parentErrorKeys = Object.keys(parentReportAction?.errors ?? {}).filter((err) => errorKeys.includes(err));

        clearAllRelatedReportActionErrors(report.parentReportID, parentReportAction, 'child', parentErrorKeys, clearedReportActionIDs);
    }

    if (reportAction.childReportID && ignore !== 'child') {
        const childActions = allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportAction.childReportID}`] ?? {};
        for (const action of Object.values(childActions)) {
            const childErrorKeys = Object.keys(action.errors ?? {}).filter((err) => errorKeys.includes(err));
            clearAllRelatedReportActionErrors(reportAction.childReportID, action, 'parent', childErrorKeys, clearedReportActionIDs);
        }
    }
}

App/src/libs/actions/ReportActions.ts

Line 89 in 938fac5

clearReportActionErrors(reportID, reportAction, keys);

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.