featurely-error-tracker

Installation

npm install featurely-error-tracker

Features

• Automatic error tracking with global handlers
• Breadcrumb tracking — records last 50 user actions
• Session replay — rrweb recording of the last 60 seconds, linked to the captured error
• Device and browser information collection
• Network conditions tracking
• User context association
• Toast notifications
• Performance monitoring — page load, Web Vitals (LCP, FCP)
• Offline queue — store errors when offline, send when reconnected
• PII scrubbing — automatically remove sensitive data (emails, cards, SSNs)
• Framework integrations: React Error Boundary, Vue app.config.errorHandler, Angular ErrorHandler
• TypeScript support

Configuration options

Basic usage

import { ErrorTracker } from 'featurely-error-tracker';

const tracker = new ErrorTracker({
  apiKey: 'ft_live_your_api_key_here',
  environment: 'production',
  appVersion: '1.0.0',
  sampleRate: 0.1,
  beforeSend: (event) => {
    if (event.url?.includes('/healthcheck')) return null;
    return event;
  },
  privacy: {
    scrubPII: true,
    scrubQueryParams: ['token', 'apiKey', 'password'],
  },
});
tracker.install();
tracker.setUser(user.id, user.email);

Manual error reporting

try {
  await riskyOperation();
} catch (error) {
  await tracker.reportError(error, 'high', {
    userId: user.id,
    action: 'risky_operation'
  });
}

Toast notifications

Toast notifications can appear in the page when an error is captured. Configure the toast option:

const tracker = new ErrorTracker({
  apiKey: 'ft_live_your_api_key_here',
  toast: {
    enabled: true,
    position: 'bottom-right',
    duration: 5000,
    showOnAutoCapture: true,
  },
});

Available positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right

Toast styles: error (red), warning (orange), success (green), info (blue)

Environment support

Server-side error filtering

In addition to the SDK-side beforeSend hook and sampleRate, Featurely supports server-side filter rules that drop noisy errors before they are stored. Errors matching a filter rule are silently discarded at ingestion — they are never counted, never stored, and never trigger notifications or webhooks.

Configure rules in the dashboard under Errors → Settings. Each rule has:

Sixteen default rules are pre-loaded to suppress common noise such as browser extension errors, ResizeObserver loop warnings, Script error. (cross-origin), and network-related fetch failures. You can toggle any rule on or off and add custom rules for your specific application.

Session replay

When enableSessionReplay: true is set, the SDK uses rrweb to continuously record a rolling 60-second window of DOM mutations and user interactions. When an error is successfully reported to Featurely, the buffer is flushed immediately and linked directly to that specific error by its ID.

The recording appears in the Timeline → Session Replay tab of the error detail view in your dashboard.

import { ErrorTracker } from 'featurely-error-tracker';

const tracker = new ErrorTracker({
  apiKey: 'ft_live_your_api_key_here',
  projectId: 'your-project-id',   // required for session replay
  environment: 'production',
  enableSessionReplay: true,
});

tracker.install();

Privacy controls — wrap any element in the ft-no-record CSS class to prevent it from being captured. Password inputs are masked automatically.

<div class="ft-no-record">
  <!-- sensitive content — never recorded -->
</div>

Performance — rrweb is loaded lazily via a dynamic import, so it does not increase your initial bundle size. Mousemove events are sampled at 50 ms intervals and scroll events at 150 ms to reduce recording volume.

TypeScript exports

ErrorTrackerConfig, ToastConfig, PerformanceConfig, OfflineConfig, PrivacyConfig, ToastOptions, ErrorPayload, ToastPosition, ToastStyle