React SDK

The browser tag, plus an error boundary for render crashes.React swallows render errors and window.onerror never fires for them — the boundary is how you see the blank white screen your users see.

Install

terminal — bash
npm install @vigil/react

Initialize

App.tsx — tsx
import { VigilErrorBoundary } from '@vigil/react';
export default function App() {
  return (
    <VigilErrorBoundary>
      <YourApp />
    </VigilErrorBoundary>
  );
}

What it captures automatically

These arrive with zero extra code — the unhandled failures that would otherwise crash or vanish.

Everything the browser tag catches (keep the <script> tag too).
Errors thrown during React render, via the ErrorBoundary — the white-screen crashes.

When to capture manually

Event handlers and effects do not go through render, so the boundary will not catch them. For an error you catch inside a handler, report it with window.Vigil.captureError.

a component — tsx
async function onSubmit() {
  try {
    await checkout();
  } catch (err) {
    window.Vigil?.captureError(err, { tags: { area: 'checkout' } });
    setError('Payment failed, please retry');
  }
}

What you get

Keep the browser <script> tag as well — it catches everything outside React render.
The boundary reports the crash, then shows your fallback instead of a white page.
window.Vigil.captureError(error, { tags? }) — report a handled error from a handler or effect.