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' } });