React SDK · AllStak

AllStak React SDK for error boundaries, global browser errors, logs, HTTP telemetry, Web Vitals, spans, replay metadata, and source maps.

Install

npm install @allstak/react

Setup

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>
  );
}

Manual capture

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>;
}

React error handler

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 />);

Vite source maps

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { allstakVitePlugin } from '@allstak/react/vite';

export default defineConfig({
  build: { sourcemap: true },
  plugins: [
    react(),
    allstakVitePlugin({
      release: process.env.ALLSTAK_RELEASE,
      uploadToken: process.env.ALLSTAK_UPLOAD_TOKEN,
    }),
  ],
});

Configuration

Prop	Description
`apiKey`	Project API key.
`environment`	Deployment environment.
`release`	App version or commit SHA.
`service`	Logical frontend service name.
`user`	Initial user context.
`tags`	Tags added to every event.
`tracesSampleRate`	Span sample rate from `0` to `1`.
`enableDistributedTracing`	Default `true`. Auto-injects the W3C `traceparent` header and emits an `http.client` span per outbound request, with no per-call code. Privacy-safe: never captures bodies/headers. Set `false` to opt out.
`enableHttpTracking`	Default `false`. Opt into request/response body + header capture (configured via `httpTracking`) on top of distributed tracing.
`tracePropagationTargets`	URLs that should receive the trace headers. Defaults to all non-AllStak HTTP calls.
`enableWebVitals` / `autoWebVitals`	Default `true`. Captures CLS, LCP, INP, FCP, and TTFB. Ships by default — no `tracesSampleRate` / `enablePerformance` required.
`enablePerformance`	Default behavior: pageload span ships by default (`false` opts out); also gates the long-task / sampled-stack profilers (on when `true` or a numeric `tracesSampleRate` is set).
`autoCaptureBrowserErrors`	Captures global browser errors.
`autoBreadcrumbsFetch`	Adds fetch breadcrumbs.
`captureConsole`	Controls console capture by level.
`beforeSend`	Optional hook to modify or drop error events.

Privacy

The SDK redacts common sensitive headers, query params, and body fields. Use beforeSend and HTTP redaction options for app-specific rules.

Troubleshooting

No events: confirm the API key is exposed to the browser build and not empty.
Source maps missing: use the same release in the SDK and upload plugin.
Browser requests blocked: allow https://api.allstak.sa in your content security policy.

Contributing and Support

Report bugs with the GitHub bug report template: https://github.com/AllStak/allstak-react/issues/new/choose
Open pull requests using the checklist in CONTRIBUTING.md.
Report security vulnerabilities privately through SECURITY.md.

License

MIT