[HOLD for payment 2024-04-09] [$500] Scroll position jumps to new data each time new data comes in debug console

@quinthar

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.50-5
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1710209384799229

Action Performed:

Go to account settings > about > troubleshoot
Toggle Client side logging > View debug console
Scroll to somewhere in the history
Wait for new data to come in

Expected Result:

Scroll position should be stable

Actual Result:

Scrolls to the new data postion

Workaround:

unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

az_recorder_20240312_132911.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01b144dad7ad88d8ed
Upwork Job ID: 1768332727529181184
Last Price Increase: 2024-03-14

@puneetlath

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

Proposal

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

Scroll position jumps to new data each time new data comes in debug console

What is the root cause of that problem?

Inverted list is being used - it is the common behaviour where inverted FlatList scrolls to bottom on adding new content.

App/src/pages/settings/AboutPage/ConsolePage.tsx

Lines 139 to 145 in c05ce47

    
           <FlatList 
        
               data={logsList} 
        
               renderItem={renderItem} 
        
               contentContainerStyle={styles.p5} 
        
               inverted 
        
               ListEmptyComponent={<Text>{translate('initialSettingsPage.debugConsole.noLogsAvailable')}</Text>} 
        
           />

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

Option 1:
Use maintainVisibleContentPosition prop like this:

maintainVisibleContentPosition={{
     minIndexForVisible: 0,
  }}

Option 2:
Use some library like this or this.

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

@getusha

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

Opening up for proposals.

Proposal

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

Scrolls to the new data postion

What is the root cause of that problem?

We're using regular FlatList with inverted here, by default it doesn't have functionality to preserve scroll position when there's new content.

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

Use our custom InvertedFlatList instead (same one used by our report actions list here). We can use it similar to how we're using in report actions list.

The InvertedFlatList was built to work on all platforms, including web.

We also need to set the key for the log here, currently the logsList does not have any key, so the FlatList has no property to use for keyExtractor leading to the behavior not working.

We can do something like:

const logsList = useMemo(() => (logs ? Object.entries(logs).map(([key, value]) => ({
        key,
        ...value
    })).reverse() : []), [logs]);

What alternative solutions did you explore? (Optional)

Set the maintainVisibleContentPosition to the FlatList, but it doesn't work for web since react-native-web doesn't seem to support it, that's why we had to build our own MVCPFlatList here (which has full support for the behavior in web), and MVCPFlatList is internally used by InvertedFlatList

Reviewing label has been removed, please complete the "BugZero Checklist".

@getusha

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.58-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix: Debug console always scrolls to new data position #38607

If no regressions arise, payment will be issued on 2024-04-09. 🎊

For reference, here are some details about the assignees on this issue:

@getusha requires payment (Needs manual offer from BZ)
@tienifr requires payment (Needs manual offer from BZ)

@getusha

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:

[@getusha] The PR that introduced the bug has been identified. Link to the PR:
[@getusha] 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:
[@getusha] 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:
[@getusha] Determine if we should create a regression test for this bug.
[@getusha] 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.
[@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@getusha

@getusha bump on the checklist so that we can pay tomorrow.

@getusha

Payment Summary

Upwork Job

ROLE: @getusha paid $(AMOUNT) via Upwork (LINK)
ROLE: @tienifr paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@puneetlath)

I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1768332727529181184/hired)
I have paid out the Upwork contracts or cancelled the ones that are incorrect
I have verified the payment summary above is correct

@getusha

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:

[@getusha] The PR that introduced the bug has been identified. Link to the PR: feat: Debug console view #36337
[@getusha] 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/36337/files#r1559278893
[@getusha] 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: N/a
[@getusha] Determine if we should create a regression test for this bug. No a minor issue.
[@getusha] 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. N/a

@tienifr

Great thanks. @tienifr @getusha sent you both Upwork offers. Please comment here when you've accepted.

@puneetlath

@puneetlath accepted

All paid. Thanks y'all!

Navigation Menu

Repository navigation

[HOLD for payment 2024-04-09] [$500] Scroll position jumps to new data each time new data comes in debug console #38155

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)

17 remaining items

Payment Summary

BugZero Checklist (@puneetlath)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<FlatList
	data={logsList}
	renderItem={renderItem}
	contentContainerStyle={styles.p5}
	inverted
	ListEmptyComponent={<Text>{translate('initialSettingsPage.debugConsole.noLogsAvailable')}</Text>}
	/>

[HOLD for payment 2024-04-09] [$500] Scroll position jumps to new data each time new data comes in debug console #38155

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Mar 12, 2024

ShridharGoel commented on Mar 12, 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?

melvin-bot commented on Mar 14, 2024

melvin-bot commented on Mar 14, 2024

puneetlath commented on Mar 14, 2024

tienifr commented on Mar 15, 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)

17 remaining items

melvin-bot commented on Apr 2, 2024

melvin-bot commented on Apr 2, 2024

melvin-bot commented on Apr 2, 2024

puneetlath commented on Apr 8, 2024

melvin-bot commented on Apr 9, 2024

Payment Summary

BugZero Checklist (@puneetlath)

getusha commented on Apr 10, 2024

puneetlath commented on Apr 10, 2024

getusha commented on Apr 10, 2024

puneetlath commented on Apr 10, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions