ErrorBoundaryCard

stable

Containment unit for agent errors — severity-coded card with recovery actions

Human-in-the-Loop/Storybook ↗

import { ErrorBoundaryCard } from "@danagraph/design-system/patterns"

RECOVERABLE — HUMAN ACTION REQUIRED

PaymentAgentSWIFT_CONN_TIMEOUT

Payment Gateway Timeout

SWIFT connectivity lost — FIN queue paused

2026-10-17T04:40:02.605Z

Loading demo…

Props

Prop	Type	Default	Description
`title`req	`string`	—	Short error title.
`message`req	`string`	—	Human-readable explanation of what failed.
`source`req	`string`	—	Agent or system that produced the error.
`timestamp`req	`string`	—	ISO timestamp or display string.
`severity`req	`'fatal' \| 'recoverable' \| 'transient'`	—	Controls border and accent color.
`code`	`string`	—	Optional error code or trace ID.
`detail`	`string`	—	Raw technical detail in collapsible pre block.
`actions`	`ErrorAction[]`	[]	Recovery actions with label, variant, and onClick.

titlerequired

Type stringDefault —

Short error title.

messagerequired

Type stringDefault —

Human-readable explanation of what failed.

sourcerequired

Type stringDefault —

Agent or system that produced the error.

timestamprequired

Type stringDefault —

ISO timestamp or display string.

severityrequired

Type 'fatal' | 'recoverable' | 'transient'Default —

Controls border and accent color.

code

Type stringDefault —

Optional error code or trace ID.

detail

Type stringDefault —

Raw technical detail in collapsible pre block.

actions

Type ErrorAction[]Default []

Recovery actions with label, variant, and onClick.

Design Rationale

This component was designed to express:

Recovery breadcrumb timeline showing every step an agent attempted after hitting a dead end

Partial completion panel — agent did N of M steps, human needed on step K

High-priority alert banner for human escalation

Was this helpful?