Expensify Bug: HTML Tags In Chat Search & Member Section

by Alex Johnson 57 views

Has anyone else encountered HTML tags appearing in the 'moved this report' chat within Expensify's search and member sections? This issue seems to be affecting both Android and Windows platforms, and it's definitely impacting the user experience. Let's dive into the details of this bug, how to reproduce it, and what the expected behavior should be.

Understanding the Issue: HTML Tags in Chat

The core problem revolves around HTML tags being displayed in the user interface where they shouldn't be. Instead of seeing clean, formatted text, users are seeing raw HTML code, which is both confusing and unprofessional. This issue specifically surfaces in two main areas:

  • Member Section: The header subtitle in the members section incorrectly displays HTML tags.
  • Search: Thread chats within the search results also show these unwanted HTML tags.

This article aims to provide a comprehensive overview of the issue, its impact, and the steps to reproduce it. By understanding the problem thoroughly, we can better address it and ensure a smoother user experience for everyone using Expensify.

Reproducing the Bug: Step-by-Step Guide

To replicate this issue, follow these steps carefully. This will help developers and testers to confirm the bug and work on a fix.

  1. Pre-conditions:
    • Account B needs a default workspace and another workspace with a bank account added.
    • Account A should set their preference currency to USD and send an IOU to user B.
  2. Launch the Expensify app.
  3. Open the IOU.
  4. Tap the pay dropdown and select the workspace with the bank account added.
  5. Navigate to the 1:1 chat.
  6. Open the thread page for the system message "moved this expense."
  7. Tap the header and select members.
  8. Note the header subtitle; check for HTML tags.
  9. Navigate back twice and tap the search icon.
  10. Note the thread chat in the search results; again, check for HTML tags.

By following these steps, you should be able to consistently reproduce the issue where HTML tags are displayed in both the members section and the search results. This consistent reproduction is crucial for debugging and fixing the problem.

Expected vs. Actual Results: What Went Wrong?

To fully grasp the severity of this bug, let's compare the expected and actual results.

Expected Result

  • In the members section, the header subtitle should display clean, formatted text without any HTML tags.
  • In the search results, the thread chat should also appear without any HTML tags, showing the intended message clearly.

Actual Result

  • In the members section, the header subtitle incorrectly shows HTML tags.
  • In the search results, the thread chat is also displayed with HTML tags, making the text unreadable and unprofessional.

The discrepancy between these expected and actual results highlights the need for a fix. Users should not have to decipher HTML code to understand a message or navigate the app. The presence of these tags indicates a rendering issue that needs to be addressed.

Impact and Severity: Why This Bug Matters

The presence of HTML tags in user interfaces, especially in financial applications like Expensify, can have several negative impacts. Understanding these impacts helps prioritize bug fixes and ensures a better user experience.

  1. User Experience: Displaying HTML tags instead of formatted text makes the app look unprofessional and can confuse users. It disrupts the natural flow of interaction and makes it harder for users to find and understand information.
  2. Credibility: For a financial application, trust and credibility are paramount. Seeing raw HTML can erode user confidence in the app's reliability and security.
  3. Accessibility: Users who rely on screen readers or other assistive technologies may have difficulty interpreting content cluttered with HTML tags. This can make the app less accessible and inclusive.
  4. Efficiency: Users may spend more time trying to understand messages or navigate the app, reducing their overall efficiency and productivity.

Given these impacts, it's clear that this bug is more than just a cosmetic issue. It affects the core user experience and can undermine trust in the application. Therefore, addressing this issue should be a high priority.

Technical Details: Digging Deeper

To provide a clearer picture of the technical aspects, here are some additional details:

  • Version Number: The bug was observed in version V9.2.71-5.
  • Reproducibility: The issue is consistently reproducible in both staging and production environments, indicating a persistent problem within the codebase.
  • Platforms Affected: The bug has been confirmed on Android (App) and Windows (Chrome). Further testing may reveal if other platforms are affected.
  • Reported By: The issue was reported by the Applause Internal Team, suggesting that it was caught during internal testing.
  • Device Used: The initial report came from a Redminote 10S running Android 13.
  • App Component: The issue is related to Money Requests, specifically when a report is moved, and the system message is generated.

These technical details offer valuable context for developers working on a fix. Knowing the specific version, platforms, and components involved can help narrow down the source of the bug and expedite the debugging process.

Visual Evidence: Screenshots and Videos

A picture is worth a thousand words, and in the world of bug reporting, screenshots and videos are invaluable. Visual evidence helps developers quickly understand the issue without having to reproduce it themselves. In this case, a screenshot is provided:

This screenshot clearly demonstrates the presence of HTML tags in the member section and search results, making the issue immediately apparent. Such visual aids are essential for efficient bug tracking and resolution.

Workaround and Solutions: Addressing the Bug

Currently, there is no known workaround for this issue. Users encountering this bug will continue to see HTML tags until a fix is implemented. This underscores the importance of finding a permanent solution.

Potential Solutions

  1. Code Review: A thorough review of the code responsible for rendering the chat messages and header subtitles is necessary. The focus should be on identifying where the HTML tags are being included instead of being parsed and rendered correctly.
  2. Input Sanitization: Implement or enhance input sanitization to ensure that HTML tags are properly escaped or removed before being displayed. This can prevent raw HTML from being rendered in the UI.
  3. Template Engine: Ensure that the template engine used by Expensify correctly handles HTML encoding and decoding. A misconfigured template engine can lead to HTML tags being displayed as plain text.
  4. Testing: Implement more robust testing, including UI testing, to catch rendering issues like this early in the development cycle. Automated tests can help prevent regressions and ensure consistent behavior across platforms.

By addressing these potential solutions, the Expensify team can resolve this bug and prevent similar issues from occurring in the future. The goal is to provide a seamless, professional user experience, free from technical glitches like raw HTML tags.

Community and Collaboration: Getting Involved

Expensify encourages community involvement in identifying and resolving issues. If you're interested in contributing, here are a few ways to get involved:

  • Contributing Guidelines: Check out the Expensify contributing guidelines for onboarding information.
  • Slack Channel: Request to join the Expensify Slack channel by emailing contributors@expensify.com. This is a great way to collaborate with other contributors and the Expensify team.
  • Open Jobs on GitHub: View all open jobs on GitHub related to Expensify by visiting this link.

By working together, the community can help Expensify maintain a high-quality application and address issues like this HTML tag bug efficiently.

Conclusion: Ensuring a Smooth User Experience

The issue of HTML tags appearing in the 'moved this report' chat within Expensify's search and member sections is a significant bug that impacts user experience and credibility. By following the steps outlined in this article, you can reproduce the bug, understand its impact, and contribute to finding a solution.

The Expensify team and the community are dedicated to ensuring a smooth, professional user experience. Addressing this bug is a crucial step in that direction. Through collaborative efforts and thorough testing, we can prevent similar issues in the future and maintain the high standards that Expensify users expect.

For more information on contributing to Expensify and staying updated on bug fixes, consider visiting the Expensify GitHub repository.