Package Exports
- @bb-test/web-sdk
- @bb-test/web-sdk/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@bb-test/web-sdk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
BetterBugs Web SDK
Simplify bug reporting within your web apps with the BetterBugs Web SDK.
The BetterBugs Web SDK allows you to include bug reporting capabilities in your application with minimal settings and effort.
Now, you can enhance your apps with user-friendly and easy-to-implement issue reporting capabilities, such as media capturing, log tracking, getting the two-minute Rewind session video, and real-time hooks to help you and your team report, diagnose, and fix issues effectively.
🔍 Breaking it down
Using the BetterBugs Web SDK, you can enhance your web apps with bug reporting features that allow you to capture useful data about the issues. Here’s more on it.
🚀 Key Features of the SDK
- Seamless integration — Quick installation and easy to use with a few lines of code.
- Configurable params — Tweak settings for the parameters, such as
metaData,recordType,enableAnnotation, and many others. - Use Methods — Control the SDK with programmatic methods, such as
show(),hide(),startRecording(), and many others. - Event hooks — For deeper integration, listen for specific lifecycle events with hooks, such as:
- after a screenshot is captured (
screenshot) - a bug is submitted (
bugSubmit) - a recording starts (
recordingStop) - and many others.
- after a screenshot is captured (
- Session Rewind (coming soon) – Automatically records the last 2 minutes of a session to capture all user interactions.
- Floating widget customization – Control the widget’s look and placement.
📦 Quick Installation
NPM install
npm install @bb-test/web-sdkYarn install
yarn add @bb-test/web-sdk🧩 BetterBugs Web SDK Initialization: Usage Example
import { Betterbugs } from '@bb-test/web-sdk';
const bb = new Betterbugs({
email: 'john@example.com',
apiKey: process.env.TEST_API_KEY || '',
disableScreenshot: true,
disableRecording: true,
mode: 'production',
});✅ Quick Overview of the Example Code
- Imports the Betterbugs SDK — Pulls in Betterbugs from the
@bb-test/web-sdkpackage. - Creates a new instance (
bb) — The configuration object sets options for:apiKey: Get value from environment variable.email: Email of the user who is reporting bug.mode: Production mode for customer support.disableScreenshot: Enables screenshot.disableRecording: Enables recording.
⚙️ Configurable Options
| Option | Type | Description |
|---|---|---|
apiKey |
string |
Project-specific API* (required) |
email |
string |
Email of the user who is reporting bug. Works in production mode only. (e.g., john@example.com) |
mode |
"development" | "production" |
Mode of operation (debugging or live use) |
enableRewind |
boolean |
Enable rewind session capturing (coming soon) |
disableScreenshot |
boolean |
Enable screenshot capturing |
disableRecording |
boolean |
Enable recording screen |
metaData |
array<object> |
Custom metadata (e.g., { userId: 123 }) |
recordType |
"recordVideo" | "domRecord" |
Recording type: media (recordVideo) or DOM (domRecord) |
enableAnnotation |
boolean |
Enable annotation tools |
showActionButton |
boolean |
Toggle visibility of floating action button |
position |
{ top?: string, left?: string, right?: string, bottom?: string } |
Widget position |
theme |
"dark" | "light" |
Dark or light theme |
primaryColor |
string |
Primary color(branding color) |
primaryTextColor |
string |
Primary text color for buttons |
actionButtonComponent |
React.ReactNode | string |
Component for action button (React component or html string accpted) |
bugSuccessComponent |
React.ReactNode | string |
Will be visible when bug is created successfully (React component or html string accpted) |
maxRecordingMinutes |
number |
Maximum recording length |
🧪 Programmatic Methods
| Method | Description |
|---|---|
setEmail() |
Update email of bug reporter |
changeTheme() |
Update theme |
changePrimaryColor() |
Update primary color |
changePrimaryTextColor() |
Update primary text color |
show() |
Show the floating widget |
hide() |
Hide the floating widget |
openWidget() |
Open the bug report widget |
closeWidget() |
Close the bug report widget |
updateMetadata() |
Update the attached metadata |
captureScreenshot() |
Trigger screenshot capture |
startRecording() |
Start session recording |
stopRecording() |
Stop the ongoing recording |
on() |
Register an event listener |
off() |
Unregister an event listener |
destroy() |
Destroy the BetterBugs instance |
🔄 Lifecycle Event Hooks
| Event | Trigger Description |
|---|---|
emailUpdate |
Triggered when email updated |
screenshot |
Triggered after the screenshot is captured |
recordingStart |
Triggered when the recording starts |
recordingStop |
Triggered when the recording stops |
bugSubmit |
Triggered after a bug is submitted |
metaDataUpdate |
Triggered when metadata is updated |
positionUpdate |
Triggered when widget position changes |
widgetOpen |
Triggered when the widget is opened |
widgetClose |
Triggered when the widget is closed |
showActionButton |
Triggered when the action button is shown |
hideActionButton |
Triggered when the action button is hidden |
sessionCreated |
Triggered when a new session is created |
🧱 Floating Widget Customization Options
- Positioning — Define widget position using
{ top, left, right, bottom } - UI Customization — Modify dark or light theme, primary color, primary text color, custom action button component and custom bug created successfully compenent
Note: Session Rewind feature is coming soon.