Installation

Gradle Android

Add this line to your build.gradle file:

implementation 'com.softnoesis.shakebug:ShakeBug:1.2.43'

You may also need to add the following to your project/build.gradle file:

buildscript {
    repositories {
        mavenCentral()
        maven { url 'https://jitpack.io' }
   }
}

Then, update the following sdkVersion to your app's `build.gradle` file:

android {
    compileSdk 33
        defaultConfig {
             ...
             targetSdk 33
             ...
        }
        ...
}

Code

1. In your Launching activity add this line to your onCreate method. This initializes Shake Bug with the default invocation event, Shake.

Java

ShakeBug.sharedInstance().initiateWithKey(this, "<Your Key>");

Kotlin

ShakeBug.sharedInstance().initiateWithKey(this,"<Your Key>");

Optional Settings

1. If you want add event to any screen or activity use following methods.

Java

ShakeBug.sharedInstance().addEventKey(this,"<Key>","<Key Value>");//pass any key or value

Kotlin

ShakeBug.sharedInstance().addEventKey(this,"<Key>","<Key Value>") // pass any key or value

2. Add the following for enabling/disabling first time tutorial screen.

Java

ShakeBug.sharedInstance().showTutorialScreenFirstTime(true); // Default value True

Kotlin

ShakeBug.sharedInstance().showTutorialScreenFirstTime(true) // Default value True

Want to know more

CocoaPods IOS

To integrate ShakeBug into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'ShakeBug'

Then, run the following command:

$ pod install

Code

1. Import the ShakeBug framework header into your app delegate.

Swift

import ShakeBug

Objective-C

#import <ShakeBug/ShakeBug.h>

Note: If you are working React Native exported project then you also need to mention this line too

#import <ShakeBug/ShakeBug-Swift.h>

2. Add the following to your app delegate's application:didFinishLaunchingWithOptions: method.

Swift

ShakeBugSDK.sharedInstance().initiate(withKey: "Your Key")

Objective-C

[[ShakebugSDK sharedInstance] initiateWithKey: "Your Key"];

3. Add the following to your Info.plist to request permission to access the Photo Library.

<dict>
<key>NSPhotoLibraryUsageDescription</key>
<string>Require access for reporting bugs.</string>
</dict>

Be sure to replace with your application key which given by ShakeBug website.

Note: NSPhotoLibraryUsageDescription must be added in info.plist.

Want to know more

npm

Navigate to your React Native project directory and install shakebug-react-native

npm install shakebug-react-native

Or if you prefer to use Yarn instead of npm:

yarn add shakebug-react-native

Want to know more

Native

Native-IOS

For iOS project, developer must need to install Shakebug in xCode project using pod.

To install Shakebug SDK in xCode project. Please follow above "For iOS" guide.

Native-Android

Add this line to your build.gradle file.

implementation ("com.softnoesis.shakebug:ShakeBug:1.2.43 ")

Open package having MainActivity.java file and add following 2 lines in "onCreate" method.

ShakeBug.sharedInstance().initiateWithFlutterKey(this, " Your-API-Key");
initializeShakeDetection();

Below the "onCreate" method, write all the following methods.

//Manages the registration and unregistration of the sensor listener.
@Override
protected void onResume() {
    super.onResume();
    if (mSensorManager != null && mSensorListener != null) {
        Sensor accelerometer = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
        if (accelerometer != null) {
            mSensorManager.registerListener(mSensorListener, accelerometer, SensorManager.SENSOR_DELAY_UI);
        }
    }
}

@Override
protected void onPause() {
    super.onPause();
    if (mSensorManager != null && mSensorListener != null) {
        mSensorManager.unregisterListener(mSensorListener);
    }
}

// Sets up the shake event listener.
private void initializeShakeDetection() {
    mSensorManager = (SensorManager) this.getSystemService(Context.SENSOR_SERVICE);
    mSensorListener = new ShakeBugShakeEventListener();
    mSensorListener.setOnShakeListener(this::captureScreenshot);
}

//Captures a screenshot of the Flutter view using PixelCopy.
private void captureScreenshot() {
    FrameLayout content = findViewById(android.R.id.content);
    FlutterView flutterView = (FlutterView) content.getChildAt(0);

    if (flutterView == null) {
        Log.e("ShakeBug", "FlutterView not found");
        return;
    }

    SurfaceView surfaceView = (SurfaceView) flutterView.getChildAt(0);
    surfaceView.post(() -> {
        Bitmap screenshot = Bitmap.createBitmap(surfaceView.getWidth(), surfaceView.getHeight(),
Bitmap.Config.ARGB_8888);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            PixelCopy.request(surfaceView, screenshot, result -> {
                if (result == PixelCopy.SUCCESS) {
                    ShakeBug.sharedInstance().flutterScreenshot(screenshot, this);
            } else {
                    Log.e("ShakeBug", "Screenshot failed");
            }
            }, new Handler());
        } else {
            Log.e("ShakeBug", "PixelCopy requires Android Nougat or higher.");
        }
    });
}

Want to know more

Website

Copy following code after the </body> section of your HTML.

Code

<script type="text/javascript" src="https://www.shakebug.com/assets/js/shakebug-min-1.0.js" id="apikey" isReportingIconVisible="false" isAllowshake="false" apikey="replace your key">
</script>

Use cases:

1. Make sure this script must be load in each and every page of your website.

2. Here value of apikey must be from Shakebug after login panel.

3. isReportingIconVisible = true means it will show bug reporting icon in left-bottom corner of your website.
False means it won’t show icon there.

4. To enable bug reporting using the shake gesture on an iOS mobile device, ensure that 'isAllowShake' is set to true in the above script.
False means it won’t allow shake gesture in ios mobile device.

5. Shortcut key for bug reporting in Desktop website:
For Windows and Ubuntu OS:

Control + Alt + k

For Mac OS:

Command + Option + k

To add an events:

Prior to add event to any webpage, you must need to add following script below the above script.

<script> addShakebugEvent("key","value"); </script>

Compatible Browsers:

Browser	Desktop	iOS	Android
Google Chrome
Mozilla Firefox
Microsoft Edge
Safari

Google Chrome Extension

You can seamlessly integrate Shakebug into your web project using our Google Chrome Extension:

First, ensure that the URL of your website is added to your Shakebug account. Log in to your Shakebug account and navigate to the project page to add your website URL.

Next, install the Shakebug Chrome Extension from the Chrome Web Store.

After installation, click on the Shakebug Extension icon in your browser's toolbar. That new icon/tool will allow you to report bugs directly from your Chrome browser.