Console error shows up after refreshing the page

[lanitochka17]

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: 9.1.10-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+050302kh@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Refresh the page

Expected Result:

No console error will show up

Actual Result:

Console error shows up after refreshing the page

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6763448_1741305035439.20250307_073915.mp4

log1.txt

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @robertjchen (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[bernhardoj]

Proposal

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

Navigation console error after refreshing.

What is the root cause of that problem?

This happens after #54552. In that PR, we call isReportTopmostSplitNavigator in PlaybackContext useEffect.

App/src/components/VideoPlayerContexts/PlaybackContext.tsx

Lines 116 to 124 in fb79730

	useEffect(() => {
	// This logic ensures that resetVideoPlayerData is only called when currentReportID
	// changes from one valid value (i.e., not an empty string or '-1') to another valid value.
	// This prevents the video that plays when the app opens from being interrupted when currentReportID
	// is initially empty or '-1', or when it changes from empty/'-1' to another value
	// after the report screen in the central pane is mounted on the large screen.
	if ((!currentReportID && isReportTopmostSplitNavigator()) || (!prevCurrentReportID && !isReportTopmostSplitNavigator()) || currentReportID === prevCurrentReportID) {
	return;
	}

Since the context lives outside the navigation container, it's fired before the navigation is ready. This isn't a deploy blocker, but I guess the error message just not show on prod environment.

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

We have 3 options.

First, we can early return false in isReportTopmostSplitNavigator if the navigation isn't ready yet.

if (!navigationRef.isReady()) return false;

Second, we can avoid calling isReportTopmostSplitNavigator in PlaybackContext if the navigation isn't ready yet.

Third, we can move the context provider to be inside the AuthScreens so it's created only after the navigation is ready.

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 455 to 457 in fb79730

	<ComposeProviders components={[OptionsListContextProvider, ActiveWorkspaceContextProvider, ReportIDsContextProvider, SearchContextProvider]}>
	<RootStack.Navigator
	persistentScreens={[NAVIGATORS.REPORTS_SPLIT_NAVIGATOR, NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR]}

We will need to move VolumeContextProvider too and also, move this logic to update the reportID on every state changes to AuthScreens.

App/src/libs/Navigation/NavigationRoot.tsx

Line 206 in fb79730

updateCurrentPlayingReportID(state);

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 227 to 232 in fb79730

	useEffect(() => {
	const unsubscribe = navigation.addListener('state', () => {
	PriorityMode.autoSwitchToFocusMode();
	});
	return () => unsubscribe();
	}, [navigation]);

updateCurrentPlayingReportID(navigationRef.getRootState())

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[daledah]

Dupe of #57285

[mountiny]

Seems like dupe #57285