@fe-blackbox/plugin-replay

Session replay plugin for the FE-Blackbox SDK.

Alpha — This plugin depends on [email protected]. APIs and recording behavior may change.

Installation

npm install @fe-blackbox/plugin-replay

This plugin depends on rrweb which is included as a direct dependency.

Quick Start

import FEBlackbox from '@fe-blackbox/sdk';
import { replayPlugin } from '@fe-blackbox/plugin-replay';

FEBlackbox.init({
  dsn: 'http://localhost:3001',
  projectId: 'my-app',
  env: 'production',
  plugins: [
    replayPlugin()
  ]
});

How It Works

The plugin starts recording user interactions via rrweb as soon as the SDK initializes. Events are kept in a rolling buffer constrained by both a time window and a maximum event count. When an incident is reported, the buffered events are serialized to JSON, base64-encoded, and attached to the incident payload as a replay attachment.

This approach ensures only a relevant slice of user activity (leading up to the incident) is captured, keeping payload sizes manageable.

Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | windowMs | number | 30000 | Rolling time window in milliseconds. Events older than this are discarded | | maxEvents | number | 500 | Maximum number of events to keep in the buffer | | maskAllInputs | boolean | true | Mask all input field values for privacy |

Example with Options

replayPlugin({
  windowMs: 60_000,   // keep last 60 seconds
  maxEvents: 1000,
  maskAllInputs: true
})

Privacy

Input masking is enabled by default (maskAllInputs: true). The replay data is attached with captureReplay: true in the privacy flags, making it easy to filter or redact on the collector side.

Notes

• The plugin is a no-op in non-browser environments (e.g. SSR).
• rrweb uses a MutationObserver-based approach and has minimal performance overhead in most scenarios.
• The replay buffer is cleared when the plugin is destroyed.

License

MIT