Expensify Bug: 'Not Here' Page On Bulk Delete

by Alex Johnson 46 views

Encountering unexpected issues while managing your expenses in Expensify can be frustrating. One such issue reported by the Applause Internal Team involves a brief appearance of the 'Not here' page after bulk deleting expenses. This article dives into the details of this bug, its impact, and potential workarounds.

Understanding the Issue

The core problem lies in a momentary display of the 'Not here' page immediately following a bulk deletion of expenses within the Expensify application. While the functionality of deleting expenses remains intact, this unexpected page appearance can disrupt the user experience and create confusion. This bug was identified on version 9.2.62-0 and is reproducible in the staging environment but not in the production environment.

Steps to Reproduce

To replicate this issue, follow these steps:

  1. Navigate to staging.new.expensify.com.
  2. Enter any chat within the application.
  3. Create an expense within the chat.
  4. Open the expense report to view the newly created expense.
  5. Create an additional expense to have multiple expenses for bulk deletion.
  6. Select all expenses by utilizing the checkbox feature.
  7. Click on the "More" option, usually represented by three dots or a similar icon, to reveal additional actions.
  8. Choose the "Delete" option from the dropdown menu.
  9. Confirm the deletion of the selected expenses.

Expected vs. Actual Result

The expected outcome after deleting the expenses is that the Right Hand Pane (RHP) should close smoothly without any interruptions or unexpected pages. However, the actual result is that the 'Not here' page appears briefly before the RHP closes.

Impact and User Experience

While this bug doesn't prevent users from deleting expenses, the brief appearance of the 'Not here' page can be jarring. It disrupts the flow of the user's workflow and introduces an element of uncertainty. Users might wonder if the deletion was successful or if there's an underlying issue with the application. This can lead to a less polished and professional experience with Expensify.

Technical Details

Environment

  • Version Number: 9.2.62-0
  • Reproducible in staging?: Yes
  • Reproducible in production?: No

Affected Platforms

This issue has been observed on the following platforms:

  • Android: mWeb Chrome
  • MacOS: Chrome / Safari

The bug hasn't been confirmed on other platforms, including native Android and iOS apps, as well as other web browsers and operating systems. This suggests the issue might be specific to the rendering or behavior of Expensify within the Chrome browser on MacOS and Android's mWeb Chrome environment.

Additional Context

This issue was caught during regression testing, specifically identified within this BrowserStack link: https://github.com/Expensify/App/pull/73731.

The affected tester's email is djosijnoijsoijsoi@gmail.com, and it was reported by the Applause Internal Team.

Visual Evidence

The following image illustrates the bug in action:

https://github.com/user-attachments/assets/74c0d18c-533b-4e7b-95f1-9deb36a1bb84

Additionally, a video recording captures the issue:

https://github.com/user-attachments/assets/0a59f1ec-0cc2-4ada-9017-8a93ffa7094e

Potential Causes and Debugging

Identifying the root cause of this bug requires a systematic approach to debugging. Here are some potential areas to investigate:

  1. Component Lifecycle: The 'Not here' page might be a component that's briefly rendered during the RHP closing process. It's crucial to examine the component lifecycle and rendering logic to understand why this page is being displayed, even momentarily.
  2. Asynchronous Operations: The deletion of expenses might trigger asynchronous operations, such as database updates or server requests. If these operations aren't properly synchronized with the UI updates, it could lead to timing issues where the 'Not here' page is rendered before the RHP closes.
  3. State Management: Expensify likely uses a state management system to handle UI updates. Incorrect state transitions or updates during the deletion process could be a contributing factor.
  4. Routing Logic: The application's routing mechanism might be briefly navigating to the 'Not here' page before redirecting to the intended destination. Analyzing the routing logic and navigation flow can help pinpoint the issue.
  5. Platform-Specific Behavior: The fact that the bug is reproducible on Chrome (MacOS and Android mWeb) but not on other platforms suggests a potential platform-specific issue. This could be related to how Chrome handles rendering or JavaScript execution.

Debugging Steps

To effectively debug this issue, developers should consider the following steps:

  • Reproduce the Bug: Consistently reproduce the bug in the staging environment to gain a clear understanding of the behavior.
  • Inspect Browser Console: Utilize the browser's developer tools to inspect the console for any error messages or warnings that might provide clues.
  • Set Breakpoints: Set breakpoints in the relevant code sections, such as the deletion handler and RHP closing logic, to step through the code execution and examine the state at different points.
  • Network Analysis: Monitor the network requests and responses to identify any delays or errors in the communication with the server.
  • Logging: Add logging statements to track the component lifecycle, state transitions, and routing flow.
  • Code Review: Conduct a thorough code review of the affected components to identify potential issues in the logic or implementation.

Workaround

Currently, there is no known workaround for this issue. The functionality of deleting expenses is not impacted, but the brief appearance of the 'Not here' page can be disruptive. Users should be aware of this behavior and understand that it doesn't indicate a failure in the deletion process.

Conclusion

The brief appearance of the 'Not here' page after bulk deleting expenses in Expensify is a minor but noticeable bug that impacts user experience. While it doesn't hinder the functionality of expense deletion, it can create confusion and disrupt workflow. The issue has been identified and reported, and developers are likely working on a solution. By understanding the steps to reproduce the bug and the potential causes, users can better navigate this issue until a fix is implemented. Remember to stay informed about updates and releases from Expensify to ensure you have the latest bug fixes and improvements.

For more information about Expensify and its features, you can visit their official website. You can also check out helpful resources and guides about expense management best practices on sites like www.example-expense-management-resource.com (This is a placeholder, please replace with a real, relevant link).