@errpulse/react

Frontend error monitoring SDK for React. Part of ErrPulse — the error monitoring tool that runs with one command.

Installation

npm install @errpulse/react

Quick Start

import { ErrPulseProvider } from "@errpulse/react";

function App() {
  return (
    <ErrPulseProvider endpoint="http://localhost:3800" projectId="my-web-app">
      <YourApp />
    </ErrPulseProvider>
  );
}

That's it. Errors, failed requests, and React crashes are captured automatically.

Manual Capture

import { useErrPulse } from "@errpulse/react";

function CheckoutButton() {
  const { captureError, captureMessage } = useErrPulse();

  const handleClick = async () => {
    try {
      await processPayment();
      captureMessage("Payment successful", "info");
    } catch (err) {
      captureError(err, { step: "payment" });
    }
  };

  return <button onClick={handleClick}>Checkout</button>;
}

What Gets Captured

| Error Type | How | | ---------------------------- | ----------------------------------------- | | JavaScript runtime errors | window.onerror | | Unhandled promise rejections | window.onunhandledrejection | | React component crashes | Error Boundary | | Failed fetch/XHR requests | fetch() + XMLHttpRequest interceptors | | console.error calls | Monkey-patch | | Resource failures (img, css) | Capture-phase error listener | | All HTTP requests | Fetch interceptor |

Provider Props

| Prop | Type | Default | Description | | ----------------------- | ----------- | ------------ | ------------------------------------------- | | endpoint | string | required | ErrPulse server URL | | projectId | string | undefined | Project identifier for multi-project setups | | captureConsoleErrors | boolean | true | Capture console.error calls | | captureFetch | boolean | true | Intercept and track fetch requests | | captureXHR | boolean | true | Intercept and track XMLHttpRequest calls | | captureResourceErrors | boolean | true | Capture failed img/script/css loads | | errorBoundaryFallback | ReactNode | undefined | Fallback UI for React crashes |

Error Correlation

The SDK automatically injects an X-ErrPulse-Correlation-ID header into every fetch request. When paired with @errpulse/node on the backend, the dashboard shows the full chain: user action -> frontend request -> backend error.

Documentation

• Full SDK Docs
• GitHub Repository

License

MIT