[$500] Android - Compose box -App crashes on sending message in offline while page is loading

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.3.94-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation: @

Action Performed:

Launch app
Tap profile icon--preferences
Toggle on forced offline
Navigate back to LHN
Tap on a admin page with no activity and loading (or any page which is loading)
Send a message

Expected Result:

App must not crash on sending message in offline while page is loading.

Actual Result:

App crashes on sending message in offline while page is loading.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Android: Native

Bug6258828_1698803777619.crash.mp4

crash.txt

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01459aaf4e457cbbe8
Upwork Job ID: 1719691150728323072
Last Price Increase: 2023-11-08

@sonialiap

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

Job added to Upwork: https://www.upwork.com/jobs/~01459aaf4e457cbbe8

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

@burczu

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

Proposal

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

App crashes on sending message in offline while page is loading.

What is the root cause of that problem?

In here, the flatListRef is not initialized yet, but we're calling scrollToOffset on the flatListRef.current which is undefined, causing the crash. flatListRef is not initialized at the beginning because at that time there's no item in the list yet, there's only the loading skeleton. Only after the first message is sent, there'll be item in the list and the ref will have value.

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

We need to check that flatListRef?.current is truth first before calling scrollToOffset. This will not cause any issue because at the time we send the first message, the list is already at the bottom so no need to scroll to bottom.

What alternative solutions did you explore? (Optional)

We need to check all the places that flatListRef is used and apply the same fix if it's also not checking truthy.

Alternatively, we can import the useReportScrollManager and use the scrollToBottom method from there, which already has the truthy check.

Proposal

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

Sending a message while the report page is still loading (a skeleton loader is showing) will crash the app (on the Web, an error log will be thrown).

What is the root cause of that problem?

The error is coming from this code where we are trying to scroll to the bottom after adding a comment, but the flatListRef.current is undefined.

App/src/pages/home/ReportScreen.js

Lines 266 to 269 in b9e202d

    
           // We need to scroll to the bottom of the list after the comment is added 
        
           const refID = setTimeout(() => { 
        
               flatListRef.current.scrollToOffset({animated: false, offset: 0}); 
        
           }, 10);

flatListRef is the ref of the chat list component (ReportActionsList). The problem is, while the report page is loading, we render the skeleton loader view, so the list ref isn't set yet.

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

Actually, we already have an existing logic to scroll to the bottom every time the user adds a new message using reportScrollManager.scrollToBottom() that already handles the null/undefined safety.

App/src/pages/home/report/ReportActionsList.js

Lines 221 to 230 in b9e202d

    
           // This callback is triggered when a new action arrives via Pusher and the event is emitted from Report.js. This allows us to maintain 
        
           // a single source of truth for the "new action" event instead of trying to derive that a new action has appeared from looking at props. 
        
           const unsubscribe = Report.subscribeToNewActionEvent(report.reportID, (isFromCurrentUser) => { 
        
               // If a new comment is added and it's from the current user scroll to the bottom otherwise leave the user positioned where 
        
               // they are now in the list. 
        
               if (!isFromCurrentUser) { 
        
                   return; 
        
               } 
        
               reportScrollManager.scrollToBottom(); 
        
           });

So, we can just remove the new logic that is introduced by this PR.

The scroll there was added for a reason, removing it will cause regressions, also it's not the root cause of this issue. I'd say let's fix this bad crash now on the correct root cause.

There's a plan to address the timeout as a follow up here so we don't need to worry about that unrelated part in this issue.

@burczu

@burczu what do you think of the above proposals?

@sonialiap

@sonialiap I'm sorry - I was OOO last week. I'll be reviewing proposals soon.

I've just tried to reproduce the issue but with no luck - how to do you get the loading state of the app while being offline? I'm opening the admin page but it loads normally even when forced offline...

Loading here means skeleton. You should re-open the app, enable forced offline and go to a random chat that has not been loaded in Onyx yet.

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

@tienifr

@tienifr Thanks for help!

I've checked one more time and it seems it's not reproducible on the current main:

Screen.Recording.2023-11-09.at.12.21.54.mp4

Can someone else confirm it?

App crashes on sending message in offline while page is loading.

I just tested and my android app does not crash when I send a message to a loading #admins room while "force offline" is toggled.

Since multiple people cannot reproduce. Closing

Navigation Menu

Repository navigation

[$500] Android - Compose box -App crashes on sending message in offline while page is loading #30685

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Bug0 Triage Checklist (Main S/O)

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)

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?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	// We need to scroll to the bottom of the list after the comment is added
	const refID = setTimeout(() => {
	flatListRef.current.scrollToOffset({animated: false, offset: 0});
	}, 10);

	// This callback is triggered when a new action arrives via Pusher and the event is emitted from Report.js. This allows us to maintain
	// a single source of truth for the "new action" event instead of trying to derive that a new action has appeared from looking at props.
	const unsubscribe = Report.subscribeToNewActionEvent(report.reportID, (isFromCurrentUser) => {
	// If a new comment is added and it's from the current user scroll to the bottom otherwise leave the user positioned where
	// they are now in the list.
	if (!isFromCurrentUser) {
	return;
	}
	reportScrollManager.scrollToBottom();
	});

[$500] Android - Compose box -App crashes on sending message in offline while page is loading #30685

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Nov 1, 2023

melvin-bot commented on Nov 1, 2023

melvin-bot commented on Nov 1, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Nov 1, 2023

tienifr commented on Nov 1, 2023

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)

bernhardoj commented on Nov 1, 2023

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?

tienifr commented on Nov 2, 2023

sonialiap commented on Nov 6, 2023

burczu commented on Nov 6, 2023

burczu commented on Nov 7, 2023

tienifr commented on Nov 8, 2023

melvin-bot commented on Nov 8, 2023

burczu commented on Nov 9, 2023

sonialiap commented on Nov 13, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions