Error Handling

RitoSwap uses three layers of error handling: a global boundary for app-wide failures, a route-level boundary for page errors, and inline boundaries to isolate specific UI sections. Each layer captures exceptions to Sentry and renders a styled fallback shell.

- - error.tsx
  - global-error.tsx
- - - InlineErrorBoundary.tsx
    - PageError.tsx
    - ErrorShellInline.tsx
    - ErrorShellFullPage.tsx

Error boundary layers

Global boundary (app/global-error.tsx) catches errors that escape the root layout and renders the full-page shell with a custom message. It calls Sentry.captureException on mount.
Route boundary (app/error.tsx -> components/errors/PageError.tsx) handles page-level errors using ErrorShellInline and the Next.js reset callback.
Inline boundary (components/errors/InlineErrorBoundary.tsx) wraps individual sections, so one failure does not crash the rest of a page.

Next.js App Router error boundaries must be client components. All error UI components here are marked with “use client”.

InlineErrorBoundary props

Prop	Type	Default	Purpose
`children`	`React.ReactNode`	Required	UI subtree guarded by the boundary.
`title`	`string`	`"Something went wrong"`	Fallback title for the inline shell.
`message`	`string`	Derived	Fallback copy. When `showErrorDetails` is true, uses `Dev error: ${error.message}`.
`component`	`string`	Unset	Sentry tag for grouping (for example `mint-token-status`).
`showErrorDetails`	`boolean`	`publicConfig.isDevelopment`	Controls whether raw error messages are shown in the fallback.
`onReset`	`() => void`	Unset	Invoked after retry resets the boundary state.

Fallback shells

ErrorShellInline renders a bordered, inline panel with floating orbs and an optional retry button.
ErrorShellFullPage renders a full-viewport error screen with the same visual language.

Both shells accept optional title, message, and onRetry props. The retry button is only rendered when onRetry is provided.

Storybook previews

Usage example


import InlineErrorBoundary from '@/components/errors/InlineErrorBoundary';
import TokenStatus from './TokenStatus/TokenStatus';
 
<InlineErrorBoundary
  component="mint-token-status"
  title="Status unavailable"
>
  <TokenStatus />
</InlineErrorBoundary>

Current placements

Inline boundaries are used throughout the app to isolate critical sections:

dapp/app/mint/page.tsx and dapp/app/mint/components/MintPageWrapper.tsx
dapp/app/swap/page.tsx
dapp/app/gate/components/GatePageWrapper.tsx
dapp/app/portfolio/PortfolioClient.tsx