tessl/npm-reactotron-react-native

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

—

Pending

Overview

Eval results

Files

Global Logging

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

Intercepts console.log, console.warn, and console.debug calls to forward them to Reactotron for centralized logging and debugging.

Capabilities

Global Logging Plugin

Creates a plugin that intercepts global console methods and forwards all log messages to Reactotron while preserving original console functionality.

/**
 * Create global logging plugin
 * @returns Plugin creator function (no configuration options)
 */
function trackGlobalLogs(): PluginCreator;

Usage Examples:

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

// Basic global logging
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .use(trackGlobalLogs())
  .connect();

// Via useReactNative
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    log: true
  })
  .connect();

Intercepted Console Methods

The plugin intercepts the following console methods:

Console.log Interception

/**
 * Intercepts console.log calls
 * Original signature: console.log(...args: any[]): void
 */
console.log = (...args: any[]) => {
  originalConsoleLog(...args);  // Preserve original behavior
  reactotron.log(...args);      // Forward to Reactotron
};

Console.warn Interception

/**
 * Intercepts console.warn calls
 * Original signature: console.warn(...args: any[]): void
 */
console.warn = (...args: any[]) => {
  originalConsoleWarn(...args);  // Preserve original behavior
  reactotron.warn(args[0]);      // Forward first argument to Reactotron
};

Console.debug Interception

/**
 * Intercepts console.debug calls
 * Original signature: console.debug(...args: any[]): void
 */
console.debug = (...args: any[]) => {
  originalConsoleDebug(...args);  // Preserve original behavior
  reactotron.debug(args[0]);      // Forward first argument to Reactotron
};

Message Forwarding

Reactotron Logger Integration

The plugin requires the logger plugin to be present in the Reactotron core client:

/**
 * Required logger methods on Reactotron client
 */
interface LoggerMethods {
  /** Log general messages */
  log(...args: any[]): void;
  /** Log warning messages */
  warn(message: any): void;
  /** Log debug messages */
  debug(message: any): void;
}

Message Formatting

The plugin handles different argument patterns:

Multiple Arguments (console.log)

console.log("User logged in:", user, "at", new Date());
// Forwards all arguments to Reactotron
reactotron.log("User logged in:", user, "at", new Date());

Single Argument (console.warn/debug)

console.warn("Network timeout occurred");
// Forwards first argument only
reactotron.warn("Network timeout occurred");

console.debug({ userId: 123, action: "login" });
// Forwards first argument only
reactotron.debug({ userId: 123, action: "login" });

Implementation Details

Method Swizzling

The plugin uses method swizzling to intercept console calls while preserving original functionality:

// Store original methods
const originalConsoleLog = console.log;
const originalConsoleWarn = console.warn;
const originalConsoleDebug = console.debug;

// Replace with intercepting versions
console.log = interceptedLog;
console.warn = interceptedWarn;
console.debug = interceptedDebug;

Plugin Lifecycle

The interception is set up during the onConnect phase:

/**
 * Plugin lifecycle hook
 */
interface GlobalLoggingPlugin {
  onConnect(): void;  // Sets up console interception
}

Error Exclusion

The plugin specifically excludes console.error interception, as errors are handled by the trackGlobalErrors plugin:

// console.error is NOT intercepted
// Error tracking is handled by trackGlobalErrors plugin

Usage Scenarios

Development Debugging

const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    log: true,    // Global logging
    errors: true  // Error tracking (separate plugin)
  })
  .connect();

// All these will appear in Reactotron
console.log("App initialized");
console.warn("Deprecated API usage");
console.debug("User interaction data:", { button: "login" });

Selective Logging

// Enable logging only in development
const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    log: __DEV__  // Only intercept logs in development
  })
  .connect();

Integration with Other Plugins

const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    log: true,          // Console interception
    errors: true,       // Error tracking
    networking: true,   // Network monitoring
    asyncStorage: true  // Storage tracking
  })
  .connect();

// All logging types will be centralized in Reactotron:
// - Console logs (this plugin)
// - Network requests (networking plugin)
// - Errors (trackGlobalErrors plugin)
// - AsyncStorage operations (asyncStorage plugin)

Message Types in Reactotron

The plugin sends different message types to Reactotron:

Log Messages

// console.log("Hello", "World") becomes:
{
  type: "log",
  payload: ["Hello", "World"]
}

Warning Messages

// console.warn("Deprecated function") becomes:
{
  type: "warn", 
  payload: "Deprecated function"
}

Debug Messages

// console.debug({data: "value"}) becomes:
{
  type: "debug",
  payload: {data: "value"}
}

Performance Considerations

Minimal Overhead

The plugin adds minimal performance overhead:

Original console functionality is preserved
Forwarding only occurs when Reactotron is connected
No additional data processing or transformation

Memory Usage

The plugin maintains references to original console methods but doesn't store log history, keeping memory usage minimal.

Usage Best Practices:

// Production-safe logging setup
const loggingEnabled = __DEV__;

const reactotron = Reactotron
  .configure({ name: "MyApp" })
  .useReactNative({
    log: loggingEnabled
  })
  .connect();

// Conditional logging in code
if (__DEV__) {
  console.log("Debug information:", debugData);
}

// Use appropriate log levels
console.log("General information");     // Info level
console.warn("Potential issues");       // Warning level  
console.debug("Detailed debug data");   // Debug level
console.error("Critical errors");       // Error level (handled by trackGlobalErrors)

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