React Native SDK

The Snapbug React Native SDK provides JavaScript bindings to the native Snapbug SDK, enabling network interception, analytics monitoring, crash reporting, and live logs from your React Native app.

Requirements

• React Native >= 0.73.0
• React >= 18.0.0
• Android minSdk 23
• iOS >= 15.0 (Apple-silicon simulators or physical devices)

Installation

npm install snapbug-react-native

For iOS, install the native pods — the SDK arrives as the published Snapbug pod from CocoaPods trunk:

cd ios && pod install

Release builds on iOS

On Android the release twin is wired in automatically. CocoaPods has no equivalent mechanism, so add two lines to your app's ios/Podfile:

# inside your app target
pod 'Snapbug',       '~> 0.1.1', :configurations => ['Debug']
pod 'Snapbug-no-op', '~> 0.1.1', :configurations => ['Release']

Snapbug-no-op exposes the same API with every call inert. The native module compiles against it unchanged, and your App Store build carries neither the inspector nor the overlay — Snapbug.framework drops from 31 MB to 6.7 MB, while Debug keeps the live SDK. See iOS SDK → Release builds.

Quick Start

No native code required. Snapbug.start() from JS boots the native SDK through the module — nothing goes in MainActivity or AppDelegate.

import { Snapbug, patchFetch } from 'snapbug-react-native';
 
// Patch fetch for automatic network interception
patchFetch();
 
Snapbug.start();

Settings go through the same call:

Snapbug.start({
  serverHost: '192.168.1.42',  // LAN IP of your Mac for physical devices; not needed for simulators or relay
  overlay: 'BUBBLE',           // Android only: BUBBLE (default), FAB or NONE
  appVersion: '1.0.0',
});

If you start the native SDK yourself

Only needed when you want native configuration with no JS equivalent — declaring your app's own deep links, for instance. Snapbug.start() then sees the running SDK and just attaches the JS plugins to the bridge.

The module declares the SDK as implementation, so the classes exist at runtime but are not on your app's compile classpath. For your own call, add exactly this pair to android/app/build.gradle:

dependencies {
    debugImplementation("ai.snapbug:snapbug:0.1.1")
    releaseImplementation("ai.snapbug:snapbug-no-op:0.1.1")
}

Both artifacts expose every plugin through api. Do not add the per-plugin artifacts (snapbug-analytics, snapbug-device, snapbug-transport-webrtc-no-op, …) — in release they land next to their no-op twins and the build fails on Duplicate class.

Snapbug.start takes an Activity, which it needs for the overlay, so this does not go in MainApplication:

import io.snapbug.sdk.OverlayMode
import io.snapbug.sdk.Snapbug
 
class MainActivity : ReactActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        Snapbug.start(this) {
            overlay = OverlayMode.BUBBLE
            deeplinks { deeplink("myapp://product", label = "Open product") }
        }
    }
}

Logs

Log lines stream into the Logs inspector in real time:

• Android — the native SDK captures logcat; console.log from JS lands there under the ReactNativeJS tag, so nothing extra is needed.
• iOS — the RN engine routes console.* to os_log, past stdout, so the SnapbugLogs JS plugin (part of the default plugin set) hooks console.log/info/warn/error/debug and forwards each line (log/info → I, debug → D, warn → W, error → E).

Network Inspection

Automatic Fetch Interception

The SDK can automatically intercept all fetch calls by patching the global fetch function:

import { patchFetch, unpatchFetch } from 'snapbug-react-native';
 
// Start intercepting
patchFetch();
 
// All fetch() calls are now captured
const response = await fetch('https://api.example.com/users');
 
// Stop intercepting when no longer needed
unpatchFetch();

Manual Logging

For custom HTTP clients, send protocol messages directly. sendMessage takes the plugin ID, method name, and a JSON string body:

import { Snapbug } from 'snapbug-react-native';
 
Snapbug.sendMessage(
  'network',
  'logNetworkCallRequest',
  JSON.stringify({
    snapbugCallId: 'my-call-1',
    snapbugNetworkType: 'HTTP',
    url: 'https://api.example.com/users',
    method: 'POST',
    startTime: Date.now(),
    requestHeaders: { 'Content-Type': 'application/json' },
    requestBody: JSON.stringify({ name: 'John' }),
  })
);

Analytics

Log analytics events with a table identifier:

import { Snapbug } from 'snapbug-react-native';
 
Snapbug.analytics('firebase').logEvents([
  {
    eventName: 'screen_view',
    properties: { screen_name: 'Home' },
  },
  {
    eventName: 'button_click',
    properties: { button_id: 'sign_up' },
  },
]);

Crash Reporter

Automatic Fatal Error Capture

Enable fatal error capture when starting the SDK:

import { Snapbug, SnapbugCrashReporter, SnapbugNetwork, SnapbugAnalytics, SnapbugLogs } from 'snapbug-react-native';
 
Snapbug.start({
  plugins: [
    new SnapbugNetwork(),
    new SnapbugAnalytics(),
    new SnapbugCrashReporter({ catchFatalErrors: true }),
    new SnapbugLogs(),
  ],
});

Manual Error Reporting

Report caught exceptions:

import { SnapbugCrashReporter } from 'snapbug-react-native';
 
try {
  await riskyOperation();
} catch (error) {
  SnapbugCrashReporter.reportError(error);
}

API Reference

Example App

A complete React Native example app is available at SnapbugReactNative/example/ in the repository.

To run it:

cd SnapbugReactNative/example
npm install
npm run android

For iOS:

cd SnapbugReactNative/example
npm install
cd ios && pod install && cd ..
npm run ios

Next Steps

• Connect your device
• Troubleshooting for common issues