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), or a recording starts (recordingStop), and many others.
• Session Rewind (coming soon) – Automatically records the last 2 minutes of a session to capture all user interactions. It's perfect for auto-capturing issues that just happened and helps trace actions that lead to the bug.
• Floating widget customization – Control the widget's look and placement.

Quick installation

To install the SDK, use the following command:

NPM install

npm install @bb-test/web-sdk

Yarn install

yarn add @bb-test/web-sdk

BetterBugs Web SDK initialization: Usage example

After installation, here's how to initialize the SDK instance in your web app:

TypeScript

import { Betterbugs } from '@bb-test/web-sdk';

new Betterbugs({
  apiKey: process.env.TEST_API_KEY || '',
  mode: 'production',
});

Quick overview of the example code

Here's what it does:

1 - Imports the Betterbugs SDK — Pulls in Betterbugs from the @bb-test/web-sdk package.

2 - Creates a new instance (bb) — The configuration object sets options for:

• apiKey: Get value from environment variable (process.env.PROJECT_API_KEY).
• metaData: Custom user information (userID: 124) added to the object.
• captureRewindOnScreenshot: Allows rewind session event capturing when a screenshot is taken.
• recordType: Uses recordVideo type, for recording browser media.
• position: Positions the floating widget (top: 10px, left: 20px).
• mode: Running in development environment for additional debugging features.
• enableRewind: Enable rewind session event capturing
• enableAnnotation: Add annotations capability.
• showActionButton: Displays an interactive button for user actions.

Configurable Options: Customize SDK behavior

You can customize the SDK behavior with the following parameters:

Programmatic Methods: Control SDK behavior

Available methods for controlling the BetterBugs SDK behavior;

Lifecycle Event Hooks: For deeper integrations

Available hooks to listen to the lifecycle events:

Floating widget customization options

The floating widget can be customized in various ways:

• Positioning — Define widget position using { top, left, right, bottom }.
• UI Customization — Modify button styles, background, and primary colors.