Skip to content

[S4] Add React error boundaries to pools list and pool detail pages #802

Description

@Akshola00

Description

When the API is unavailable, any page that fetches data on mount will throw an unhandled error and show a blank or broken screen. React error boundaries catch these and show a controlled fallback.

Deliverables

  • Create nevo_frontend/components/ErrorBoundary.tsx — a class component that catches errors and renders a friendly fallback:
    • Title: "Something went wrong"
    • Message: "We could not load this page. Please try refreshing."
    • A "Refresh" button that calls window.location.reload()
  • Wrap app/pools/page.tsx and app/pools/[id]/page.tsx with the boundary
  • npm run build passes
  • The component accepts an optional fallback prop so callers can override the default UI

Notes

This is a standard React pattern — use a class component with componentDidCatch. No new dependencies needed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    EasyFrontendStellar WaveIssues in the Stellar wave programstage-4Frontend-Backend integration

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions