React Native SDK

React NativeAndroidiOS

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 prebuilt SnapbugSDK.xcframework is vendored inside the pod):

cd ios && pod install

Quick Start

The RN module is a bridge: the host app starts the native SDK, then the JS side connects to it.

1. Start the native SDK

Android — in your MainApplication:

import io.snapbug.sdk.SnapbugContext
import io.snapbug.sdk.startSnapbug
import io.snapbug.sdk.network.core.SnapbugNetwork
import io.snapbug.sdk.plugins.analytics.SnapbugAnalytics
import io.snapbug.sdk.plugins.crashreporter.SnapbugCrashReporter
import io.snapbug.sdk.plugins.debugfeedback.SnapbugDebugFeedback
import io.snapbug.sdk.plugins.device.SnapbugDevice
import io.snapbug.sdk.plugins.logs.SnapbugLogs
 
class MainApplication : Application(), ReactApplication {
    override fun onCreate() {
        super.onCreate()
        startSnapbug(SnapbugContext(this)) {
            install(SnapbugAnalytics)
            install(SnapbugNetwork)
            install(SnapbugCrashReporter) { catchFatalErrors = true }
            install(SnapbugDevice)
            install(SnapbugDebugFeedback)
            install(SnapbugLogs)
        }
        // ... your existing RN setup
    }
}

iOS — in your AppDelegate, before React Native starts:

import SnapbugSDK
 
private func startSnapbugSdk() {
    SnapbugConfigurationKt.startSnapbug(
        context: SnapbugContext(),
        block: { config in
            config.install(factory: SnapbugAnalytics.shared, configure: { _ in })
            config.install(factory: SnapbugNetwork.shared, configure: { _ in })
            config.install(factory: SnapbugCrashReporter.shared, configure: { c in
                (c as! SnapbugCrashReporterConfig).catchFatalErrors = true
            })
            config.install(factory: SnapbugDevice.shared, configure: { _ in })
            config.install(factory: SnapbugDebugFeedback.shared, configure: { _ in })
            config.install(factory: SnapbugLogs.shared, configure: { _ in })
        }
    )
    SnapbugDebugFeedbackIos.shared.start(config: DebugFeedbackConfig(
        enabled: true,
        screenNameProvider: { "ReactNative" },
        collectTimeline: true,
        timelineMaxEvents: 200,
        timelineMaxAgeSeconds: 60,
        appVersion: "1.0.0"
    ))
}

2. Start the JS side

Initialize at the entry point of your app. All JS plugins are enabled by default:

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

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

Method	Description
`Snapbug.start(config?)`	Initialize the JS bridge; pass `{ plugins: [...] }` to enable a subset
`Snapbug.stop()`	Disconnect and stop all JS plugins
`Snapbug.analytics(tableId)`	Get an analytics builder for the given table
`Snapbug.getPlugin(PluginClass)`	Get a plugin instance by class
`Snapbug.sendMessage(plugin, method, body)`	Send a raw protocol message (body is a JSON string)
`Snapbug.updateServerHost(host)`	Change the inspector host address (for Wi-Fi connections)
`patchFetch()`	Patch global `fetch` for automatic network interception
`unpatchFetch()`	Restore the original `fetch` function
`new SnapbugCrashReporter({ catchFatalErrors })`	Crash reporter plugin; captures unhandled JS errors when enabled
`SnapbugCrashReporter.reportError(error, stackTrace?)`	Report a caught error manually

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

Flutter Web (Kotlin/Wasm)