ErrorComponent

ErrorComponent indicator is a property that enables you to customize what content is displayed when a visual component is in its error state. You can disable the default setting of the ErrorComponent indicator by explicitly passing null instead.

The ErrorComponent indicator is supported by all visualization components.

Example: Disabled ErrorComponent

In the following example, the KPI shows neither the loading indicator nor the error message.

import { Kpi } from "@gooddata/sdk-ui";
import * as Ldm from "./ldm/full";

<Kpi
    measure={Ldm.$FranchiseFees}
    LoadingComponent={null}
    ErrorComponent={null}
/>

Example: Customized ErrorComponent

In the following example, the default ErrorComponent is replaced by a custom component.

import { Kpi } from "@gooddata/sdk-ui";
import * as Ldm from "./ldm/full";

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

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