Examples

Real-world examples of using ErrorMail in your React applications.

Basic React Component

import { ErrorBoundary } from 'errormail';

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

Button Component

      <ErrorBoundary>
        <Button onClick={() => {Throw new Error("Error")}}>
        Error button
        </Button>
      </ErrorBoundary>

API Call Wrapper

import { errormail } from 'errormail';

async function fetchUser(userId) {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) throw new Error('Failed to fetch');
  return response.json();
}

const safeFetchUser = errormail('devops@example.com')(fetchUser);

// Use in component
const user = await safeFetchUser(123);

Multiple Error Boundaries

function App() {
  return (
    <ErrorBoundary emailTo="admin@example.com">
      <Header />
      <ErrorBoundary emailTo="devops@example.com">
        <MainContent />
      </ErrorBoundary>
      <Footer />
    </ErrorBoundary>
  );
}

Custom Fallback UI

<ErrorBoundary
  emailTo="admin@example.com"
  fallback={(error) => (
    <div className="error-container">
      <h1>Oops! Something went wrong</h1>
      <p>{error.message}</p>
      <button onClick={() => window.location.reload()}>
        Reload Page
      </button>
    </div>
  )}
>
  <MyComponent />
</ErrorBoundary>

Function with Context

const safeProcessOrder = errormail('orders@example.com')(async (orderId) => {
  // Process order logic
  return processOrder(orderId);
});

// With additional context
const safeProcessOrder = errormail(processOrder, {
  emailTo: 'orders@example.com',
  functionName: 'processOrder',
  context: {
    module: 'orders',
    environment: 'production'
  }
});