Errors
Error boundaries, error cards, and alert messages
Components for displaying errors, alerts, and handling error states.
Prerequisites
CoreAlert
Contextual feedback messages with severity levels (success, info, warning, error). The source component is named Alert internally but is exported from the barrel as CoreAlert; some consumers alias-import it as { CoreAlert as Alert }.
Import
import { CoreAlert } from '@tetherto/mdk-react-devkit/core'The component is authored as Alert in @tetherto/mdk-react-devkit/core but re-exported as CoreAlert at the package barrel to avoid collisions with other Alert primitives (for example Radix AlertDialog).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'success' | 'info' | 'warning' | 'error' | 'info' | Alert type |
title | ReactNode | none | Main message |
description | ReactNode | none | Additional description |
showIcon | boolean | false | Show type icon |
icon | ReactNode | none | Custom icon |
closable | boolean | false | Show close button |
onClose | function | none | Close callback |
banner | boolean | false | Full-width banner style |
action | ReactNode | none | Action element |
Basic usage
<CoreAlert type="info" title="System maintenance scheduled" showIcon />
<CoreAlert
type="success"
title="Configuration saved"
description="Your settings have been updated successfully."
showIcon
closable
/>With action
<CoreAlert
type="warning"
title="Low hashrate detected"
description="Some miners are performing below expected levels."
showIcon
action={<Button size="sm">View Details</Button>}
/>Banner style
<CoreAlert
type="error"
title="Connection lost"
description="Unable to connect to the pool server."
banner
showIcon
/>Styling
.mdk-alert: Root container.mdk-alert--{type}: Type variant.mdk-alert--banner: Banner variant.mdk-alert__icon: Icon container.mdk-alert__content: Content wrapper.mdk-alert__title: Title text.mdk-alert__description: Description text.mdk-alert__action: Action container.mdk-alert__close: Close button
ErrorBoundary
React error boundary for catching and displaying rendering errors.
Import
import { ErrorBoundary, withErrorBoundary } from '@tetherto/mdk-react-devkit/core'Props
| Prop | Type | Default | Description |
|---|---|---|---|
fallback | ReactNode | none | Custom fallback UI |
componentName | string | none | Component name for error display |
onError | function | none | Error callback |
children | ReactNode | none | Children to wrap |
Basic usage
<ErrorBoundary fallback={<div>Something went wrong</div>}>
<MyComponent />
</ErrorBoundary>With component name
<ErrorBoundary
componentName="HashrateChart"
onError={(error, info) => console.error(error)}
>
<HashrateChart data={data} />
</ErrorBoundary>Higher-order component
import { withErrorBoundary } from '@tetherto/mdk-react-devkit/core'
const SafeChart = withErrorBoundary(
Chart,
'Chart',
(error) => logError(error)
)
<SafeChart data={data} />Styling
.mdk-error-boundary: Root container.mdk-error-boundary__title: Error title.mdk-error-boundary__message: Error message.mdk-error-boundary__details: Expandable details.mdk-error-boundary__stack: Stack trace
ErrorCard
Styled error message display card.
Import
import { ErrorCard } from '@tetherto/mdk-react-devkit/core'Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | none | Error title |
message | string | none | Error message |
retry | function | none | Retry callback (shows retry button) |
Basic usage
<ErrorCard
title="Failed to load data"
message="Unable to fetch miner statistics. Please try again."
retry={() => refetch()}
/>Styling
.mdk-error-card: Root container.mdk-error-card__title: Title text.mdk-error-card__message: Message text.mdk-error-card__retry: Retry button
NotFoundPage
Pre-styled 404 error page template.
Import
import { NotFoundPage } from '@tetherto/mdk-react-devkit/core'Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Page not found' | Page title |
message | string | none | Custom message |
backUrl | string | '/' | Back button URL |
Basic usage
<NotFoundPage />
<NotFoundPage
title="Miner not found"
message="The miner you're looking for doesn't exist or has been removed."
backUrl="/miners"
/>Styling
.mdk-not-found: Root container.mdk-not-found__title: Title text.mdk-not-found__message: Message text.mdk-not-found__back: Back button