Bugs reach production. Fixwire finds them first: errors, traces, logs and AI agent runs in one place, an AI debugger on every plan, and your data kept in the region you choose.

Fixwire SDK for React

Welcome to @fixwire/react, the official React SDK for Fixwire: error boundaries and React 19's root error handlers for @fixwire/browser, so render errors arrive with their component stack. It is part of the Fixwire SDK for JavaScript, whose README has the full guide.

📦 Getting started

Prerequisites

• A Fixwire account and project: sign up at fixwire.io.
• React 18 or 19 (CI tests both); the root error handlers need React 19.

Installation

npm install @fixwire/browser @fixwire/react
pnpm add @fixwire/browser @fixwire/react
yarn add @fixwire/browser @fixwire/react

Basic configuration

import { createRoot } from "react-dom/client";
import * as Fixwire from "@fixwire/browser";
import { ErrorBoundary, reactErrorHandler } from "@fixwire/react";

Fixwire.init({
  dsn: "https://<publishable key>@ingest.eu.fixwire.io",
  release: "[email protected]",
  environment: "production",
  tracesSampleRate: 0.2, // record 20% of traces
  integrations: [Fixwire.browserTracingIntegration()],
  // redact: false, // turn off masking of secrets and personal data
});

createRoot(document.getElementById("root"), {
  onUncaughtError: reactErrorHandler(),
  onCaughtError: reactErrorHandler({ handled: true }),
}).render(
  <ErrorBoundary fallback={({ resetError }) => <button onClick={resetError}>Try again</button>}>
    <App />
  </ErrorBoundary>,
);

The DSN is your project's publishable key and the ingest host, https://<publishable key>@<host>; the key is safe in a bundle. Without a DSN, the SDK does nothing. init() never throws: a broken DSN or option is said in a warning on the console and the SDK stays off.

Quick usage example

import * as Fixwire from "@fixwire/browser";
import { withErrorBoundary } from "@fixwire/react";

Fixwire.captureMessage("Hello Fixwire!"); // an info-level message in your project

function Cart({ items }) {
  return <p>{items.length} items</p>; // a render error is reported with the component stack
}

export default withErrorBoundary(Cart, { fallback: <p>Something went wrong.</p> });

✨ Why Fixwire

• Nothing is sent twice. Errors a Fixwire boundary caught are left to it by the root handlers.
• Secrets stay in the browser. Secrets and personal data are masked before sending, with the same rules as the Fixwire server.
• It never gets in your app's way. Reporting never throws, and the browser SDK stays small (about 16 KB gzipped for errors).
• Your data stays where you want it. Fixwire keeps it in the region you choose for your project: the EU today, more regions soon.

🧩 Integrations

| Integration | What it does | How to use | |---|---|---| | ErrorBoundary | Reports what it catches with the component stack and renders fallback (an element, or a function of the error, its component stack, the event's id and resetError) | <ErrorBoundary fallback={…}> | | withErrorBoundary | Wraps a component in an ErrorBoundary | withErrorBoundary(Component, props) | | reactErrorHandler | Reports the errors React passes to the root (React 19); errors a Fixwire boundary caught are left to it | onUncaughtError: reactErrorHandler(), onCaughtError and onRecoverableError: reactErrorHandler({ handled: true }) |

⚙️ Configuration

ErrorBoundary takes fallback, beforeCapture(scope, error, componentStack) to add tags, context or a level to the error's event, onError(error, componentStack, eventId) and onReset(error). reactErrorHandler takes handled (default false) and callback(error, errorInfo, eventId), e.g. to keep logging to the console. The SDK's options are listed in the repository README.

🧪 Examples

• browser-vite: the browser SDK in a Vite app, with traces, the offline queue and source maps.

📚 Documentation

The full guide lives in the repository README and the examples.

• Configuration
• Examples
• Changelog
• Security policy
• Contributing guide

🚧 Coming from another error tracker?

ErrorBoundary, withErrorBoundary and reactErrorHandler work the way most error-tracking SDKs' React components do, with fallback, beforeCapture and onError. Moving over is mostly a change of package and DSN.

🙌 Want to contribute?

We'd love your help, whether it's a bug report, a fix or a new integration. Start with the contributing guide, then pick from the open issues or the good first issues.

🛟 Need help?

• Questions: ask on Discord or Slack.
• Bugs: open a GitHub issue.
• Found a security issue? Please don't open an issue; follow the security policy.

🔗 Resources

• Website
• Pricing
• Discord
• Slack
• X
• Changelog
• Examples
• Security policy

📃 License

The SDK is open source under the MIT license; see LICENSE. Parts are derived from other MIT-licensed SDKs; see NOTICE.

😘 Contributors

Thanks to everyone who helps make Fixwire better!