Skip to content

feat(frontend): add recoverable error boundaries with safe diagnostics - #275

Open
woahwhattheheck wants to merge 1 commit into
YieldVault-Org:mainfrom
woahwhattheheck:latch/yieldvault-260-error-boundaries
Open

woahwhattheheck wants to merge 1 commit into
YieldVault-Org:mainfrom
woahwhattheheck:latch/yieldvault-260-error-boundaries

Conversation

@woahwhattheheck

Copy link
Copy Markdown

Summary

Closes #260.

Adds production-quality recoverable error boundaries and safe diagnostics so a failed provider, malformed response, or component exception cannot blank the application without a recovery path.

Design

  • diagnostics utilities (src/utils/diagnostics.js): correlation IDs, deep redaction of wallet / token / provider secrets, classification of retryable dependency failures vs invalid application state, and assertWellFormedResponse for malformed payloads.
  • telemetry sink (src/utils/telemetry.js): accepts only pre-built diagnostics, re-redacts, and drops events that still look sensitive.
  • Recoverable ErrorBoundary: route- and feature-level isolation with Try again / Reload page / Go home, plus a visible correlation reference.
  • App shell: each route is wrapped in a route boundary so the navbar/footer stay interactive when a page crashes.
  • Feature boundaries: Dashboard APY chart + vault grid and VaultDetail deposit/withdraw forms are isolated so one section failure cannot blank siblings.
  • Async hooks (useVaults / useVault / usePositions / useApyHistory): assert response shape, capture/redact failures, report telemetry, and pass correlation IDs into ErrorMessage.

Acceptance criteria

  • A single feature failure does not blank unrelated navigation
  • Users receive a useful recovery action and correlation reference
  • Telemetry contains no sensitive values

Test evidence

  • test/utils/diagnostics.test.js — correlation IDs, redaction, classification, malformed responses
  • test/utils/telemetry.test.js — redacted sink + sensitive-drop guard
  • test/components/ErrorBoundary.test.jsx — injected render failures, retry remount, invalid-state (no retry), feature isolation
  • test/integration/errorBoundaries.test.jsx — shell survives page crash, async banner correlation, malformed payloads, sibling isolation regression

npm test — 233 passed. tsc -b + vite build — clean.

Compatibility / rollout

  • Additive: existing pages keep working; boundaries and correlation fields are optional at the UI edge.
  • No contract, wallet provider, or API shape changes beyond stricter client-side validation of mock/provider payloads.
  • No migration required.

Out of scope

  • Broad rewrites of routing, wallet providers, or unrelated flows
  • Replacing server-side logging / APM backends

Isolate route and feature failures so a single crash cannot blank the
shell or sibling widgets. Diagnostics mint a correlation ID, redact
wallet/token/provider secrets, and classify retryable dependency errors
versus invalid application state. Recovery actions cover retry, reload,
and navigate-home. Async data hooks assert well-formed provider payloads
and surface the same safe error banners.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(frontend): add recoverable error boundaries with safe diagnostics

1 participant