ErrorMail - Automatic Error Reporting for React

Wrap your React components with ErrorBoundary to catch and report rendering errors.

Button Component

import { ErrorBoundary } from 'errormail';
              
<ErrorBoundary>
  <Button onClick={() => {Throw new Error("Error")}}>
    Error button
  </Button>
</ErrorBoundary>

Basic Usage

import { ErrorBoundary } from 'errormail';

function MyComponent() {
  // Your component code
  return <div>My Component</div>;
}

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

With Fallback UI

<ErrorBoundary
  fallback={(error) => (
    <div>
      <h1>Something went wrong</h1>
      <p>{error.message}</p>
    </div>
  )}
>
  <MyComponent />
</ErrorBoundary>

Props

emailTo

Email address to send error reports to. Overrides the default from configuration.

Type: string | Optional

fallback

Function that receives the error and returns fallback UI to render.

Type: (error: Error) => ReactNode | Optional

fallbackComponent

React component to render on error. Receives error as prop.

Type: React.Component | Optional

children

React components to wrap with error boundary.

Type: ReactNode | Required

withErrorBoundary HOC

Use the higher-order component pattern for cleaner code:

import { withErrorBoundary } from 'errormail';

const SafeMyComponent = withErrorBoundary(MyComponent, {
  fallback: (error) => <div>Error: {error.message}</div>,
});