Skip to content

Handle query/route errors: error states, boundaries, consistent loading #81

Description

@ApocDev

The app currently has no error handling on its data layer: across the ~45 useQuery calls in routes/ there are zero isError checks, __root.tsx defines no errorComponent/pendingComponent, and there is no ErrorBoundary anywhere. A failed query renders exactly like empty data — routes/index.tsx shows a "…" placeholder forever, and routes/factory.tsx treats a failed flows load as "no flows". With a backend that can legitimately be down or mid-restart (see #75), the user can't tell a broken app from an empty factory.

What to do

  • Add a root-level errorComponent (and a default pendingComponent) on the router so thrown loader/render errors get a real fallback with a retry affordance instead of a blank page.
  • Introduce a small shared "query state" wrapper (or convention) that renders distinct loading / error-with-retry / empty states, and apply it to the data-bearing pages: factory, block list + block page, browse, coherence, turd, whatif, tasks, index.
  • Make loading states consistent — some pages show "loading…"/"solving…" text (routes/turd.tsx, routes/coherence.tsx), others render nothing while loading.
  • The assistant's ad-hoc "idle"|"error" string state in routes/assistant.tsx should surface failures through the same visual language.

Part of the polish epic #35.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: webWeb UI (React/TanStack/vite-plus)enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions