React with AllStak

Installation

Install the SDK from npm.

npm install @allstak/react

Configuration

Wrap your app with AllStakProvider and pass your project API key.

import { AllStakProvider } from '@allstak/react';

export function App() {
  return (
    <AllStakProvider
      apiKey={import.meta.env.VITE_ALLSTAK_API_KEY}
      environment={import.meta.env.MODE}
      release={import.meta.env.VITE_ALLSTAK_RELEASE}
      service="web"
    >
      <AppRoot />
    </AllStakProvider>
  );
}

Basic example

Capture errors manually with the AllStak object or the useAllStak hook.

import { AllStak, useAllStak } from '@allstak/react';

AllStak.captureMessage('cart opened', 'info');
AllStak.captureException(new Error('checkout failed'));
AllStak.setUser({ id: 'user_123', email: '[email protected]' });

function CheckoutButton() {
  const { captureException } = useAllStak();
  return <button onClick={() => captureException(new Error('failed'))}>Pay</button>;
}

Capturing errors

Wire AllStak's React error handler into createRoot to catch render errors (the SDK also exports AllStakErrorBoundary).

import { createRoot } from 'react-dom/client';
import * as AllStak from '@allstak/react';

createRoot(document.getElementById('root')!, {
  onUncaughtError: AllStak.reactErrorHandler(),
  onCaughtError: AllStak.reactErrorHandler(),
  onRecoverableError: AllStak.reactErrorHandler(),
}).render(<App />);

Tracking requests

Distributed tracing is on by default (enableDistributedTracing): the SDK injects the W3C traceparent header and emits an http.client span per outbound request, with no per-call code and no body capture. Set enableHttpTracking to opt into request/response body capture.

Best practices

• Keep the API key in an environment variable (e.g. VITE_ALLSTAK_API_KEY), not in source.
• Set release and service on the provider so errors group per deploy.
• tracesSampleRate (0–1) controls span sampling; enableHttpTracking is opt-in for body capture.