tessl/npm-reactotron-react-native

A development tool to explore, inspect, and diagnose your React Native apps.

—

Pending

Overview

Eval results

Files

AsyncStorage Tracking

Name: tessl/npm-reactotron-react-native
Author: tessl

Monitors and logs AsyncStorage operations including set, get, remove, clear, and multi-operations with configurable ignore patterns for sensitive data.

Capabilities

AsyncStorage Plugin

Creates a plugin that intercepts AsyncStorage operations and sends them to Reactotron for debugging.

/**
 * Create AsyncStorage tracking plugin
 * @param options - Configuration options for AsyncStorage tracking
 * @returns Plugin creator function
 */
function asyncStorage(options?: AsyncStorageOptions): PluginCreator;

/**
 * Configuration options for AsyncStorage tracking
 */
interface AsyncStorageOptions {
  /** Array of keys to ignore from tracking (for sensitive data) */
  ignore?: string[];
}

Usage Examples:

import Reactotron, { asyncStorage } from "reactotron-react-native";

// Basic AsyncStorage tracking
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .use(asyncStorage())
  .connect();

// Ignore sensitive keys
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .use(asyncStorage({
    ignore: ['userToken', 'password', 'persist:root']
  }))
  .connect();

// Via useReactNative
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    asyncStorage: { ignore: ['sensitive-data'] }
  })
  .connect();

Plugin Features

The AsyncStorage plugin provides tracking control features.

/**
 * Plugin features for controlling AsyncStorage tracking
 */
interface AsyncStorageFeatures {
  /** Start tracking AsyncStorage operations */
  trackAsyncStorage(): void;
  /** Stop tracking AsyncStorage operations */
  untrackAsyncStorage(): void;
}

Usage Examples:

// Manually control tracking
reactotron.trackAsyncStorage();    // Start tracking
reactotron.untrackAsyncStorage();  // Stop tracking

Tracked Operations

The plugin intercepts and logs the following AsyncStorage operations:

Single Item Operations

// Tracked AsyncStorage methods
setItem(key: string, value: string): Promise<void>;
removeItem(key: string): Promise<void>;
mergeItem(key: string, value: string): Promise<void>;
clear(): Promise<void>;

Multi-Item Operations

// Tracked multi-operation methods
multiSet(pairs: Array<[string, string]>): Promise<void>;
multiRemove(keys: string[]): Promise<void>;
multiMerge(pairs: Array<[string, string]>): Promise<void>;

Reactotron Messages

The plugin sends the following message types to Reactotron:

Mutation Messages

All AsyncStorage operations are sent as mutation messages with the following structure:

/**
 * AsyncStorage mutation message sent to Reactotron
 */
interface AsyncStorageMutation {
  type: "asyncStorage.mutation";
  payload: {
    action: "setItem" | "removeItem" | "mergeItem" | "clear" | "multiSet" | "multiRemove" | "multiMerge";
    data?: {
      key?: string;
      value?: string;
      keys?: string[];
      pairs?: Array<[string, string]>;
    };
  };
}

Implementation Details

Swizzling Pattern

The plugin uses a swizzling pattern to intercept AsyncStorage methods while preserving original functionality:

// Example of how the plugin works internally
const originalSetItem = AsyncStorage.setItem;
AsyncStorage.setItem = async (key, value, callback) => {
  // Send to Reactotron if not ignored
  if (!isIgnored(key)) {
    reactotron.send("asyncStorage.mutation", { action: "setItem", data: { key, value } });
  }
  
  // Call original method
  return originalSetItem(key, value, callback);
};

Ignore Pattern Matching

Keys are filtered using simple string comparison:

const shouldIgnore = (key: string): boolean => {
  return ignoreList.includes(key);
};

Usage Best Practices:

// Ignore sensitive data patterns
const reactotron = Reactotron
  .use(asyncStorage({
    ignore: [
      'userToken',           // Auth tokens
      'password',           // Passwords
      'creditCard',         // Financial data
      'persist:root',       // Redux persist data
      '@MyApp:session'      // App-specific sensitive data
    ]
  }))
  .connect();

Install with Tessl CLI

npx tessl i tessl/npm-reactotron-react-native

docs

async-storage.md

core-configuration.md

dev-tools.md

editor-integration.md