1
Error notice
RequiredAssertive error container and title.
All componentsView source
Actions & feedback
ErrorReport
An error notice with optional expandable, copyable diagnostics for support workflows.
ErrorReportErrorReportPropsComponent workbench
Configure the production component, inspect it at responsive widths, copy synchronized JSX, and share the exact state from one workspace.
Something went wrong
Unable to load projects.
Generated example
This JSX stays synchronized with the controls and uses only public package APIs.
tsx
import { ErrorReport } from '@ai-created/ui';
export function Example() {
return (
<ErrorReport
title={"Something went wrong"}
message={"Unable to load projects."}
details={"Request timed out."}
/>
);
}
Import
tsx
import { ErrorReport } from '@ai-created/ui';Client boundary
Add
'use client' to the file that owns this interactive state.Install from a reviewed release
Replace the version placeholder with the release tag your product has reviewed.
shell
npm install --install-links "git+https://github.com/TheMarco/ai-created-ui.git#vX.Y.Z"Load semantic tokens
css
@import '@ai-created/ui/styles/tokens.css';
@tailwind base;
@tailwind components;
@tailwind utilities;Extend Tailwind
js
module.exports = {
presets: [require('@ai-created/ui/tailwind-preset')],
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@ai-created/ui/src/**/*.{js,ts,jsx,tsx}',
],
};Anatomy
Named regions define what belongs to the component, what remains optional, and where semantic responsibility lives.
2
Message
RequiredUser-facing failure summary.
3
Disclosure
OptionalOptional Debug info toggle.
button4
Diagnostic block
OptionalExpanded preformatted details, timestamp, and URL.
pre5
Copy action
OptionalCopies the assembled diagnostics.
buttonConstruction and authoring
The Figma-equivalent asset model, auto-layout, resizing, properties, slots, content bounds, localization, and governance contract.
Asset kind
component
Design library name
Components/Feedback/Error report
Maturity
stable
Last reviewed
2026-08-29
Canvas applicability
Publish collapsed, expanded, and copied interactive states as component variants.
Auto layout
- Direction
- vertical
- Gap
- 8px
- Padding
- Inherited 24px Notice padding
- Alignment
- Stretch
- Wrap
- Content wraps
Resizing
- Width
- fill
- Height
- hug
- Minimum width
- 280px
- Maximum width
- Parent controlled
- Minimum height
- Content controlled
- Maximum height
- Content controlled
- Overflow
- visible
Exposed design properties
| Property | Type | Default | Code mapping | Options or notes |
|---|---|---|---|---|
| Title | text | Something went wrong | title | No additional constraint |
| MessageRequired | text | None | message | No additional constraint |
| Debug details | text | None | details | No additional constraint |
| Expanded preview | boolean | false | Internal disclosure state; no public prop | No additional constraint |
| Copied preview | boolean | false | Transient internal state; no public prop | No additional constraint |
Nested assets and slots
Notice
subcomponent / requiredAssertive error container.
<Notice variant="error">Disclosure
subcomponentControls diagnostic visibility.
Internal native buttonCopy action
subcomponentCopies sanitized diagnostics.
Internal ButtonContent limits
Title
One line preferredOverflow: Allow localization wrap.
The failure category should remain concise.
Message
One or two sentencesOverflow: Move troubleshooting steps below the component.
Users need a clear outcome and next step.
Details
Sanitized diagnostic text only, maximum practical payload 4KBOverflow: Provide a support attachment flow for larger logs.
Large or sensitive logs should not be exposed inline.
Localization and RTL
Translatable: Title, Message, Disclosure label, Copy state
- Disclosure chevron mirrors in right-to-left layouts.
- Diagnostic payload remains in its source direction.
- Test translated button labels.
- Test mixed-direction stack traces.
- Test an absent details value.
Responsive behavior
Fill the failed content region.
No internal breakpoint
- Technical text wraps and remains horizontally scroll-safe.
- Place the component near the failed content.
Authoring limits
- Clipboard and disclosure behavior must be annotated because Figma cannot validate browser permissions.
- Never pass credentials, tokens, personal data, or full URLs with sensitive query parameters to details.
Accountable owner
Design systems reliability pattern owner
Canonical source: src/components/ErrorReport.tsx
- Changes to diagnostic content require privacy and security review.
- A breaking property, token, or behavior change requires design and engineering approval, a migration note, and a major release.
- The design asset, implementation, documentation, accessibility contract, and regression coverage must ship in the same change.
Visual specification
These measurements and semantic tokens define the supported visual contract. Local overrides should preserve the same hierarchy and interaction cues.
Notice padding
24px
Internal vertical gap
8px
Diagnostic padding
12px
Disclosure icon
12 × 12px
Rules
- Keep the user-facing message readable without opening diagnostics.
- Prevent long diagnostic lines from breaking the containing layout.
Token dependencies
--color-error / --color-error-surface / --color-error-borderError Notice treatment.
--color-surface2Diagnostic code block.
--color-text2 / --color-text3Message and low-emphasis controls.
States and behavior
A component is not complete until its passive, interactive, disabled, and exceptional states remain understandable in both themes.
collapsed
- Trigger
- Details exist but disclosure is closed.
- Visual response
- Message and Debug info disclosure are visible.
- Behavior
- Technical details are not mounted.
- Accessibility
- aria-expanded is false and aria-controls points to the details id.
expanded
- Trigger
- Disclosure is activated.
- Visual response
- Diagnostic pre block and copy action appear.
- Behavior
- Details include error, timestamp, and current path.
- Accessibility
- aria-expanded is true.
copied
- Trigger
- Clipboard write resolves.
- Visual response
- Copy action becomes Copied for two seconds.
- Behavior
- Diagnostic string is on the clipboard.
copy failed
- Trigger
- Clipboard write rejects or is unavailable.
- Visual response
- Copy action becomes Copy failed for two seconds.
- Behavior
- The rejection is handled without an unhandled promise and the user may retry.
- Accessibility
- The polite live status announces the failure.
Accessibility contract
Semantics, accessible naming, keyboard behavior, focus and announcements are implementation requirements, not optional documentation.
- Semantics
- Composes role=alert Notice plus native disclosure and copy buttons.
- Accessible name
- The Notice title and message identify the error; buttons have visible names.
- Never include credentials, tokens, personal data, or full query strings in details.
- Preserve aria-expanded and aria-controls on the disclosure.
- Copy success and failure feedback must remain visible long enough to perceive.
Keyboard behavior
- Enter / Space
- Toggles diagnostic disclosure when focused.
- Enter / Space
- Copies diagnostics from the copy button.
- Tab
- Moves through disclosure and copy action when present.
Announcements
- The error Notice is assertively announced.
- Clipboard success or failure is announced through a polite live status.
Implementation
Use the public package API and preserve the controlled-state, native-attribute, and ref contracts described below.
tsx
import { ErrorReport } from '@ai-created/ui';Client Component required
- details controls whether the disclosure and copy action exist.
- timestamp should be supplied for deterministic reports; otherwise it is created when debugInfo renders.
- The URL is limited to origin and pathname.
- Clipboard rejection is handled and the feedback timer is cleared on replacement and unmount.
tsx
<ErrorReport message="Unable to load projects." details={error.message} />Public API
These props and helpers are compatibility contracts. Changes require migration guidance and release notes.
| Prop | Type | Default | Contract |
|---|---|---|---|
| message | string | required | User-facing error message. |
| title | string | Something went wrong | Error heading. |
| details | string | null | undefined | Optional technical details. |
| timestamp | string | current ISO time | Optional diagnostic timestamp. |
Usage guidance
These rules keep the component recognizable across products without preventing deliberate composition.
Do
- Write the message for the user before adding technical detail.
- Sanitize all detail strings at the error boundary.
Do not
- Do not pass stack traces containing secrets.
- Do not use for field-level validation.
Testing contract
The component should be verified as rendered UI, an interaction model, an accessibility surface, and a theme-aware visual artifact.
Unit
- Assembles diagnostic text with optional details and timestamp.
- Resets copy success or failure feedback after two seconds.
Interaction
- Disclosure toggles; clipboard resolution and rejection both produce the expected status.
Accessibility
- Alert, disclosure relationship, button names, focus order, and polite clipboard status are valid.
Visual
- Capture collapsed, expanded, copied, copy-failed, long-details, and both themes.