Errors

Error components and boundaries can be used to display generic error messaging. They can instruct users to perform certain actions or provide information about the error.

DisconnectedErrorMessage

Result

Loading...

Live Editor

function Example() { return <DisconnectedErrorMessage />; }

function Example() {
    return <DisconnectedErrorMessage />;
}

Props

DisconnectedErrorBoundary

The DisconnectedErrorBoundary component is a generic error boundary that can be used to catch errors in a component tree. It will display the same error messaging as DisconnectedErrorMessage when an error is caught.

Result

Loading...

Live Editor

function ErrorButton() { const [error, setError] = useState(false); if (error) { throw new Error('Wow'); } return ( <Button variant="danger" onClick={() => setError(true)}> Throw error </Button> ); } function Example() { return ( <DisconnectedErrorBoundary> <ErrorButton /> </DisconnectedErrorBoundary> ); } render(<Example />);

function ErrorButton() {
    const [error, setError] = useState(false);
    if (error) {
        throw new Error('Wow');
    }

    return (
        <Button variant="danger" onClick={() => setError(true)}>
            Throw error
        </Button>
    );
}

function Example() {
    return (
        <DisconnectedErrorBoundary>
            <ErrorButton />
        </DisconnectedErrorBoundary>
    );
}

render(<Example />);