Error state ​

Failure chrome from resolveStatus({ kind: "error" }) in @sometic/dom/status. Assertive live region, role="alert", data-status="error", and the default title Something went wrong. Same resolver as Empty state, Offline state, and Conflict state, with a different kind.

PreviewStatus

Nothing here yet

Demo empty surface

You are offline

Demo offline surface

Usage ​

js
import { resolveStatus, resolveStatusAction } from "@sometic/dom/status";

const panel = document.querySelector("#rows-error");

function showError(error, retry) {
    const view = resolveStatus({
        kind: "error",
        title: "We could not load these rows",
        description: error.message,
        hasAction: true,
    });

    panel.className = view.className;
    for (const [key, value] of Object.entries(view.attributes)) {
        panel.setAttribute(key, value);
    }

    const action = document.createElement("button");
    for (const [key, value] of Object.entries(resolveStatusAction().attributes)) {
        action.setAttribute(key, value);
    }
    action.textContent = "Try again";
    action.addEventListener("click", retry);

    panel.replaceChildren(action);
}
ts
import { resolveStatus, type StatusViewModel } from "@sometic/dom/status";

export function rowsError(error: Error): StatusViewModel {
    return resolveStatus({
        kind: "error",
        title: "We could not load these rows",
        description: error.message,
        hasAction: true,
    });
}
html
<section id="rows-error"></section>

<script type="module">
    import { resolveStatus, resolveStatusAction } from "@sometic/dom/status";

    const panel = document.querySelector("#rows-error");
    const view = resolveStatus({ kind: "error", hasAction: true });

    panel.className = view.className;
    for (const [key, value] of Object.entries(view.attributes)) {
        panel.setAttribute(key, value);
    }

    const title = document.createElement("h3");
    title.dataset.slot = "title";
    title.textContent = view.title;

    const action = document.createElement("button");
    for (const [key, value] of Object.entries(resolveStatusAction().attributes)) {
        action.setAttribute(key, value);
    }
    action.textContent = "Try again";

    panel.replaceChildren(title, action);
</script>

Notes ​

  • Error is assertive by default (role="alert"), because a failed load blocks the user. Pass live: "polite" when the region already sits inside another live region.
  • Show a message a user can act on. Put the raw technical detail behind a details toggle or in logs, not in the title.
  • Pair the action with a real retry path. In a data table that usually means calling load() again; with Query it means revalidating.
  • A failed request caused by connectivity is usually better rendered as Offline state, which comes with a recovery hook.
  • Never leave focus stranded: if the error replaces a focused table, move focus to the region or the retry button.

Full API, accessibility, styling, edge cases, and FAQ: Status surfaces.