@fe-blackbox/plugin-screenshot

Screenshot capture plugin for the FE-Blackbox SDK.

Installation

npm install @fe-blackbox/plugin-screenshot

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

Quick Start

import FEBlackbox from '@fe-blackbox/sdk';
import { screenshotPlugin } from '@fe-blackbox/plugin-screenshot';

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

How It Works

When an incident is about to be reported, the plugin uses html2canvas to render the current page (or a specific element) to a canvas, converts it to a base64-encoded data URL, and attaches it to the incident payload as a screenshot attachment.

The screenshot is captured during the beforeReport hook, so it reflects the page state at the time of the incident.

Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | selector | string | undefined | CSS selector for the element to capture. Defaults to document.documentElement | | mimeType | 'image/png' \| 'image/jpeg' | 'image/png' | Output image format | | quality | number | 0.82 | JPEG quality (0–1). Only applies when mimeType is 'image/jpeg' | | maxWidth | number | undefined | Maximum capture width in pixels. The image is scaled down if the target element exceeds this width |

Example with Options

screenshotPlugin({
  selector: '#app',
  mimeType: 'image/jpeg',
  quality: 0.7,
  maxWidth: 1280
})

Notes

• The plugin is a no-op in non-browser environments (e.g. SSR).
• Large screenshots increase the payload size. Use maxWidth and JPEG format to reduce size.
• html2canvas renders an approximation of the page — some CSS features may not be captured perfectly.

License

MIT