@bugmail-js/react — BugMail SDK for React

Official BugMail SDK for React applications. Provides Error Boundary components and hooks for easy error tracking.

Installation

npm install @bugmail-js/react
# or
pnpm add @bugmail-js/react

Quick Start

Wrap your application with BugMailProvider:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BugMailProvider } from '@bugmail-js/react';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);

root.render(
  <React.StrictMode>
    <BugMailProvider
      apiKey="YOUR_API_KEY"
      projectId="YOUR_PROJECT_ID"
      endpoint={process.env.REACT_APP_BUGMAIL_ENDPOINT || '<your-bugmail-endpoint>'}
    >
      <App />
    </BugMailProvider>
  </React.StrictMode>
);

Usage

Error Boundary

Catch render errors in your component tree:

import { ErrorBoundary } from '@bugmail-js/react';

function MyComponent() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong!</div>}>
      <BuggyChild />
    </ErrorBoundary>
  );
}

Hooks

Manually capture errors from event handlers or async operations:

import { useBugMail } from '@bugmail-js/react';

function PaymentButton() {
  const bugmail = useBugMail();

  const handleClick = async () => {
    try {
      await processPayment();
    } catch (error) {
      bugmail.captureError(error);
    }
  };

  return <button onClick={handleClick}>Pay Now</button>;
}

Configuration

| Option | Type | Required | Description | |--------|------|----------|-------------| | apiKey | string | Yes | Your BugMail project API key | | projectId | string | Yes | Your BugMail project ID | | endpoint | string | No | API endpoint (e.g., <your-bugmail-endpoint>) | | environment | string | No | Environment name (default: production) |

License

MIT