@softnoesis/shakebug-js

@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: "[e-mail]",
  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