Add error boundary components and global error handling

[Anuoluwapo25]

Overview

Unhandled errors currently crash the entire React tree. Add proper error boundaries so failures are contained and recoverable.

Acceptance Criteria

• ErrorBoundary component at src/components/ErrorBoundary.tsx
• Wraps each major page section (not just the root)
• Shows friendly error UI: "Something went wrong" + retry button + option to report
• Catches and logs contract invocation errors with user-friendly messages:
  • Insufficient balance → "You don't have enough LRN for this action"
  • Network mismatch → "Please switch to Testnet in your wallet"
  • User rejected tx → "Transaction cancelled"
• TanStack Query onError global handler configured
• No raw error objects ever shown to users

Notes

• React 19 has new use + Suspense patterns — follow current patterns in the codebase
• Add src/util/error.ts with error classification helpers

[suleimanahmad]

Hi, I’d like to take on this task.

I have experience implementing React error boundaries and handling async/contract errors in a user-friendly way. I can create a reusable ErrorBoundary component, integrate it across key sections, and ensure all errors are properly classified and mapped to clear messages (e.g., balance issues, network mismatch, rejected transactions).

I’ll also set up a global onError handler for TanStack Query and add utility helpers for consistent error handling across the app, ensuring no raw errors are exposed to users.

Looking forward to contributing!

[suleimanahmad]

@suleimanahmad has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi, I’d like to take on this task.

I have experience implementing React error boundaries and handling async/contract errors in a user-friendly way. I can create a reusable ErrorBoundary component, integrate it across key sections, and ensure all errors are properly classified and mapped to clear messages (e.g., balance issues, network mismatch, rejected transactions).

I’ll also set up a global onError handler for TanStack Query and add utility helpers for consistent error handling across the app, ensuring no raw errors are exposed to users.

Looking forward to contributing!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @suleimanahmad to this issue.

[drips-wave]

Congratulations, @suleimanahmad! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @suleimanahmad: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been marked as completed by a Drips Wave moderator for @suleimanahmad as part of the Stellar Wave Program's 3rd Wave 🥳

Moderator's reason: [Auto-assessed] The contributor successfully implemented all requirements, including the ErrorBoundary component, utility helpers for error parsing, and global TanStack Query error handling. The work was submitted in PR #180 and has already been merged by the maintainers.

😎 @suleimanahmad: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

ℹ️ Note: This issue was marked complete via moderation. Points were issued even though the GitHub issue remains open.