onlook
onlook copied to clipboard
feat: Handle network disconnection errors better
Description
- Adds graceful network-loss handling to the web client.
- NetworkStore (MobX) – constantly pings an external endpoint, classifies latency, performs exponential back-off, exposes
helpers (manualRetry, checkConnection, events). - use-chat hook – snapshots partial assistant messages, pauses streaming when the connection drops, and automatically resumes (or lets the user retry) when the connection is back.
- NetworkWarning banner – surfaces live connection status with animated icons and “Try Again” / “Retry Chat” buttons.
Related Issues
closes #2226 - Handle network disconnection errors better
Type of Change
- [ ] Bug fix
- [x] New feature
- [ ] Documentation update
- [ ] Release
- [ ] Refactor
- [ ] Other (please describe):
Testing
- Disabled network (Airplane-mode or DevTools “Offline”).
- Send a chat prompt – banner appears, stream pauses, retry buttons enabled then Auto-resumed.
- Re-enabled network – banner disappeared, stream continues from the exact point where it stopped.
- Max retries - Stay offline past the max back-off interval – banner switches to red state, “Try Again” and “Retry Chat” buttons work. 5.Regression checks - Normal online chat flow unaffected. Lint & type-check show same warnings as main.
Screenshots (if applicable)
Heads-up: the video was recorded before the latest UI polish (icon swap + color tweaks on the warning banner).
Functionality is identical—only the visual styling changed in my most recent commits.
Additional Notes
Scope limited to apps/web/client; backend & shared packages untouched. No DB migrations, env-var, or API changes
[!IMPORTANT] Enhances network disconnection handling in the web client with a new
NetworkStore, updated chat management, and aNetworkWarningcomponent.
- Behavior:
- Adds
NetworkStoreclass innetwork/index.tsfor monitoring network status, handling reconnections, and emitting network events.- Updates
use-chat.tsxto manage chat state during network disconnections, including pausing and resuming chat streams.- Introduces
NetworkWarningcomponent innetwork-warning.tsxto display connection status and retry options to users.- Components:
ChatMessagescomponent updated to includeNetworkWarningfor displaying network status.NetworkWarningcomponent shows different messages and actions based on network status (offline, reconnecting, max attempts reached).- Utilities:
- Adds utility functions in
network/utils.tsfor pinging server, calculating connection quality, and debouncing functions.- Misc:
- Adds network-related types in
network/types.ts.- Integrates
NetworkStoreintoEditorEngineinengine.ts.This description was created by
for 8719e03cd79efb138b0b89e9e17b90f0f71ecf4b. You can customize this summary. It will automatically update as commits are pushed.
@0xTaneja is attempting to deploy a commit to the Onlook Team on Vercel.
A member of the Team first needs to authorize it.
@0xTaneja can you also throw us a screenshot of what the offline states look like? Curious to see where in the UI they are
@drfarrell
@drfarrell feel free to add feedback happy to make any changes if any