onlook icon indicating copy to clipboard operation
onlook copied to clipboard

feat: Handle network disconnection errors better

Open 0xTaneja opened this issue 5 months ago • 4 comments

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

  1. Disabled network (Airplane-mode or DevTools “Offline”).
  2. Send a chat prompt – banner appears, stream pauses, retry buttons enabled then Auto-resumed.
  3. Re-enabled network – banner disappeared, stream continues from the exact point where it stopped.
  4. 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)

Watch demo video on Loom

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 a NetworkWarning component.

  • Behavior:
    • Adds NetworkStore class in network/index.ts for monitoring network status, handling reconnections, and emitting network events.
    • Updates use-chat.tsx to manage chat state during network disconnections, including pausing and resuming chat streams.
    • Introduces NetworkWarning component in network-warning.tsx to display connection status and retry options to users.
  • Components:
    • ChatMessages component updated to include NetworkWarning for displaying network status.
    • NetworkWarning component shows different messages and actions based on network status (offline, reconnecting, max attempts reached).
  • Utilities:
    • Adds utility functions in network/utils.ts for pinging server, calculating connection quality, and debouncing functions.
  • Misc:
    • Adds network-related types in network/types.ts.
    • Integrates NetworkStore into EditorEngine in engine.ts.

This description was created by Ellipsis for 8719e03cd79efb138b0b89e9e17b90f0f71ecf4b. You can customize this summary. It will automatically update as commits are pushed.

0xTaneja avatar Jun 20 '25 23:06 0xTaneja

@0xTaneja is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Jun 20 '25 23:06 vercel[bot]

@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 avatar Jun 20 '25 23:06 drfarrell

@drfarrell Screenshot 2025-06-21 044654 Screenshot 2025-06-21 045532

0xTaneja avatar Jun 20 '25 23:06 0xTaneja

@drfarrell feel free to add feedback happy to make any changes if any

0xTaneja avatar Jun 23 '25 23:06 0xTaneja