DevConnect Manage Kit — React Native SDK

Debug your React Native app with DevConnect Manage Tool — network, state, logs, storage, performance — all in one desktop tool.

Install

yarn add devconnect-manage-kit
# or
npm install devconnect-manage-kit

Quick Start

import { DevConnect } from 'devconnect-manage-kit';

await DevConnect.init({ appName: 'MyApp' });
// Done. fetch + XHR + console auto-captured.

Config

await DevConnect.init({
  appName: 'MyApp',
  appVersion: '1.0.0',
  host: undefined,              // undefined = auto-detect, '192.168.1.5' = manual
  port: 9090,                   // default: 9090
  enabled: __DEV__,             // false in production
  autoInterceptFetch: true,     // true = auto-capture all fetch requests
  autoInterceptXHR: true,       // true = auto-capture all XHR requests
  autoInterceptConsole: true,   // true = auto-capture console.log/warn/error
});

Disable specific auto-intercepts if you want manual control:

await DevConnect.init({
  appName: 'MyApp',
  autoInterceptFetch: false,    // disable auto — use manual reportNetworkStart/Complete
  autoInterceptXHR: false,      // disable auto
  autoInterceptConsole: false,  // disable auto — use DevConnect.log/warn/error manually
});

Features

Network

Auto-captured: fetch, XHR, axios, got, ky, superagent, apisauce, Apollo, urql, TanStack Query, SWR, RTK Query.

// Axios (optional, for extra tagging)
import { setupAxiosInterceptor } from 'devconnect-manage-kit';
setupAxiosInterceptor(axios);

Logs

Auto-captured: console.log, console.debug, console.info, console.warn, console.error, console.trace.

DevConnect.log('User logged in');
DevConnect.debug('Debug info', 'Auth');
DevConnect.warn('Warning');
DevConnect.error('Error', 'Tag', stackTrace);

State

Supports: Redux, Redux Toolkit, MobX, Zustand, Jotai, Valtio, XState.

// Redux Toolkit
import { configureStore } from '@reduxjs/toolkit';
import { devConnectReduxMiddleware } from 'devconnect-manage-kit';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefault) =>
    __DEV__ ? getDefault().concat(devConnectReduxMiddleware) : getDefault(),
});

// Zustand
import { devConnectMiddleware } from 'devconnect-manage-kit';

const useStore = create(
  devConnectMiddleware(
    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
    'CounterStore'
  )
);

Storage

Supports: AsyncStorage, MMKV, Encrypted Storage, WatermelonDB, SQLite, Realm.

Each library has 2 options: auto (wrap once, everything reported) or manual (you control what gets reported). Choose per library.

AsyncStorage

// Option 1: Auto — patch once, all getItem/setItem/removeItem auto-reported
import { DevConnectAsyncStorage } from 'devconnect-manage-kit';
DevConnectAsyncStorage.patchInPlace(AsyncStorage);
await AsyncStorage.setItem('token', 'abc');  // auto-reported
await AsyncStorage.getItem('token');          // auto-reported

// Option 2: Manual — don't patch, report only what you want
import { DevConnectStorage } from 'devconnect-manage-kit';
const storage = new DevConnectStorage('async_storage');
await AsyncStorage.setItem('token', 'abc');
storage.reportWrite('token', 'abc');          // only this gets reported

MMKV

// Option 1: Auto
import { DevConnectMMKV } from 'devconnect-manage-kit';
DevConnectMMKV.wrap(storage);
storage.set('token', 'abc');  // auto-reported

// Option 2: Manual
import { DevConnectStorage } from 'devconnect-manage-kit';
const mmkvReporter = new DevConnectStorage('mmkv');
storage.set('token', 'abc');
mmkvReporter.reportWrite('token', 'abc');

Encrypted Storage

// Option 1: Auto (values masked as ***)
import { DevConnectEncryptedStorage } from 'devconnect-manage-kit';
DevConnectEncryptedStorage.patchInPlace(EncryptedStorage);
await EncryptedStorage.setItem('token', 'secret');  // auto-reported as ***

// Option 2: Manual — control what value is shown
import { DevConnectStorage } from 'devconnect-manage-kit';
const encReporter = new DevConnectStorage('encrypted_storage');
await EncryptedStorage.setItem('token', 'secret');
encReporter.reportWrite('token', '<hidden>');  // you choose what to show

WatermelonDB (manual only)

import { DevConnectWatermelon } from 'devconnect-manage-kit';
const watermelon = new DevConnectWatermelon();

const posts = await postsCollection.query().fetch();
watermelon.reportQuery('Post', posts.length);

await database.write(async () => {
  await postsCollection.create(post => { post.title = 'Hello'; });
});
watermelon.reportWrite('Post', { title: 'Hello' });

SQLite (manual only)

import { DevConnectSQLite } from 'devconnect-manage-kit';
const sqlite = new DevConnectSQLite();

const results = await db.executeSql('SELECT * FROM users');
sqlite.reportQuery('SELECT * FROM users', results[0].rows.raw());

await db.executeSql('INSERT INTO users (name) VALUES (?)', ['John']);
sqlite.reportExecute('INSERT INTO users (name) VALUES (?)', { name: 'John' });

Realm (manual only)

import { DevConnectRealm } from 'devconnect-manage-kit';
const realm = new DevConnectRealm();

const users = realmInstance.objects('User');
realm.reportQuery('User', users.length);

realmInstance.write(() => { realmInstance.create('User', { name: 'John' }); });
realm.reportWrite('User', { name: 'John' });

Generic (any key-value store)

import { DevConnectStorage } from 'devconnect-manage-kit';
const custom = new DevConnectStorage('my_custom_store');
custom.reportWrite('key', 'value');
custom.reportRead('key', 'value');
custom.reportDelete('key');

Performance

DevConnect.reportPerformanceMetric({ metricType: 'fps', value: 58.5, label: 'JS Thread FPS' });

Benchmark

DevConnect.benchmark('loadUserData');
await fetchUser();
DevConnect.benchmarkStep('loadUserData', 'fetched user');
await fetchPosts();
DevConnect.benchmarkStop('loadUserData');

Custom Commands

DevConnect.registerCommand('clearCache', () => {
  AsyncStorage.clear();
  return { success: true };
});

Production Safety

Disabled by default when __DEV__ is false — zero runtime overhead. Metro bundler strips __DEV__ blocks in production.

// Explicitly disable
DevConnect.init({ appName: 'MyApp', enabled: false });

Links

• Main Repository
• Desktop App Download
• Full Documentation

License

MIT - by ridelinktechs