@logcaffe/browser

Self-hosted Datadog/Sentry replacement browser SDK. Frontend monitoring, RUM Core Web Vitals, distributed tracing, error tracking, and breadcrumbs with data ownership.

npm install @logcaffe/browser

Quick start

import { LogCaffe } from '@logcaffe/browser';

LogCaffe.init({
  serverUrl: 'https://collector.your-logcaffe-host',
  apiKey: 'lc_<tenant>_<your-public-api-key>',
  environment: 'production',
  release: 'v2.4.1',

  captureErrors: true,         // window.onerror
  captureRejections: true,     // unhandledrejection
  captureConsole: false,       // console.error / warn → logs
  capturePerformance: true,
  captureNetwork: true,
  captureBreadcrumbs: true,

  enableTracing: true,
  enableRum: true,             // ← new in 0.4.0
});

That's it. Out of the box you now get:

• Every uncaught error and unhandled promise rejection captured with stack + breadcrumbs.
• Every fetch / XMLHttpRequest traced (with traceparent propagated to your backend).
• Page load span (TTFB, DOM loaded, resource counts).
• Click + navigation breadcrumbs leading up to each error.
• Real User Monitoring (RUM) — Core Web Vitals (LCP, INP, CLS, TTFB, FCP) per page.

What's new in 0.4.0

RUM Core Web Vitals

LogCaffe.init({
  // ...
  enableRum: true,
  rumSampleRate: 1.0,                      // 0..1
  rumIgnorePaths: [/^\/internal/],          // skip these pages
});

Each page view captures LCP, INP, CLS, TTFB, FCP via the web-vitals library. Sessions are anonymized via a hashed device id (no PII). Geo enrichment happens server-side from the request IP (requires the collector's MaxMind GeoLite2 path).

The dashboard's RUM page shows per-URL p75 of each vital, color-coded against Google's "good / needs improvement / poor" thresholds.

React error boundary

import { LogCaffeErrorBoundary } from '@logcaffe/browser';

<LogCaffeErrorBoundary fallback={<ErrorPage />}>
  <App />
</LogCaffeErrorBoundary>

User context

import { LogCaffe } from '@logcaffe/browser';

LogCaffe.setUser({ id: 'u-42', email: '[email protected]' });
LogCaffe.addBreadcrumb({ category: 'ui.action', message: 'opened settings modal' });

Full configuration reference

LogCaffe.init({
  serverUrl: string,                       // required
  apiKey: string,                          // required (tenant-scoped)
  environment?: string,                    // default 'production'

  // Feature toggles
  captureErrors?: boolean,                 // window.onerror (default true)
  captureRejections?: boolean,             // unhandledrejection (default true)
  captureConsole?: boolean,                // console.error/warn (default false)
  capturePerformance?: boolean,            // navigation timing (default true)
  captureNetwork?: boolean,                // failed fetch/xhr (default true)

  // Enrichment
  release?: string,                        // app version
  captureBreadcrumbs?: boolean,            // default true
  maxBreadcrumbs?: number,                 // default 20
  captureDom?: boolean,                    // capture clicked element info
  captureNavigation?: boolean,             // route changes (default true)
  defaultTags?: string[],

  // Batching
  flushInterval?: number,                  // ms (default 10000)
  maxBatchSize?: number,                   // default 50

  // Sanitization
  sanitizeHeaders?: string[],              // additional header keys to redact
  sanitizeBodyKeys?: string[],

  // Filtering
  ignoreErrors?: (string | RegExp)[],
  ignoreUrls?: (string | RegExp)[],
  beforeSend?: (error) => error | null,

  // Tracing (existing)
  enableTracing?: boolean,                 // default false
  traceFlushInterval?: number,             // ms (default 10000)
  traceSampleRate?: number,                // 0..1 (default 1.0)
  traceIgnoreUrls?: (string | RegExp)[],
  capturePageLoad?: boolean,               // default true
  tracePropagateToOrigins?: (string | RegExp)[],

  // RUM (new in 0.4.0)
  enableRum?: boolean,                     // default false
  rumSampleRate?: number,                  // 0..1, default 1.0
  rumIgnorePaths?: (string | RegExp)[],
});

Manual logging

LogCaffe.debug('cache miss', { key: 'user:42' });
LogCaffe.info('checkout opened');
LogCaffe.warn('flaky network');
LogCaffe.error('payment widget failed to load', { component: 'PaymentForm' });

Compatibility

• Modern evergreen browsers (Chromium, Firefox, Safari ≥ 14).
• React peer dep is optional — only needed if you import LogCaffeErrorBoundary.
• Compatible LogCaffe collector: >= 0.4.0.

Documentation

https://logcaffe.inhouse.electioncaffe.ai/docs/browser-sdk

License

MIT — see LICENSE.

Repository

https://github.com/logcaffe/LogCaffe