Add client-side network resilience to web app#1394
Merged
Conversation
The app runs on a flaky hospital network (packet loss, DPI overload,
mid-flight connection resets, unannounced DNS changes) behind an appliance
that intermittently emits 502s on /api/* calls. Handle these gracefully in
apps/web instead of showing scary error toasts.
- axios: retry idempotent requests (GET/HEAD/OPTIONS only, never writes) on
transient failures (no-response/ERR_NETWORK/timeout, 502/503/504) with
jittered exponential backoff, bounded by a ~15s time budget and pausing for
the browser `online` event while offline; friendly "Connection Problem"
toast on give-up instead of a raw status code
- react-query: disable query retry so it doesn't compound axios retries
- connectivity store slice: pendingRetries + isOnline, driving a subtle
ConnectivityBanner ("Reconnecting…" / "Offline…")
- AppErrorComponent: router defaultErrorComponent that shows a self-healing
screen (auto-recovers on `online`) for transient errors, falling through to
the existing ErrorPage for genuine errors
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
This is great |
Contributor
|
This PR also known as "making up for TCP being misconfigured" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The app runs on an internal hospital network (packet loss, DPI overload, mid-flight connection resets, unannounced DNS changes) behind an appliance we don't control that intermittently emits 502s / drops connections on
/api/*XHR calls. Previously every such blip fired a scaryHTTP Request Failed/ raw-502error toast — and a render-blocking failure dumped users on the terminal "Something Went Wrong" page.This adds a client-side resilience layer to
apps/webso transient failures are retried and hidden from users (graceful-UX only; no infra changes).Changes
services/axios.ts— retry idempotent requests only (GET/HEAD/OPTIONS; never writes, to avoid duplicate submissions) on transient failures (no-response/ERR_NETWORK/timeout, or502/503/504). Jittered exponential backoff, bounded by a ~15s time budget, and offline-aware (waits for the browseronlineevent instead of burning retries whilenavigator.onLineis false). On final give-up it shows a calm "Connection Problem" message rather than a raw status code.meta.disableRetryopts a request out.services/react-query.ts—queries.retry: falseso React Query no longer compounds axios's retries.store/slices/connectivity.slice.ts(+types.ts,index.ts) —pendingRetriescounter +isOnline, driving…components/ConnectivityBanner.tsx— a subtle non-blocking pill ("Reconnecting…" / "Offline — waiting for connection…").components/AppErrorComponent.tsx(wired as routerdefaultErrorComponent) — for transient errors, a self-healing screen that auto-recovers when the browser comes back online (plus manual "Try again"); genuine errors still fall through to the existingErrorPage.Scope / notes
services/axios.ts(RETRY_BUDGET_MS,BASE_RETRY_DELAY_MS,MAX_RETRY_DELAY_MS,MAX_OFFLINE_WAIT_MS).Verification
pnpm --filter @opendatacapture/web lint(tsc + eslint) ✅pnpm exec vitest run --project web— 29 tests ✅🤖 Generated with Claude Code