Errors

Components for displaying errors, alerts, and handling error states.

Prerequisites

Complete the @mdk/core installation and add the dependency.

`CoreAlert`

Contextual feedback messages with severity levels. Exported as CoreAlert from @mdk/core to avoid collisions with other Alert primitives.

Import

import { CoreAlert } from '@mdk/core'

The component is authored as Alert in @mdk/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>}
/>

<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 '@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

Prerequisites

`CoreAlert`

Import

Props

Basic usage

With action

Banner style

Styling

`ErrorBoundary`

Import

Props

Basic usage

With component name

Higher-order component

Styling

`ErrorCard`

Import

Props

Basic usage

Styling

`NotFoundPage`

Import

Props

Basic usage

Styling

On this page