[HOLD for payment 2024-07-22] [$250] Tag - App crashes when saving 0 as custom tag name

@danieldoglas

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: 1.4.83-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4631162
Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to workspace settings > Tags
Click Settings > Custom tag name
Enter 0 and save it

Expected Result:

App will not crash

Actual Result:

App crashes when saving 0 as custom tag name

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Bug6512905_1718353988266.bandicam_2024-06-14_16-29-17-888.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01aa311cffaf18adc9
Upwork Job ID: 1802720126377724186
Last Price Increase: 2024-06-24
Automatic offers:

ZhenjaHorbach | Reviewer | 102869898
bernhardoj | Contributor | 102869900

Issue Owner

Current Issue Owner: @danieldoglas

@slafortune

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

@slafortune

@slafortune FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

We think that this bug might be related to #wave-collect - Release 1

Proposal

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

App crash when trying to save tag name as 0.

What is the root cause of that problem?

When we save the tag name as 0, the BE responds with an invalid error. If it fails, we set an errors object to the policy tag list collection.

App/src/libs/actions/Policy/Tag.ts

Lines 557 to 563 in f0b6355

    
           value: { 
        
               errors: { 
        
                   [oldName]: oldName, 
        
                   [newName]: ErrorUtils.getMicroSecondOnyxError('workspace.tags.genericFailureMessage'), 
        
               }, 
        
               [newName]: null, 
        
               [oldName]: oldPolicyTags,

So, it becomes:

{
errors: {...},
TagName: {...},
}

Then, it crashes in this line of code

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

Line 36 in f0b6355

    
           const hasEnabledOptions = OptionsListUtils.hasEnabledOptions(Object.values(policyTags ?? {}).flatMap(({tags}) => Object.values(tags)));

The code gets the values of the object and then extracts the tags property from them. TagName has the tags property, but errors doesn't have the tags property because it's not a tag.

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

If we see the offline with feedback here,

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

Lines 76 to 78 in f0b6355

    
           <OfflineWithFeedback 
        
               errors={policyTags?.[policyTagLists[0].name]?.errors} 
        
               pendingAction={policyTags?.[policyTagLists[0].name]?.pendingAction}

we can see that the component expects the error property to be added inside the tag object, just like what we did with the pendingAction.

App/src/libs/actions/Policy/Tag.ts

Line 538 in f0b6355

    
           [newName]: {...oldPolicyTags, name: newName, pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD},

So, we need to update the failure data to

[newName]: null,
[oldName]: {
    ...oldPolicyTags,
    errors: ErrorUtils.getMicroSecondOnyxError('workspace.tags.genericFailureMessage'),
},

Last thing we need to do is to clear the error when pressing the offline with feedback close (X) button.

Proposal

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

Naming or renaming policy tag list setting with name as '0' crashes the app with failure.

What is the root cause of that problem?

Error in console.
src\pages\workspace\tags\WorkspaceTagsSettingsPage.tsx

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at eval (WorkspaceTagsSettingsPage.tsx:35:1)
    at Array.flatMap (<anonymous>)
    at WorkspaceTagsSettingsPage (WorkspaceTagsSettingsPage.tsx:33:138)
    at renderWithHooks (react-dom.development.js:16175:18)
    at updateFunctionComponent (react-dom.development.js:20382:20)
    at beginWork (react-dom.development.js:22425:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:16)
    at invokeGuardedCallback (react-dom.development.js:4274:31)

App calls backend API RenamePolicyTaglist with valid oldName property and newName property as '0'. Backend responds back with error.

{
    "code": 666,
    "jsonCode": 402,
    "type": "Expensify\\Error\\InvalidParameterError",
    "UUID": "4456F600-4114-4B54-A7BD-4C3431656E18",
    "message": "Invalid input parameter",
    "title": "",
    "data": [],
    "htmlMessage": "",
    "onyxData": [],
    "requestID": "893aeca77e751c99-AMS"
}

While processing the response after converting policyTags to flatMap, which expects tag names inside it (instead of generic error that comes back from API), the code fails to fetch tags.

var hasEnabledOptions = OptionsListUtils.hasEnabledOptions(Object.values(policyTags !== null && policyTags !== void 0 ? policyTags : {}).flatMap(function (_ref2) {
    var tags = _ref2.tags;
    return Object.values(tags);
  }));

Code expects property tags inside the response. This works fine in case of a successful response as there is tags property inside tagsListData . But in case of errors, though response code is HTTP 200, tags property is completely missing.
As the code always assumes the presence of tags property, this fails in case of errors.

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

Assuming that we always get a successful response is incorrect. Frontend code must be able to handle error responses in a graceful way.

Suggest following approaches for this

Check that tags property is not undefined. If that is missing, fallback for error response and fetch and display appropriate error as a red error text under tagList setting name field, based on the error message returned from backend. Display options for error need UI/UX input.
Alternatively, accept only valid tag names from frontend using regex. Also as the field is pre-populated with value Tag, do not allow changing the pre-populated text, instead forcefully accept only appending to this value. Need product input on this.
What are possible valid tag names and invalid tag names? Why is '0' an invalid tag name? Would like to understand this requirement to help in choosing the best option.

What alternative solutions did you explore? (Optional)

Backend to return tags as empty property in API response and add error as a different property, rather than replacing tags property.

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

@ZhenjaHorbach

PR is ready

cc: @ZhenjaHorbach

Backend changes implemented, waiting to be merged/deployed

@slafortune

This is kind of done?

@slafortune not sure why it didn't create the comments, the app part it's already in production!

@danieldoglas

Thanks for the heads up @danieldoglas - so are we just in the 7 day holding period for regressions? Which would be 7/17

@ZhenjaHorbach

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@ZhenjaHorbach] The PR that introduced the bug has been identified. Link to the PR:

Crash is related to this PR where we try to get tags property from errors object
But the main root cause where we pass errors separately from tag objects is related to this PR

[@ZhenjaHorbach] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

https://github.com/Expensify/App/pull/42004/files#r1681339465
https://github.com/Expensify/App/pull/37734/files#r1681340313

[@ZhenjaHorbach] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

NA

[@ZhenjaHorbach] Determine if we should create a regression test for this bug.

I'm not sure we need a test for this bug
Because it's much harder to reproduce now
Since 0 is now a valid value
Plus I can't think of a stable way how we can throw an error for testing

[@ZhenjaHorbach] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

But just in case I added test steps

Regression Test Proposal

Go to workspace tags page
Press Settings
Press the tag name
Rename the tag to invalid value
When it fails, verify the tag name reverts to the previous name
Press the close error button
Verify the error is cleared

Do we agree 👍 or 👎 ?

@slafortune

@slafortune yes, the payment should be due today (7/17). I have requested the payment in ND.

@ZhenjaHorbach

@ZhenjaHorbach - C+ Role - has been paid $250 via UpWorks
@bernhardoj - Contributor Role - is due $250 via NewDot

@bernhardoj

$250 approved for @bernhardoj

Navigation Menu

Repository navigation

[HOLD for payment 2024-07-22] [$250] Tag - App crashes when saving 0 as custom tag name #43773

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

26 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	value: {
	errors: {
	[oldName]: oldName,
	[newName]: ErrorUtils.getMicroSecondOnyxError('workspace.tags.genericFailureMessage'),
	},
	[newName]: null,
	[oldName]: oldPolicyTags,

	<OfflineWithFeedback
	errors={policyTags?.[policyTagLists[0].name]?.errors}
	pendingAction={policyTags?.[policyTagLists[0].name]?.pendingAction}

[HOLD for payment 2024-07-22] [$250] Tag - App crashes when saving 0 as custom tag name #43773

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jun 14, 2024

lanitochka17 commented on Jun 14, 2024

lanitochka17 commented on Jun 14, 2024

bernhardoj commented on Jun 14, 2024

Proposal

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

What is the root cause of that problem?

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

kpadmanabhan commented on Jun 14, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Jun 17, 2024

26 remaining items

bernhardoj commented on Jun 25, 2024

danieldoglas commented on Jul 8, 2024

danieldoglas commented on Jul 12, 2024

slafortune commented on Jul 12, 2024

ZhenjaHorbach commented on Jul 17, 2024

bernhardoj commented on Jul 17, 2024

slafortune commented on Jul 18, 2024

JmillsExpensify commented on Jul 19, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions