> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# ErrorComponent

> Customize or disable the ErrorComponent indicator shown when a GoodData.UI visualization fails to render.

API reference: [ErrorComponent()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.errorcomponent/index.md) (function)

The [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.errorcomponent/index.md) prop lets you customize what a visualization component renders when it's in its error state. The component you pass receives [`IErrorProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md): the `message` and `description` already localized for the error code, the `code` itself, and the `icon` class name. To hide the error state, pass a component that renders nothing.

All visualization components support the [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.errorcomponent/index.md) prop. The default [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.errorcomponent/index.md) is exported from `@gooddata/sdk-ui`, so you can also render it yourself; by default it uses the `gd-icon-warning` icon and fills the available height.

To react differently to an empty result, a canceled request, or an expired session instead of replacing the message, handle the `onError` callback and narrow the error with the type guards; see [Handle errors](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/handle-errors/index.md).

## [Example: disabled ErrorComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/error-component/#example-disabled-errorcomponent)

In the following example, the [`Kpi`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.kpi/index.md) component shows neither the loading indicator nor the error message.

```tsx
import { Kpi } from "@gooddata/sdk-ui";
import * as Md from "./catalog.js";

<Kpi
    measure={Md.$FranchiseFees}
    LoadingComponent={() => null}
    ErrorComponent={() => null}
/>
```

## [Example: customized ErrorComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/error-component/#example-customized-errorcomponent)

In the following example, the default [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.errorcomponent/index.md) is replaced by a custom component.

```tsx
import { Kpi, type IErrorProps } from "@gooddata/sdk-ui";
import * as Md from "./catalog.js";

const CustomError = ({ message, description, icon }: IErrorProps) => (
    <p>
        <span className={icon} /> <strong>{message}</strong>
        <br />
        {description}
    </p>
);

<Kpi
    measure={Md.$FranchiseFees}
    ErrorComponent={CustomError}
/>
```

## [Props](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/error-component/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`message`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropsmessage) | `string` | Yes | — | — |
| [`className`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropsclassname) | `string` | No | — | — |
| [`clientHeight`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropsclientheight) | `any` | No | Size of the visualisation content when custom size layouting is enabled. | — |
| [`code`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropscode) | `string` | No | — | — |
| [`dataTestId`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropsdatatestid) | `string` | No | Test identifier put on the component's root element. | — |
| [`description`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropsdescription) | `string` | No | — | — |
| [`height`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropsheight) | `any` | No | Size of the error component. | — |
| [`icon`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropsicon) | `string` | No | — | — |
| [`style`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropsstyle) | `object` | No | — | — |
| [`width`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md#ierrorpropswidth) | `any` | No | — | — |