React errors, logs, and breadcrumbs

ErrorBoundary, the React 19 error handler, captureException, logger, breadcrumbs, and setUser on @newtalaria/react.

@newtalaria/reacterrorslogsbreadcrumbsidentity

Browser handlers (window.onerror, unhandledrejection) are active after Talaria.init. This package adds two React paths.

ErrorBoundary

text

import { ErrorBoundary } from '@newtalaria/react';

export function App() {
  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <button type="button" onClick={reset}>
          Try again
        </button>
      )}
    >
      <Checkout />
    </ErrorBoundary>
  );
}

componentDidCatch calls captureException with mechanism react and the component stack in extra. The error is marked handled. fallback may be a node or (error, reset) => node.

React 19 error handler

Pass reactErrorHandler() to createRoot / hydrateRoot. These errors are marked unhandled.

text

import { createRoot } from 'react-dom/client';
import { reactErrorHandler } from '@newtalaria/react';

createRoot(document.getElementById('root'), {
  onUncaughtError: reactErrorHandler(),
  onCaughtError: reactErrorHandler(),
  onRecoverableError: reactErrorHandler(),
});

The default export of @newtalaria/react also exposes reactErrorHandler on the Talaria object. The named import above is the one to call from createRoot.

Logs

logger() and the severity methods are re-exported from the browser SDK.

javascript

import { Talaria } from '@newtalaria/react';

const log = Talaria.logger({ tags: { feature: 'checkout' } });
await log.warn('Payment method missing');
await Talaria.captureException(error);

Breadcrumbs

Console, network, and navigation crumbs are recorded automatically. Add your own with Talaria.addBreadcrumb({ type, category, message, level }). The trail is attached to the next error.

Identity and context