[Due for payment 2026-04-07] [RCA #85417] Home - “Spend over time” widget incorrectly handles offline state and cached data

[jponikarchuk]

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.3.48-1
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #85417
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Android 14
App Component: Other

Action Performed:

Precondition: The user account has existing transaction data available.

1. Go to Account > Troubleshooting
2. Clear cache and restart
3. Force offline
4. Go to home page
5. Verify the widget shows a "You are offline" message when the user is offline and there is no fetched data.

• Result:"You are offline" shows briefly , then "Oops... something went wrong" message is state.

6. Go online
7. Verify the data is fetched and displayed after going back online.
8. Go offline
9. Verify a chart should be shown if there is some stale data already fetched.
10. Navigate to antoher tab (eg. Inbox)
11. Return to "Home" > "Spend over time" section

• Result: "Oops... something went wrong" message is state instead of the data chart.

Expected Result:

When offline and no data is available, the widget displays a persistent "You are offline" message. When offline and data exists, the chart with data is displayed.

Actual Result:

When offline and no data is available "You are offline" shows briefly , then "Oops... something went wrong" message is state instead of the offline message.
When offline and data is available the chart is displayed until the user navigate to another tab and return to home, then "Oops... something went wrong" message is state.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mhawryluk

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #85417

[melvin-bot]

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

[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.

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #85417 - "Create SpendOverTime widget for the Home page" by @mhawryluk (High confidence)
Related Issues: None

Recommendation: REVERT

This is a new feature that was introduced in PR #85417 and the offline state handling logic has a flaw. Since this is a new feature that does not exist in production (as noted in the issue), reverting #85417 will cleanly remove the problematic widget without affecting existing functionality.

Labels: Keeping DeployBlockerCash as this is a frontend App bug. The DeployBlocker label is not present on this issue.

📋 Detailed Analysis

Evidence

• The issue specifically affects the "Spend over time" widget, which was added by PR Create SpendOverTime widget for the Home page #85417
• The bug report explicitly states "N/A - new feature, doesn't exist in prod" confirming this is new functionality
• The issue was caught during Pull Request QA execution of Create SpendOverTime widget for the Home page #85417
• Melvin-bot automatically assigned this issue to the PR author: "You have been assigned to this deploy blocker because you recently merged this PR: Create SpendOverTime widget for the Home page #85417"

Verification

The PR #85417 added these key files:

• src/pages/home/SpendOverTimeSection/SpendOverTimeSectionContent.tsx - The widget component
• src/pages/home/SpendOverTimeSection/useSpendOverTimeData.ts - The data fetching hook

The bug manifests in the state management logic in useSpendOverTimeData.ts (lines 70-72):

const shouldShowOfflineIndicator = isOffline && !sortedData;
const shouldShowErrorIndicator = !shouldShowOfflineIndicator && Object.keys(searchResults?.errors ?? {}).length > 0;
const shouldShowLoadingIndicator = !shouldShowOfflineIndicator && !shouldShowErrorIndicator && !isSearchDataLoaded(searchResults, queryJSON);

Root Cause

The condition hierarchy is flawed:

1. First scenario (offline without data): When offline with no cached data, the offline indicator briefly shows, but then errors get populated in searchResults?.errors, causing shouldShowErrorIndicator to become true, which displays "Oops... something went wrong" instead of the persistent offline message.

2. Second scenario (offline with cached data after navigation): When the user navigates away and returns while offline, the component remounts or the data hook re-executes. If there are any errors in searchResults?.errors (likely from failed network requests), the error indicator takes precedence over displaying the cached data (sortedData), even though cached data exists.

The logic should prioritize showing cached data when offline, and only show the error indicator when online and an actual error occurred (not just network failures due to being offline).

[MelvinBot]

Proposal

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

The "Spend over time" widget on the Home page has two offline-related bugs:

1. No cached data + offline: "You are offline" shows briefly, then gets replaced by "Oops... Something went wrong"
2. Cached data + offline + navigate away and back: The chart displays correctly, but after navigating to another tab and returning to Home, it shows "Oops... Something went wrong" instead of the cached chart

What is the root cause of that problem?

Two issues in useSpendOverTimeData.ts:

1. fetchData() hardcodes isOffline: false (line 30)

When search() is called with isOffline: false, the getOnyxLoadingData helper in Search.ts generates failureData that sets data: [] AND writes errors to the Onyx snapshot. The data: [] wipes any previously cached chart data, and the errors object triggers the error indicator.

Compare with the conditional on Search.ts line 339: ...(isOffline ? {} : {data: []}) — when isOffline is true, cached data is preserved. But since the widget always passes false, cached data is always wiped on failure.

2. No offline guard on the useEffect (lines 38-40)

The useEffect fires fetchData() on every mount with no check for offline state. The regular search page has this guard in useSearchPageSetup.ts line 46: if (isOffline) return;. The widget lacks it.

When the user navigates away from Home, the root stack navigator unmounts the page. Navigating back remounts it, re-triggering the useEffect, which fires the API call while offline → fails → wipes data via failureData.

Why the error indicator wins over the offline indicator:

After failureData applies, searchResults.data is [] (an empty array, which is truthy in JS). So sortedData on line 44-68 evaluates to [] instead of undefined. Then on line 70: shouldShowOfflineIndicator = isOffline && ![] = false (because ![] is false — arrays are truthy). With shouldShowOfflineIndicator being false, line 71 evaluates: shouldShowErrorIndicator = true && errors.length > 0 = true. The error view wins.

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

Two changes in src/pages/home/SpendOverTimeSection/useSpendOverTimeData.ts:

1. Pass the actual isOffline value to search() instead of hardcoding false on line 30. This ensures failureData preserves cached data when the device is offline (via the isOffline ? {} : {data: []} conditional in getOnyxLoadingData).

2. Add an offline guard to the useEffect so fetchData() is not called when the device is offline — matching the pattern used in useSearchPageSetup.ts. This prevents unnecessary API calls that will fail, and avoids wiping cached data on component remount while offline.

What alternative solutions did you explore? (Optional)

• Changing the sortedData truthiness check on line 70: Could change !sortedData to !sortedData?.length so empty arrays are treated the same as undefined. However, this only patches the symptom — the real problem is that fetchData fires while offline and wipes cached data. The proposed fix addresses the root cause.
• Adding an ErrorBoundary around the widget: Not applicable — the error is not a thrown exception but a deliberate error state from Onyx failureData.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.