Our React App Worked Perfectly—Until Someone Closed Their Laptop
What sleep/wake bugs taught us about Supabase, network recovery, and building reliable SaaS applications. Imagine spending weeks building a React application. Authentication works. Database queries work. Real-time updates work. Your dashboard loads quickly, and your end-to-end tests are passing. You deploy it. Everything looks great. Then someone closes their laptop. They return an hour later,…
The seemingly flawless operation of a React application did not persist when users closed their laptops. After returning, users encountered issues such as pending requests, spinning loading indicators, and missing information. This became a significant reliability challenge in building Axon OSINT, a SaaS platform for digital investigations.
One of the most frustrating aspects of sleep/wake failures is that the application often does not crash. Instead, it displays subtle problems like information from an earlier session, pending requests, and actions that seem to be running but yield no results. During the development of Axon OSINT, these issues were observed in various areas, including investigation workspaces, account settings, and billing workflows.
React component state can survive longer than network state. JavaScript timers may be delayed, network connections may be interrupted, authentication credentials may expire, and real-time connections may disconnect. As a result, an asynchronous operation that began earlier may not complete when expected. React components, however, continue to exist in memory even after the user returns. This creates a dangerous situation where the UI may still appear functional, while the network may not be.
To address this issue, the developers improved the loadData function by adding error handling and ensuring the loading indicator is set to false after a reasonable amount of time. However, even with these improvements, the problem persisted. The developers then realized that they needed to treat the Supabase SDK as only one transport method, not the only one.
A timeout is useful for preventing the UI from waiting indefinitely, but it does not solve the underlying problem. A timeout alone does not cancel the underlying network request. To solve this, the developers implemented a strategy where critical operations use the SDK with a bounded timeout and an alternative direct HTTP route when necessary. This approach allows the application to prioritize performance and reliability.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.