tessl/npm-reactotron-react-native

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

—

Pending

Overview

Eval results

Files

Network Monitoring

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

Intercepts and logs HTTP requests and responses through React Native's XMLHttpRequest with support for content type filtering, URL pattern exclusion, and response body processing.

Capabilities

Networking Plugin

Creates a plugin that monitors all network requests made through XMLHttpRequest (including fetch requests that use XHR internally).

/**
 * Create network monitoring plugin
 * @param options - Configuration options for network monitoring
 * @returns Plugin creator function
 */
function networking(options?: NetworkingOptions): PluginCreator;

/**
 * Configuration options for network monitoring
 */
interface NetworkingOptions {
  /** RegExp pattern to ignore specific content types (default: images) */
  ignoreContentTypes?: RegExp;
  /** RegExp pattern to ignore specific URLs */
  ignoreUrls?: RegExp;
}

Usage Examples:

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

// Basic network monitoring
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .use(networking())
  .connect();

// Custom content type and URL filtering
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .use(networking({
    ignoreContentTypes: /^(image|video)\/.*$/i,
    ignoreUrls: /\/(logs|analytics)/
  }))
  .connect();

// Via useReactNative
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    networking: {
      ignoreUrls: /localhost:3000/
    }
  })
  .connect();

Default Behavior

Content Type Filtering

By default, the plugin ignores image content types to reduce noise:

const DEFAULT_CONTENT_TYPES_RX = /^(image)\/.*$/i;

Request Tracking

The plugin automatically tracks:

Request URL, method, headers, and body
Response status, headers, and body
Request timing information
Query parameters parsing

Network Message Format

Request Structure

/**
 * Network request data sent to Reactotron
 */
interface NetworkRequest {
  url: string;
  method: string | null;
  data: any;  // Request body
  headers: Record<string, string> | null;
  params: Record<string, string> | null;  // Parsed query parameters
}

Response Structure

/**
 * Network response data sent to Reactotron
 */
interface NetworkResponse {
  body: any;  // Parsed JSON or raw response
  status: number;
  headers: Record<string, string> | null;
}

Complete Network Log

/**
 * Complete network log sent to Reactotron via apiResponse
 */
interface NetworkLog {
  request: NetworkRequest;
  response: NetworkResponse;
  duration?: number;  // Request duration in milliseconds
}

Advanced Features

Response Body Processing

The plugin intelligently handles different response types:

JSON Responses

// Automatically parses JSON responses
{
  "body": { "users": [...], "total": 150 }
}

Blob Responses

// Uses FileReader for blob content when available
{
  "body": "processed blob content as text"
}

Filtered Content

// For ignored content types
{
  "body": "~~~ skipped ~~~"
}

Query Parameter Parsing

Automatically extracts and parses URL query parameters:

// URL: https://api.example.com/users?page=1&limit=20&sort=name
{
  "params": {
    "page": "1",
    "limit": "20", 
    "sort": "name"
  }
}

Error Handling

The plugin gracefully handles XHR interceptor loading failures across React Native versions:

// Handles multiple React Native XHR interceptor paths:
// - react-native/src/private/devsupport/devmenu/elementinspector/XHRInterceptor (RN >= 0.80)
// - react-native/src/private/inspector/XHRInterceptor (RN 0.79)
// - react-native/Libraries/Network/XHRInterceptor (RN < 0.79)

Implementation Details

XHR Interception

The plugin hooks into React Native's XHR interceptor system:

/**
 * XHR Interceptor interface
 */
interface XHRInterceptor {
  setSendCallback(callback: (data: any, xhr: any) => void): void;
  setResponseCallback(callback: (...args: any[]) => void): void;
  enableInterception(): void;
}

Request Lifecycle

Send Callback: Captures request data when XMLHttpRequest.send() is called
Response Callback: Captures response data when response is received
Timing: Measures request duration using Reactotron's timer functionality
Filtering: Applies URL and content type filters before sending to Reactotron

Usage Best Practices:

// Production-safe filtering
const reactotron = Reactotron
  .use(networking({
    ignoreUrls: /\/(analytics|logs|tracking)/,
    ignoreContentTypes: /^(image|video|audio)\/.*$/i
  }))
  .connect();

// Development vs production
const networkingOptions = __DEV__ ? {} : {
  ignoreUrls: /./  // Ignore all requests in production
};

const reactotron = Reactotron
  .use(networking(networkingOptions))
  .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