[$250] Safari shows prolonged “Offline” state when creating or editing expenses

[m-natarajan]

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:
Reproducible in staging?: Needs Reproduction (Unable to reproduce)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @trjExpensify
Slack conversation (hyperlinked to channel name): #Quality

Action Performed:

1. Open New Expensify in Safari
2. Create a new expense or edit an existing expense
3. Observe the connection status indicator

Expected Result:

The app should remain in Online state while connected.
No prolonged “Offline” indicator should appear during normal expense creation or editing.

Actual Result:

The app switches to “Offline” state.
The offline indicator remains visible for an extended time.
This occurs consistently during expense creation or edits.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

The video for the issue is in Slack thread

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @adhorodyski

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022027548274433955676
• Upwork Job ID: 2027548274433955676
• Last Price Increase: 2026-02-28

[melvin-bot]

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

[MelvinBot]

Proposal

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

Safari on macOS shows a prolonged "Offline" state when creating or editing expenses. The offline indicator appears and remains visible for an extended time, even though the user's network connection is actually active. This does not reproduce on Chrome or other browsers.

What is the root cause of that problem?

The root cause is a chain of three interacting factors, all specific to Safari's limitations:

1. Safari lacks the Network Information API (navigator.connection)

In nativeModule.web.ts:78-82 (from @react-native-community/netinfo), the code checks window.navigator.connection || window.navigator.mozConnection || window.navigator.webkitConnection. Safari implements none of these, so connection is undefined. This forces NetInfo to fall back to the much cruder window.addEventListener('online'/'offline') events (line 257-259), which only fire when the network adapter goes fully on/off -- they do NOT detect transient connectivity issues.

Chrome/Firefox use the Network Information API's change event for fine-grained, reliable connectivity signals. Safari gets none of this.

2. Expense operations trigger reachability checks that can fail

When creating/editing expenses (especially with receipt uploads via FormData), the RecheckConnection middleware starts a 10-second timer. If the request exceeds 10 seconds (likely for receipt uploads), it calls recheckNetworkConnection(), which triggers NetInfo.refresh(). This makes a fetch to /api/Ping with a 10-second timeout.

In Safari, if this Ping request contends with the active upload (due to HTTP connection limits or prioritization), it can time out. When it does, internetReachability.ts sets isInternetReachable = false, and the NetInfo listener marks the app offline.

3. No recovery mechanism when Safari tab regains focus

Once offline, recovery depends on either the 60-second periodic recheck or the window online event. Two things make this worse on Safari:

• shouldReportActivity is false on web, so tab focus changes don't trigger reconnection
• The visibilitychange handler only checks for app updates, not network status
• Safari throttles setTimeout/setInterval in background tabs (the codebase already acknowledges this for ActiveClientManager.init)

This means the reachability recovery poll can be delayed well beyond 60 seconds.

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

Add a visibilitychange listener that triggers an immediate network recheck when the page becomes visible, specifically benefiting Safari users whose recovery polls may have been throttled. This should be added in NetworkConnection.subscribeToNetInfo():

// In subscribeToNetInfo, after the existing NetInfo.addEventListener:
// Add a visibilitychange handler to force recheck when tab becomes visible
// This is critical for Safari which throttles timers in background tabs
const onVisibilityChange = () => {
    if (document.visibilityState === 'visible' && isOfflineFlag) {
        recheckNetworkConnection();
    }
};
document.addEventListener('visibilitychange', onVisibilityChange);

Additionally, consider reducing the reachabilityShortTimeout (currently 5s default from NetInfo) to ensure faster recovery when offline, and potentially increasing the reachabilityRequestTimeout slightly or making the Ping request use a separate connection pool to avoid contention with active uploads.

What alternative solutions did you explore? (Optional)

1. Decrease the 60-second recheck interval -- This would help recovery speed but adds unnecessary network traffic for all users on all browsers, not just Safari.

2. Use shouldReportActivity = true on web -- The codebase explicitly avoids this due to performance concerns from excessive firing. The visibilitychange approach is more targeted.

3. Replace NetInfo with a custom connectivity detector -- Too heavy-handed. The library works well on other browsers; we just need to supplement it for Safari's limitations.

4. Add a Safari-specific polyfill for the Network Information API -- Not feasible as the API depends on native browser support.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, or @MelvinBot <your feedback> to refine this analysis.

[melvin-bot]

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

[melvin-bot]

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

[lustsazeus-lab]

Contributor details
Your Expensify account email: lustsazeus@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01cca147c171a085af

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!