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 | Status | Type | Default | Description |
|---|---|---|---|---|
type | Optional | 'success' | 'info' | 'warning' | 'error' | 'info' | Alert type |
title | Optional | ReactNode | none | Main message |
description | Optional | ReactNode | none | Additional description |
showIcon | Optional | boolean | false | Show type icon |
icon | Optional | ReactNode | none | Custom icon |
closable | Optional | boolean | false | Show close button |
onClose | Optional | function | none | Close callback |
banner | Optional | boolean | false | Full-width banner style |
action | Optional | 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 | Status | Type | Default | Description |
|---|---|---|---|---|
fallback | Optional | ReactNode | none | Custom fallback UI |
componentName | Optional | string | none | Component name for error display |
onError | Optional | function | none | Error callback |
children | Required | 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 | Status | Type | Default | Description |
|---|---|---|---|---|
error | Required | string | none | Error message (supports \n for line breaks) |
title | Optional | string | 'Errors' | Title displayed above the error message |
variant | Optional | 'card' | 'inline' | 'card' | Display variant — card shows a bordered container, inline shows flat text |
className | Optional | string | none | Additional CSS class |
Basic usage
<ErrorCard error="Connection timed out. Please try again." />
<ErrorCard
title="Authentication error"
error="Invalid credentials. Please check your username and password."
/>
<ErrorCard
variant="inline"
title="Warning"
error="Some miners are reporting high temperatures."
/>Styling
.mdk-error-card: Root container.mdk-error-card--{variant}: Variant modifier (card/inline).mdk-error-card__title: Title text.mdk-error-card__message: Message text
NotFoundPage
Pre-styled 404 error page template.
Import
import { NotFoundPage } from '@tetherto/mdk-react-devkit/core'Props
| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
onGoHome | Optional | VoidFunction | none | Callback fired when the "Go Home" button is clicked (button only renders when provided) |
title | Optional | string | none | Page title |
message | Optional | string | none | Message displayed below the title |
className | Optional | string | none | Additional CSS class |
Basic usage
<NotFoundPage onGoHome={() => navigate('/')} />
<NotFoundPage
title="Miner not found"
message="The miner you're looking for doesn't exist or has been removed."
onGoHome={() => navigate('/')}
/>Styling
.mdk-not-found-page: Root container.mdk-not-found-page__title: Title text.mdk-not-found-page__message: Message text.mdk-not-found-page__button: Go Home button