# components/ErrorBoundary (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/ErrorBoundary.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/ErrorBoundary.tsx).

## Components

### `ErrorDetails`

Component.

The error message; with stacks on (`configureErrorReports`) the JS and component stacks under a disclosure.

```ts
function ErrorDetails(props: ErrorDetailsProps): Element
```

**Parameters**

- `props` (`ErrorDetailsProps`): The error and its component stack.

**Returns** `Element`

**Props**

- `componentStack` (`string | null`): React's component stack, once known.
- `error` (`unknown`): What was thrown.

Source: [ui/src/components/ErrorBoundary.tsx:187](https://github.com/Tahul/zidane/blob/main/ui/src/components/ErrorBoundary.tsx#L187)

### `ErrorFallback`

Component.

The default fallback: what failed, why, and a way back.

```ts
function ErrorFallback(props: ErrorFallbackFrameProps): Element
```

**Parameters**

- `props` (`ErrorFallbackFrameProps`): The error, the region and the reset.

**Returns** `Element`

**Props**

- `actions?` (`ReactNode`): Extra buttons next to "Try again".
- `className?` (`string`): The container's classes.
- `componentStack` (`string | null`, from `ErrorFallbackProps`): React's component stack, once known.
- `error` (`unknown`, from `ErrorFallbackProps`): What was thrown.
- `framed?` (`boolean`): Drawn as a tray (default true).
- `region` (`string`): Names the region ("Sidebar").
- `reset` (`() => void`, from `ErrorFallbackProps`): Clears the error and renders the region again.

Source: [ui/src/components/ErrorBoundary.tsx:139](https://github.com/Tahul/zidane/blob/main/ui/src/components/ErrorBoundary.tsx#L139)

## Classes

### `ErrorBoundary`

Class.

Catches a throw in its children and shows a fallback in their place (see the top of this file).

```ts
class ErrorBoundary extends Component<ErrorBoundaryProps, State>
```

**Constructor**

```ts
new ErrorBoundary(props: ErrorBoundaryProps)
```

**Parameters**

- `props` (`ErrorBoundaryProps`): The region's name, its children and the fallback.

**Returns** `ErrorBoundary`

**Properties**

- `state` (`State`): Whether it caught, what, and the `resetKey` it caught under.

**Methods**

#### `componentDidCatch()`

```ts
componentDidCatch(error: unknown, info: ErrorInfo): void
```

React's hook: logs the caught error once, with the region.

**Parameters**

- `error` (`unknown`): What was thrown.
- `info` (`ErrorInfo`): React's component stack.

#### `render()`

```ts
render(): ReactNode
```

The children, or the fallback after a throw.

**Returns** `ReactNode`

#### `reset()`

```ts
reset(): void
```

Clears the error and renders the region again.

#### `ErrorBoundary.getDerivedStateFromError()`

```ts
ErrorBoundary.getDerivedStateFromError(error: unknown): Partial<State>
```

React's hook: a child threw.

**Parameters**

- `error` (`unknown`): What was thrown.

**Returns** `Partial<State>`

#### `ErrorBoundary.getDerivedStateFromProps()`

```ts
ErrorBoundary.getDerivedStateFromProps(
  props: ErrorBoundaryProps,
  state: State,
): Partial<State> | null
```

React's hook: a new `resetKey` clears a caught error.

**Parameters**

- `props` (`ErrorBoundaryProps`): The new props.
- `state` (`State`): The state now.

**Returns** `Partial<State> | null`

Source: [ui/src/components/ErrorBoundary.tsx:60](https://github.com/Tahul/zidane/blob/main/ui/src/components/ErrorBoundary.tsx#L60)

## Interfaces

### `ErrorBoundaryProps`

Interface.

Props for [`ErrorBoundary`](https://zidane.si/docs/reference/ui-components-error-boundary.md#ErrorBoundary).

```ts
interface ErrorBoundaryProps
```

**Properties**

- `actions?` (`ReactNode`): Extra buttons next to "Try again" in the default fallback (the root's "Reload window").
- `children` (`ReactNode`): The region.
- `className?` (`string`): The default fallback's container classes: it takes the region's place in the layout.
- `fallback?` (`((props: ErrorFallbackProps) => ReactNode) | null`): Replaces the default fallback. `null` renders nothing: a host with no
  surface of its own (attention watchers, request bridges).
- `framed?` (`boolean`): Default fallback drawn as a tray; off on a surface that already is one.
- `region` (`string`): Names the region in the log and in the fallback ("Sidebar", "Side panel").
- `resetKey?` (`unknown`): Clears a caught error when it changes (compared with `Object.is`).

Source: [ui/src/components/ErrorBoundary.tsx:32](https://github.com/Tahul/zidane/blob/main/ui/src/components/ErrorBoundary.tsx#L32)

### `ErrorDetailsProps`

Interface.

Props for [`ErrorDetails`](https://zidane.si/docs/reference/ui-components-error-boundary.md#ErrorDetails).

```ts
interface ErrorDetailsProps
```

**Properties**

- `componentStack` (`string | null`): React's component stack, once known.
- `error` (`unknown`): What was thrown.

Source: [ui/src/components/ErrorBoundary.tsx:175](https://github.com/Tahul/zidane/blob/main/ui/src/components/ErrorBoundary.tsx#L175)

### `ErrorFallbackFrameProps`

Interface.

Props for [`ErrorFallback`](https://zidane.si/docs/reference/ui-components-error-boundary.md#ErrorFallback).

```ts
interface ErrorFallbackFrameProps extends ErrorFallbackProps
```

**Properties**

- `actions?` (`ReactNode`): Extra buttons next to "Try again".
- `className?` (`string`): The container's classes.
- `componentStack` (`string | null`, from `ErrorFallbackProps`): React's component stack, once known.
- `error` (`unknown`, from `ErrorFallbackProps`): What was thrown.
- `framed?` (`boolean`): Drawn as a tray (default true).
- `region` (`string`): Names the region ("Sidebar").
- `reset` (`() => void`, from `ErrorFallbackProps`): Clears the error and renders the region again.

Source: [ui/src/components/ErrorBoundary.tsx:123](https://github.com/Tahul/zidane/blob/main/ui/src/components/ErrorBoundary.tsx#L123)

### `ErrorFallbackProps`

Interface.

What a fallback receives.

```ts
interface ErrorFallbackProps
```

**Properties**

- `componentStack` (`string | null`): React's component stack, once known.
- `error` (`unknown`): What was thrown.
- `reset` (`() => void`): Clears the error and renders the region again.

Source: [ui/src/components/ErrorBoundary.tsx:22](https://github.com/Tahul/zidane/blob/main/ui/src/components/ErrorBoundary.tsx#L22)