Beacon SDK

import { Beacon } from '@kodo-status/beacon';

const beacon = new Beacon({
  key: 'bpk_your_public_key',  // Get from Dashboard > Settings > Beacon Keys
  service: 'my-frontend',
  environment: 'production'
});

// Errors are captured automatically!

const beacon = new Beacon({
  // Required
  key: 'bpk_your_public_key',

  // Recommended
  service: 'my-app',
  environment: 'production',  // 'development', 'staging', 'production'

  // Optional
  version: '1.2.3',
  debug: false,  // Enable console logging
  maxBreadcrumbs: 50,
  sampleRate: 1.0,  // 0.0 to 1.0

  // User context
  user: {
    id: 'user_123',
    email: '[email protected]',
    username: 'johndoe'
  }
});

try {
  doSomethingRisky();
} catch (error) {
  beacon.captureError(error, {
    tags: { feature: 'checkout' },
    extra: { cartItems: cart.items.length }
  });
}

beacon.log('info', 'User clicked checkout', {
  cartTotal: 99.99,
  itemCount: 3
});

beacon.log('warn', 'Payment retry', { attempt: 2 });
beacon.log('error', 'Payment failed', { reason: 'declined' });

// Automatic breadcrumbs captured:
// - Navigation events
// - Click events
// - Console logs
// - Network requests

// Add custom breadcrumbs
beacon.addBreadcrumb({
  category: 'ui',
  message: 'User opened settings modal',
  level: 'info'
});

// On login
beacon.setUser({
  id: 'user_123',
  email: '[email protected]',
  username: 'johndoe'
});

// On logout
beacon.clearUser();

// Automatic Web Vitals tracking
// - Largest Contentful Paint (LCP)
// - First Input Delay (FID)
// - Cumulative Layout Shift (CLS)

// Custom timing
const start = performance.now();
await fetchData();
beacon.timing('api_call', performance.now() - start);

import { BeaconProvider, useBeacon } from '@kodo-status/beacon/react';

function App() {
  return (
    <BeaconProvider
      config={{
        key: 'bpk_your_key',
        service: 'my-react-app'
      }}
    >
      <YourApp />
    </BeaconProvider>
  );
}

// Error boundary included automatically
// Or use the hook:
function MyComponent() {
  const beacon = useBeacon();
  beacon.log('info', 'Component rendered');
}

const beacon = new Beacon({
  key: 'bpk_...',
  beforeSend: (event) => {
    // Ignore browser extension errors
    if (event.message?.includes('chrome-extension://')) {
      return null;
    }
    // Ignore specific errors
    if (event.message === 'ResizeObserver loop limit exceeded') {
      return null;
    }
    return event;
  }
});