ErrorBoundary

Purpose

The error boundary is a wrapper around a component or a group of components. An error boundary will catch errors and present them to the user in a fallback UI. Typically, an error boundary should be used at the root of an application. More reading on error boundaries may be found here

Usage

import Button from '@wedgekit/button';
import ErrorBoundary from '@wedgekit/error-boundary';

const ErrorButton = () => {
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    if (error) {
      throw new Error('User created error');
    }
  }, [error]);
  return <Button onClick={() => setError(true)}>Throw Error</Button>;
};

const Example = () => {
  return (
    <ErrorBoundary title="Error Title" message="Error Message">
      <h1>No errors</h1>
      <ErrorButton />
    </ErrorBoundary>
  );
};

render(<Example />);

Props

children

Type: JSX.Element

Required: ✅

The component(s) ErrorBoundary is to wrap.

message

Type: string

Required: ✅

A standard error message used to portray information to the user.

title

Type:string

Required: ✅

A standard title used to inform the user that an error has occurred.