# State view
> One layout for a region's loading, empty and error states, and an error boundary that reports errors, recovers and never shows error details to users.
Source: https://platform.azmara.io/docs/components/state-view
Group: Feedback · Status: stable · Added in @azmr/ui 0.12.0
## Usage
```tsx
import { StateView } from "@azmr/ui/state-view"; // Server Component
import { ErrorBoundary } from "@azmr/ui/error-boundary"; // "use client"
```
```tsx
import { Button } from "@azmr/ui/button";
import { StateView } from "@azmr/ui/state-view";
export default function StateViewStates() {
return (
Create invoice}
titleAs="h3"
/>
Try again
}
titleAs="h3"
/>
);
}
```
Every list, table and page has the same three extra states: still loading, nothing to show, and failed. `StateView` gives them one layout (icon, title, a sentence, an action), so they look and read the same everywhere. It is a **Server Component**, so it works in `loading.tsx`, `error.tsx`, Suspense fallbacks and empty tables.
| `state` | Announced as | Default title | Default icon |
| --------- | -------------------------------------------------------------------------------------------------------- | -------------------- | -------------------------------- |
| `loading` | a polite status (it is [`Loading`](https://platform.azmara.io/docs/components/loading.md)), after 200 ms | Loading… | the spinner, or your `logo` |
| `empty` | plain content | Nothing here yet | inbox |
| `error` | an alert | Something went wrong | alert, in the destructive colour |
`variant="page"` fills the content area and `section` (default) fills its container. `titleAs` picks the heading level (`h2` by default) so it fits the page's outline; use `h1` when the state is the whole page, such as a 404 page. `icon={null}` drops the icon, and `action` takes any buttons or links.
## Page loader
A full-page loader with your logo is ``, the same as ``. The ring spins around the logo while the logo stays still.
## Error boundary
```tsx
"use client";
import { Button } from "@azmr/ui/button";
import { ErrorBoundary } from "@azmr/ui/error-boundary";
import { useState } from "react";
function Report({ broken }: { broken: boolean }) {
if (broken) throw new Error("Report query failed for customer #4123");
return
setReported((n) => n + 1)}
// Try again re-renders the children, so fix the cause first.
onReset={() => setBroken(false)}
fallbackProps={{ titleAs: "h3", title: "The report couldn't load" }}
>
Errors reported: {reported}
);
}
```
`ErrorBoundary` catches errors thrown while its children render and shows a fallback with **Try again**, instead of a blank page.
- **Reporting:** `onError(error, info)` is called once per caught error, with the component stack. Send it to Sentry, PostHog or your own logger. The boundary has no reporting service built in.
- **Recovery:** Try again calls `reset`, which renders the children again (so fix the cause first, in `onReset`). `resetKeys={[id]}` resets by itself when a route or record changes.
- **No error details by default:** the default fallback says "Something went wrong" and never shows `error.message`, which can carry an email address, a record id or a server path. Customise the text with `fallbackProps`, or pass your own `fallback`, which receives `{ error, reset }`.
- **What it does not catch:** errors in event handlers, timers and promises are not render errors. Catch them where they happen and show a toast or set state.
## In Next.js
Next.js has its own error boundary, the `error.tsx` file. Use `StateView` as its UI. Since Next.js 16.2 it receives `retry`, which fetches the segment again; `reset` only re-renders it.
```tsx
"use client";
import { Button } from "@azmr/ui/button";
import { StateView } from "@azmr/ui/state-view";
import { useEffect } from "react";
export default function InvoicesError({ error, retry }: { error: Error & { digest?: string }; retry: () => void }) {
useEffect(() => {
reportError(error); // your reporting hook; error.digest matches the server logs
}, [error]);
return (
retry()}>Try again}
/>
);
}
```
```tsx
import { StateView } from "@azmr/ui/state-view";
export default function InvoicesLoading() {
return ;
}
```
Use `ErrorBoundary` for a part of a page (a chart, a widget) that should fail on its own. In Next.js pass `rethrow={unstable_rethrow}` from `next/navigation`: `redirect()` and `notFound()` work by throwing, and `rethrow` lets them through to Next.js instead of showing them as errors. They are not passed to `onError` either.
```tsx
"use client";
import { ErrorBoundary } from "@azmr/ui/error-boundary";
import { unstable_rethrow } from "next/navigation";
```
## Props
### StateView
| Prop | Type | Default | Required | Description |
| ------------- | -------------------------------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className` | `string` | | No | |
| `logo` | `ReactNode` | | No | A logo or image shown in the middle of the spinner (``, `