Skip to content

Add an error boundary around the key detail page that shows a fallback UI instead of a white screen on unexpected errors #781

Description

@Chucks1093

Summary

An unhandled error inside the key detail page currently causes a full white screen with no recovery path. A React error boundary wrapping the page should catch render errors and show a fallback UI with a reload button.

Scope

  • Wrap the key detail page route in an ErrorBoundary component
  • Render a fallback card with: 'Something went wrong loading this key', the error message in small text, and a 'Reload page' button
  • Log the caught error and component stack to the error tracking service
  • Allow the user to navigate back to the marketplace from the fallback card
  • Reset the error boundary state when the user navigates to a different route

Acceptance Criteria

  • Render error caught and fallback UI shown instead of white screen
  • Error message visible in fallback card
  • 'Reload page' button reloads and resets the boundary
  • Error logged to tracking service with component stack
  • Navigating away resets the boundary

ETA: 12 hours


Coordinate on Telegram

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave program

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions