@softnoesis/shakebug-js

Shakebug JS is a powerful bug reporting and feedback collection library for React and Next.js applications. It allows users to capture screenshots, record screens, and submit detailed bug reports with ease.

Features

• 📸 Screenshot Capture: Automatically capture the current screen state.
• 🎥 Screen Recording: Record user interactions to demonstrate bugs.
• ✍️ Annotation Tools: Draw, highlight, and add text to screenshots.
• 📱 Shake to Report: Detect device shaking to trigger the bug reporting flow.
• ⌨️ Keyboard Shortcuts: Global shortcuts (Cmd+Alt+K or Ctrl+Alt+K) for power users.
• 🎨 Customizable Theme: Match the SDK's look and feel to your application.
• 🛠️ Event Tracking: Log custom events and metadata for better debugging.

Installation

npm install @softnoesis/shakebug-js
# or
yarn add @softnoesis/shakebug-js

Peer Dependencies

Ensure you have the following peer dependencies installed in your project:

npm install react react-dom

Usage

1. Import CSS

Import the global styles in your main entry file (e.g., App.tsx or main.tsx):

import '@softnoesis/shakebug-js/dist/index.css';

2. Add the Shakebug Component

Place the Shakebug component at the root of your application:

import { Shakebug } from '@softnoesis/shakebug-js';

function App() {
  return (
    <div>
      <Shakebug 
        appKey="YOUR_APP_KEY" 
        bundleId="YOUR_BUNDLE_ID" 
        showFloatingButton={true}
      />
      {/* Your app content */}
    </div>
  );
}

Component Properties (ShakebugProps)

The <Shakebug /> component accepts the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | appKey | string | - | Required. Your Shakebug application key. | | bundleId | string | - | Required. Your application bundle ID/Package name. | | showFloatingButton | boolean | true | Whether to show the floating trigger button. | | ShakebugThemeColor | string | - | Primary color for the SDK (e.g., #ff0000). | | screenTitle | string | 'Shakebug' | Title displayed in the feedback modal. | | changeSDKScreenTitle | string[] | - | Custom titles for different steps in the modal. | | allowToReportBugByShakingMobile | boolean | true | Enable/Disable shake detection on mobile. | | allowToReportBugByScreenCapture | boolean | false | Enable/Disable report trigger by native screenshot. | | allowCrashReport | boolean | true | Automatically report unhandled errors and crashes. | | appVersion | string | '1.0.0' | Your application version. | | ShakebugLanguage | string | - | Force a specific language (e.g., 'en', 'es'). | | onSend | function | - | Callback triggered after a report is successfully sent. |

Example with full Props

<Shakebug 
  appKey="your-key"
  bundleId="your.bundle.id"
  ShakebugThemeColor="#4f46e5"
  screenTitle="Report an Issue"
  allowCrashReport={true}
  onSend={(data) => console.log('Report sent:', data)}
/>

Public Methods

You can import and use these methods anywhere in your application after the <Shakebug /> component is mounted.

setcustomUser(userData)

Identifies the user for all subsequent reports in the session.

import { setcustomUser } from '@softnoesis/shakebug-js';

setcustomUser({
  id: "user_123",
  name: "John Doe",
  email: "[email protected]",
  country: "USA"
});

addEventKey(name, value)

Logs a custom event that will be attached to the next bug report.

import { addEventKey } from '@softnoesis/shakebug-js';

addEventKey("User Action", "Click Checkout");

Support

For any issues or feature requests, visit shakebug.com or reach out to support.

License

ISC © Softnoesis