Errors
Error boundaries, error cards, and alert messages
Errors
Components for displaying errors, alerts, and handling error states.
Prerequisites
Before using these components, complete the @mdk/core installation and add the dependency.
Alert
Contextual feedback messages with severity levels.
Import
import { Alert } from '@mdk/core'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
<Alert type="info" title="System maintenance scheduled" showIcon />
<Alert
type="success"
title="Configuration saved"
description="Your settings have been updated successfully."
showIcon
closable
/>With action
<Alert
type="warning"
title="Low hashrate detected"
description="Some miners are performing below expected levels."
showIcon
action={<Button size="sm">View Details</Button>}
/>Banner style
<Alert
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 '@mdk/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 '@mdk/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 '@mdk/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 '@mdk/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