Singlepage app fails reconnecting up-on switching browser tabs

My app:

I’ve built a single-page application using React (v19), Vite, and Supabase, which is deployed on Vercel. It’s a hub for a gaming community, centered around user profiles, friends lists, and tournaments.

The problem:

When a user leaves the browser tab for a short period (even a few seconds) and then returns, the application fails to recover its connection to Supabase. Any attempt to load data (like viewing a profile or friends list) results in the UI getting stuck on a loading screen indefinitely.

The browser console shows two critical errors during this reconnection attempt:

  1. A fatal error within the Supabase client: TypeError: can't access property "then", a.default.detectStore(...) is undefined

  2. A network-level rejection: Cookie "__cf_bm" has been rejected for invalid domain.

The browser’s Network tab shows that new database requests are either silently failing or not being sent at all.

How it should work:

Leaving the tab and coming back, clicking on a profile or friends list should still be retrievable. The app should gracefully reconnect and fetch the necessary data.

Other issue:

A key symptom is that the browser doesn’t seem to detect when the tab becomes visible again. An event listener for document.visibilitychange or window.focus attached inside a React useEffect hook does not fire. However, attaching the same listener with plain JavaScript directly in the console does work, which points to a deep and unusual conflict with the React component lifecycle.

What we’ve tried: We have exhaustively debugged this and ruled out common issues. We have already:

  • Confirmed all Row-Level Security (RLS) policies are correct.

  • Implemented several aggressive client-side recovery handlers in the AuthContext, including a “nuclear option” that performs a local sign-out and re-fetches the session.

  • Refactored the entire architecture to run the Supabase client in a Web Worker to isolate it from the main thread, but the problem still persists.

  • Confirmed the bug happens in different browsers, in incognito mode, and with browser privacy settings relaxed.

Any ideas what could be causing this deep-seated conflict?

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.