feat(frontend): add error boundary and recovery screen - #68
Open
malaysiaonelove wants to merge 1 commit into
Open
feat(frontend): add error boundary and recovery screen#68malaysiaonelove wants to merge 1 commit into
malaysiaonelove wants to merge 1 commit into
Conversation
- Add route-level error boundary (error.tsx) with wallet/API/general
error discrimination and retry action
- Add root-level error boundary (global-error.tsx) with inline critical
CSS for resilience when the CSS bundle itself fails
- Add WalletConnectionError and WalletNotConnectedError typed error
classes to lib/api.ts with isWalletError / isApiError helpers
- Update stellar.ts to throw typed WalletConnectionError instead of
plain Error
- Update useWallet.ts to surface WalletError { message, kind } so
callers can distinguish wallet vs general failures
- Add error boundary component classes to globals.css
- Fix missing 'use client' directive in page.tsx
Closes Vaulty-X#65
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds Next.js App Router error boundaries so that unexpected client-rendering or API errors no longer leave users on a broken, unhelpful page.
Changes
New files
Frontend/src/app/error.tsx— Route-level error boundary. Distinguishes wallet connection errors, API errors, and general errors. Renders a friendly fallback with a retry action, a home link, and wallet-specific troubleshooting tips.Frontend/src/app/global-error.tsx— Root-layout error boundary. Owns the full<html>/<body>as required by Next.js; uses inline critical CSS so it renders even if the CSS bundle failed to load.Updated files
Frontend/src/lib/api.ts— AddedWalletConnectionError,WalletNotConnectedError,isWalletError(), andisApiError()helpers. FixedApiErrorprototype chain for reliableinstanceofacross transpilation.Frontend/src/lib/stellar.ts—connectWallet()andsignTransaction()now throw typed errors instead of plainError.Frontend/src/hooks/useWallet.ts—errorstate is nowWalletError | nullwith akind: 'wallet' | 'general'discriminator; exposesisWalletConnectionErrorconvenience flag.Frontend/src/app/globals.css— Added.error-boundary-*Tailwind component classes used byerror.tsx.Frontend/src/app/page.tsx— Fixed missing'use client'directive (required foruseState/hooks).Acceptance criteria checklist
reset()prop)error.digestshown)role="alert",aria-live, focus-visible outlines) and responsiveCloses #65