React Native SDK

React NativeAndroidiOS

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

Requirements

  • React Native >= 0.73.0
  • Android minSdk 24
  • iOS >= 15.0
  • Node.js >= 22.11.0

Installation

npm install snapbug-react-native

For iOS, install the native pods:

cd ios && pod install

Quick Start

Initialize Snapbug at the entry point of your app:

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

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 or when you need more control:

import { Snapbug } from 'snapbug-react-native';
 
Snapbug.sendMessage({
  plugin: 'network',
  method: 'logRequest',
  body: {
    method: 'POST',
    url: 'https://api.example.com/users',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'John' }),
  },
});

Analytics

Log analytics events with a table identifier:

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

Crash Reporter

Automatic Fatal Error Capture

Wrap your app to capture unhandled errors:

import { SnapbugCrashReporter } from 'snapbug-react-native';
 
SnapbugCrashReporter.catchFatalErrors();

Manual Error Reporting

Report caught exceptions:

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

Android Setup

The React Native module depends on the native Snapbug Android SDK. Add the dependency to your app's android/app/build.gradle:

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

Initialize the native SDK in your Application class:

import io.snapbug.sdk.Snapbug
 
class MainApplication : Application(), ReactApplication {
    override fun onCreate() {
        super.onCreate()
        Snapbug.initialize(this)
        // ... rest of your initialization
    }
}

iOS Setup

  1. Build the XCFramework:
cd SnapbugAndroid && ./gradlew :snapbug:assembleXCFramework

  1. Copy the resulting snapbug.xcframework to your iOS project.

  2. Add it to your Xcode project under General > Frameworks, Libraries, and Embedded Content.

  3. Run pod install:

cd ios && pod install
warning

iOS support is in beta. Physical device connections are not yet supported -- simulator only.

API Reference

MethodDescription
Snapbug.start(options)Initialize Snapbug with the specified plugins
Snapbug.stop()Disconnect and stop all plugins
Snapbug.analytics(tableId)Get an analytics logger for the given table
Snapbug.getPlugin(name)Get a reference to a specific plugin
Snapbug.sendMessage(message)Send a raw message to the Desktop app
Snapbug.updateServerHost(host)Change the Desktop app host address (for Wi-Fi connections)
patchFetch()Patch global fetch for automatic network interception
unpatchFetch()Restore original fetch function
SnapbugCrashReporter.catchFatalErrors()Start capturing unhandled errors
SnapbugCrashReporter.reportError(error)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

Or build the APK manually:

cd SnapbugReactNative/example/android
./gradlew assembleDebug

Next Steps

arrow_backFlutterOverviewarrow_forward