Widget and SDK

Feature toggles and handling sensitive data

Updated 90 views

Every capture feature can be turned off independently. All are enabled by default except allowTaskAttach.

TypeScript
Bugdump.init({
  apiKey: 'your-api-key',
  features: {
    screenshot: true,
    screenshotMethod: 'screen-capture',
    screenRecording: true,
    screenRecordingMethod: 'screen-capture',
    sessionReplay: true,
    attachments: true,
    allowTaskAttach: false,
  },
});

Feature

Default

Description

screenshot

true

Screenshot capture button

screenshotMethod

'screen-capture'

How screenshots are taken

screenRecording

true

Screen recording button

screenRecordingMethod

'screen-capture'

How recordings are made

sessionReplay

true

Background session replay collection

attachments

true

File attachment button

allowTaskAttach

false

Let reporters attach to an existing task

What is redacted automatically

Before you configure anything, several protections are already on.

Password fields are never captured. Any <input type="password"> has its value redacted from the actions log.

Sensitive autocomplete fields are redacted. Any element whose autocomplete attribute is one of the following has its value withheld:

current-password · new-password · cc-number · cc-csc · cc-exp · cc-exp-month · cc-exp-year · one-time-code

If your payment and login forms use standard autocomplete attributes — which they should for browser autofill anyway — card numbers, CVCs, expiry dates, and one-time codes are already protected without any BugDump configuration.

All inputs are masked in session replay. The replay recorder runs with maskAllInputs enabled, so text typed into form fields is masked in the replay regardless of field type.

Request and response bodies are not collected unless you set captureNetworkBodies: true.

Marking your own elements as sensitive

Two markers exclude specific parts of your page. Both work on the element and everything inside it.

data-bugdump-mask — an attribute you add to any element:

HTML
<div data-bugdump-mask>
  <p>Customer: Ada Lovelace</p>
  <p>Balance: $12,480.00</p>
</div>

.bugdump-block — a class, useful when you would rather target things from a stylesheet or a component's existing class list:

HTML
<section class="account-summary bugdump-block">
  ...
</section>

Values inside a marked element are withheld from the actions log, and bugdump-block regions are blocked from session replay entirely.

Use these on account balances, customer records, message contents, medical or legal detail — anything that would be inappropriate to store even though it is not a password. It is far more precise than switching replay off for a whole route, because you keep the diagnostic value of the rest of the page.

Choosing a capture method

Both screenshots and recordings offer two methods, and the trade-off is the same for each.

screen-capture (default) uses the browser's getDisplayMedia API. It is pixel-perfect — it captures exactly what is on screen, including canvas, video, cross-origin iframes, and native elements. The cost is a browser permission dialog the user must accept. If they deny it, the SDK falls back to the DOM method automatically rather than failing.

dom renders the page from the DOM — html2canvas for screenshots, rrweb for recordings. No permission prompt, so it feels seamless. The cost is fidelity: canvas content, cross-origin iframes, and some CSS features may not render faithfully.

One consequence worth knowing: data-bugdump-mask and .bugdump-block work at the DOM level. A screen-capture screenshot photographs the actual screen, so a masked region will appear in it. The user's blur tool is the control for that case — and it runs in the browser, so blurred pixels are never uploaded.

Pick screen-capture when accuracy matters most and dom when you want zero friction:

TypeScript
Bugdump.init({
  apiKey: 'your-api-key',
  features: {
    screenshotMethod: 'dom',
    screenRecordingMethod: 'dom',
  },
});

Letting reporters attach to a task

With allowTaskAttach: true, the widget shows an "Attach to task" toggle and a task ID field. A reporter who knows the public ID of an existing task can file their report against it directly.

This is well suited to internal QA and beta groups where reporters know your task IDs. For a general public audience, leave it off — most users have no task ID to enter.

Turning capture off entirely

Network bodies. captureNetworkBodies is false by default because bodies are the most likely place for tokens, personal data, and payment details to appear. Turn it on only when you need it — and pair it with a network filter.

Session replay. If a page shows data that should not be stored at all, disable it:

TypeScript
Bugdump.init({
  apiKey: 'your-api-key',
  features: {
    sessionReplay: false,
  },
});

Reporter identity is optional. Name and email sit behind a collapsed "Reporter info" section. Reports work fine without them.

Minimal configuration

To collect only a description plus console and network logs, with no media at all:

TypeScript
Bugdump.init({
  apiKey: 'your-api-key',
  features: {
    screenshot: false,
    screenRecording: false,
    sessionReplay: false,
    attachments: false,
  },
});

Console logs, network requests, and page metadata are still collected — those are what make a report actionable.

Error capture

The widget also sends uncaught errors and unhandled promise rejections to the project's Errors page, with the last 100 console logs, 50 network requests and 200 user actions from the minute before. Error events never include a screenshot or session replay.

Turning it off. Set captureErrors: false, or data-capture-errors="false" on the script tag, to stop it on one site or build; errors you send with captureException still go through. To stop it for the whole project, an owner or admin turns off Capture JavaScript errors automatically in the project's settings, and the project then refuses every error event, captureException included.

Sending fewer. sampleRate, from 0 to 1, sets the share of automatically captured errors that are sent. ignoreErrors drops errors whose Type: message matches one of its strings or regular expressions.

Redacting. beforeSend(event) runs before each error event is sent, captureException included. Change what you need and return the event, or return null to drop it.

ignoreErrors and beforeSend have no script-tag attribute: load the script without data-api-key and call bugdump('init', { ... }) yourself. See Capturing JavaScript errors automatically for an example.

Layering the controls

For a page handling genuinely sensitive data, the controls compose:

  1. Mark the sensitive regions with data-bugdump-mask or .bugdump-block

  2. Filter network capture by URL to exclude auth and billing endpoints

  3. Leave captureNetworkBodies off

  4. Disable session replay if the page should not be reconstructable at all

Each layer is independent, so you can keep as much diagnostic value as your risk tolerance allows rather than turning everything off.

See also

  • Filtering console and network capture

  • Widget configuration reference

Was this article helpful?