Switching tabs silently fails reconnection
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:
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:
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:
- A fatal error within the Supabase client: TypeError: can't access property "then", a.default.detectStore(...) is undefined
- A network-level rejection: Cookie "__cf_bm" has been rejected for invalid domain.
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.
