Skip to content

fix(dashboard): show QueryError fallback when data fetches fail#85

Open
omipheo wants to merge 1 commit into
entrius:testfrom
omipheo:fix/34-query-error-fallback
Open

fix(dashboard): show QueryError fallback when data fetches fail#85
omipheo wants to merge 1 commit into
entrius:testfrom
omipheo:fix/34-query-error-fallback

Conversation

@omipheo
Copy link
Copy Markdown

@omipheo omipheo commented May 11, 2026

Summary

Closes #34.

useApiQuery has retry: false, so the first failed fetch leaves
dashboard panels stuck on a shimmer skeleton with no recovery path.
Users have to reload the page to retry, and they have no signal that
anything went wrong.

This PR adds a small shared QueryError component (icon + label +
Retry button, styled to match the existing card chrome) and wires it
into each consumer that renders a skeleton today: StatsPanel,
MinerRatesTable, OrderbookDepth, EventFeed, SwapTracker, and
SwapDetailPage.

Behavior

  • First-load failure. Each consumer destructures isError and
    refetch from useApiQuery and short-circuits to
    <QueryError onRetry={refetch} /> when isError && !data. Clicking
    Retry re-runs the query.
  • Refetch failure with cached data. Stays silent. The existing
    keepPreviousData behavior is preserved, so a transient SSE / network
    blip doesn't flash an error over a working view.
  • SwapDetailPage. The fallback renders inside <PageWrapper> so
    the back-link and page chrome stay in place.

Out of scope (per the issue)

  • No change to useApiQuery's retry: false policy.
  • No global ErrorBoundary for render-time errors.
  • No telemetry / error reporting hook.
  • No SSE-reconnect timer fix.

Files

  • src/components/QueryError.tsx (new)
  • src/components/index.ts
  • src/components/dashboard/StatsPanel.tsx
  • src/components/dashboard/MinerRatesTable.tsx
  • src/components/dashboard/OrderbookDepth.tsx
  • src/components/dashboard/EventFeed.tsx
  • src/components/dashboard/SwapTracker.tsx
  • src/pages/SwapDetailPage.tsx

Verification

  • npm run build — passes (TypeScript + Vite, 3.32 s).
  • npm run lint — passes (ESLint, no warnings).
  • npm run format:check — passes (Prettier).
  • Manual: each panel that previously showed an indefinite skeleton on a
    dropped fetch now shows the retry fallback; clicking Retry recovers
    without a page reload.

Notes

This supersedes #36 (wmagev), which is currently mergeable: dirty
against test and has been untouched since 2026-04-21.

useApiQuery has retry: false, so the first failed fetch left dashboard
panels stuck on a shimmer skeleton with no recovery path: users had to
reload the page to retry, and they had no signal that anything had
gone wrong.

Adds a small shared QueryError component (icon + label + Retry button,
styled to match the existing card chrome) and wires it into each
consumer that renders a skeleton: StatsPanel, MinerRatesTable,
OrderbookDepth, EventFeed, SwapTracker, and the SwapDetailPage. Each
consumer destructures isError + refetch from useApiQuery and renders
QueryError only when the query has errored AND has no data to fall
back on. SwapDetailPage renders the fallback inside PageWrapper so the
header and back-link stay in place.

Refetch failures while data already exists stay silent, so the existing
keepPreviousData behavior is preserved and the panels don't flash an
error over a working view during a transient SSE/network blip.

Out of scope (per the issue): no change to useApiQuery's retry policy,
no global ErrorBoundary, no telemetry hook, no SSE-reconnect timer.

Closes entrius#34
@xiao-xiao-mao xiao-xiao-mao Bot added the enhancement New feature or request label May 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Add QueryError fallback when dashboard data fetches fail

1 participant