React

@larabug/react wraps @larabug/browser with a React-friendly API: an ErrorBoundary component and a handful of hooks. It works with React 16.8+.

Install

npm install @larabug/react

Initialise

Call LaraBug.init() once at the top of your app — usually in main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import * as LaraBug from '@larabug/react';
import { ErrorBoundary } from '@larabug/react';
import App from './App';

LaraBug.init({
  dsn: 'https://login_key:project_key@www.larabug.com/api/log',
  environment: import.meta.env.MODE,
});

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  <ErrorBoundary fallback={<div>Something went wrong.</div>}>
    <App />
  </ErrorBoundary>
);

Global errors (window.error, unhandledrejection) are captured as soon as init() returns. The ErrorBoundary is what catches React-specific render errors, which don't bubble up to window.error.

ErrorBoundary

ErrorBoundary is a standard React class component under the hood. It catches errors thrown during render, in lifecycle methods, and in the constructors of any descendant tree.

<ErrorBoundary
  fallback={({ error, reset }) => (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )}
  onError={(error, errorInfo) => {
    // Optional — runs alongside the LaraBug capture
    console.error('Render error:', error);
  }}
>
  <RiskyFeature />
</ErrorBoundary>

Key points:

• fallback can be a React node or a function that receives { error, reset }. The reset callback clears the error state so the boundary can re-render its children.
• onError runs after LaraBug has captured the error. LaraBug respects your existing error handling — it never replaces it.
• You can nest boundaries. Inner boundaries catch first; unhandled errors bubble up to outer boundaries. Put one at the root of your app and around risky features.

Hooks

useLaraBugUser

Sync the authenticated user with LaraBug's user context:

import { useLaraBugUser } from '@larabug/react';

function Layout() {
  const { user } = useAuth();
  useLaraBugUser(user);

  return <>{/* ... */}</>;
}

When user changes, the hook calls LaraBug.setUser(user). When the component unmounts, it calls LaraBug.setUser(null).

useLaraBugContext

Attach a named context object that stays in sync with a React value:

import { useLaraBugContext } from '@larabug/react';

function CheckoutPage() {
  const { cart } = useCart();
  useLaraBugContext('checkout', { total: cart.total, items: cart.items.length });

  return <>{/* ... */}</>;
}

The hook re-runs setContext whenever its value changes. It does not clear the context on unmount — that's intentional, so downstream errors still have context attached.

useLaraBugTag

The lightweight version of useLaraBugContext for simple string tags:

useLaraBugTag('experiment', 'new-checkout-v2');

What about hooks inside error boundaries?

ErrorBoundary is a class component because React error boundaries require componentDidCatch, which isn't available as a hook. You can still use hooks inside the fallback if you pass a function — the function is rendered inside the boundary's internal component tree.