Expensify: Offline Report Deletion Accessibility Bug

by Alex Johnson 53 views

Introduction

In this article, we delve into a critical bug identified within Expensify, a popular expense management application. Specifically, this issue revolves around the accessibility and selection of reports that have been deleted while the application is in offline mode. This bug, discovered in version 9.2.62-2, has significant implications for user experience and data integrity. Understanding the intricacies of this issue is crucial for both users and developers to ensure seamless and reliable expense management. This article will provide a detailed overview of the bug, its impact, and the steps taken to reproduce and address it. This issue highlights the challenges of maintaining data consistency in offline scenarios and underscores the importance of robust error handling and synchronization mechanisms in modern applications.

Bug Report Details

Version and Environment

The bug was identified in version 9.2.62-2 of the Expensify application. It is reproducible in the staging environment but does not exist in the production environment, as it pertains to a new feature. This distinction is crucial as it allows developers to address the issue before it affects the broader user base. The bug was initially caught during regression testing, specifically within the scope of a pull request (https://github.com/Expensify/App/pull/71199). The discovery during regression testing underscores the importance of thorough quality assurance processes in software development. The bug was reported by the Applause Internal Team, with the affected tester using a Mac 15.5 running Chrome. The relevant app component is Money Requests.

Steps to Reproduce

To replicate the bug, the following steps were performed:

  1. Navigate to staging.new.expensify.com.
  2. Enter a workspace chat.
  3. Create an expense without a category (to ensure the expense has a violation).
  4. Go to Reports > Reports.
  5. Switch to offline mode.
  6. Select the report using the checkbox.
  7. Click the dropdown button and select “Delete.”
  8. Delete the report.
  9. Click the Review button or go to the Inbox to access the deleted expense.
  10. On mweb, Android, or iOS, long-press on the deleted report and select it.

These steps clearly outline the specific actions required to trigger the bug, making it easier for developers to understand and address the root cause. The detailed nature of these steps is essential for effective debugging and resolution.

Expected vs. Actual Results

The expected and actual results highlight the discrepancies caused by the bug:

Expected Results:

  • Bug 1: The Review button and arrow button on the right should be disabled when the expense is deleted offline.
  • Bug 2: The expense deleted on Reports should no longer be accessible from anywhere within the application.
  • Bug 3: On mweb, Android, and iOS, the report should not be selectable after being deleted offline.

Actual Results:

  • Bug 1: The Review button and arrow button on the right remain clickable even after the expense is deleted offline.
  • Bug 2: The expense deleted offline on Reports can still be accessed from the Inbox.
  • Bug 3: On mweb, Android, and iOS, the report remains selectable after offline deletion. On the web version, the checkbox appears green but without a checkmark when the report is deleted offline.

These discrepancies demonstrate the core issues stemming from the bug, primarily concerning the persistence of deleted reports and the incorrect state of UI elements. The differences between expected and actual results clearly define the scope and impact of the bug.

Impact and Workaround

The bug's impact is significant, as it leads to inconsistencies in the application's state and potential data integrity issues. Users might inadvertently access or interact with reports that should no longer exist, leading to confusion and errors. The fact that there is currently no known workaround further underscores the urgency of addressing this issue. The absence of a workaround highlights the need for a prompt and effective solution from the development team to mitigate any potential user impact.

Detailed Analysis of the Bugs

Bug 1: Clickable Review and Arrow Buttons

The first bug identified pertains to the Review and arrow buttons remaining clickable even after an expense is deleted offline. This behavior is unexpected and problematic for several reasons. The primary issue is the user interface inconsistency. When an item is deleted, particularly in an offline state, the intuitive behavior is for any associated actions or controls to be disabled or removed. This prevents users from attempting actions on items that are no longer valid, which can lead to errors or unexpected application behavior.

Furthermore, clickable buttons for deleted items can create a confusing user experience. Users might click these buttons expecting a certain action, only to encounter an error or an unresponsive interface. This not only frustrates the user but also undermines their trust in the application's reliability. The technical challenge here lies in the application's state management. The UI elements are not correctly reflecting the underlying data state, specifically the deletion status of the expense report. The application fails to properly disable or update the buttons when the deletion occurs in offline mode, indicating a potential synchronization or state update issue.

Bug 2: Accessible Deleted Expense from Inbox

The second bug reveals that expenses deleted offline from the Reports section can still be accessed from the Inbox. This is a critical issue as it directly contradicts the expected behavior of a deletion operation. When a user deletes an expense report, they expect it to be removed from all accessible areas within the application. The fact that it remains accessible in the Inbox suggests a failure in the application's data management and synchronization mechanisms.

This bug poses significant data integrity risks. Users might view or interact with deleted data, leading to confusion and potential errors. For instance, a user might inadvertently take action on a report they believe has been permanently removed, which could lead to inconsistencies in their expense records. The persistence of deleted data also raises security concerns. Although the data is intended to be deleted, its continued accessibility could expose sensitive information, especially in regulated industries or for users with strict data privacy requirements.

Bug 3: Selectable Deleted Report Offline

The third bug focuses on the selectability of deleted reports on mobile web (mweb), Android, and iOS platforms. The report should not be selectable once deleted, especially in offline mode. However, the bug allows users to select deleted reports, leading to potential confusion and errors. This issue is particularly noticeable on mobile platforms, where touch interactions make accidental selections more likely. Users might inadvertently select a deleted report, expecting a certain action, only to encounter unexpected behavior or errors.

On the web version, the issue manifests as a green checkbox without a checkmark, further indicating an inconsistent state representation. This discrepancy between platforms suggests a potential issue with the UI component's handling of the deletion status across different environments. The root cause of this bug likely lies in how the application handles selection states in offline mode. The selection mechanism is not properly synchronized with the deletion status, resulting in deleted reports remaining selectable. This lack of synchronization can lead to a disjointed user experience and potentially trigger further errors if users attempt to perform actions on the selected, deleted reports.

Platform-Specific Observations

The bug was observed across various platforms, indicating a widespread issue rather than a platform-specific one:

  • Android: The bug is reproducible in both the native app and the mWeb Chrome environment.
  • iOS: The bug is reproducible in the native app, mWeb Safari, and mWeb Chrome environments.
  • MacOS: The bug is reproducible in Chrome and Safari browsers.

This cross-platform consistency suggests that the underlying issue is likely within the core logic of the application, rather than platform-specific code. The broad impact highlights the importance of addressing this bug promptly, as it affects a wide range of users across different devices and operating systems. The consistent reproduction across different environments also simplifies debugging, as developers can focus on the core logic rather than dealing with platform-specific nuances.

Addressing the Bug

To effectively address this bug, a multi-faceted approach is required:

  1. State Management: Review and revise the application's state management, especially concerning how deletion status is handled and propagated across different components. Ensure that when a report is deleted, its status is consistently updated throughout the application.
  2. UI Updates: Implement robust UI update mechanisms to ensure that UI elements accurately reflect the underlying data state. Buttons and other interactive elements associated with deleted reports should be disabled or removed promptly.
  3. Offline Synchronization: Improve the application's offline synchronization logic to ensure that deletions performed offline are correctly synchronized with the server and other clients once the device is back online.
  4. Data Integrity Checks: Implement additional data integrity checks to prevent access to deleted data. This might involve adding flags or status indicators to data models to clearly mark items as deleted and prevent their retrieval.
  5. Testing: Conduct thorough testing, including unit, integration, and UI tests, to verify that the bug is resolved and that no regressions are introduced. Automated tests should cover both online and offline scenarios.

A comprehensive approach is essential to fully resolve the bug and prevent future occurrences. Addressing the root causes rather than just the symptoms will lead to a more robust and reliable application. The emphasis on testing is particularly crucial to ensure that the fix is effective and does not inadvertently introduce new issues.

Conclusion

The Expensify report deletion bug highlights the challenges of maintaining data consistency and UI integrity in offline scenarios. The fact that deleted reports remain accessible and selectable, and that associated UI elements are not correctly updated, indicates underlying issues in state management and synchronization. Addressing this bug requires a comprehensive approach, focusing on improving state management, UI updates, offline synchronization, and data integrity checks. Thorough testing is essential to ensure the bug is fully resolved and that the application remains reliable across different platforms and environments. By addressing these issues, Expensify can enhance the user experience and maintain the integrity of its expense management system.

For more information on contributing guidelines to Expensify, check out the guidelines on GitHub. This resource provides valuable information for developers looking to contribute to the project and understand best practices for software development.