Registry / http-networking / reactotron-core-client

reactotron-core-client

JSON →
library2.9.9jsnpmunverified

Reactotron is a powerful open-source desktop application (macOS, Windows, Linux) by Infinite Red for debugging React and React Native applications. `reactotron-core-client` (current version 2.9.9) serves as the foundational communication layer, enabling client-side applications (like `reactotron-react-native` or `reactotron-react-js`) to connect and exchange data with the Reactotron desktop server. This package provides the `createClient` function, which initializes the connection via WebSockets and handles command dispatching and receipt. It is designed to be pluggable, allowing for extensive customization and feature additions through a plugin architecture. Reactotron generally follows a frequent release cadence across its monorepo, with core components like `reactotron-core-client` receiving updates as needed to support new features or fix issues. Key differentiators include its rich plugin ecosystem (for Redux, MobX, networking, async storage, global errors, custom commands), real-time state inspection, API request/response monitoring, and the ability to perform quick performance benchmarks. It distinguishes itself from other debuggers by communicating over TCP ports and offering features like image overlays for UI development.

npm install reactotron-core-client
INSTALL
IMPORT
SIG · REACTOTRON-CORE-CL
R
reactotron-core-client
http-networkingjavascriptv2.9.9
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

createClient
import { createClient } from 'reactotron-core-client';
const createClient = require('reactotron-core-client').createClient;
The primary named export for initializing a Reactotron client instance. CommonJS `require` should be avoided in modern ESM projects.
Reactotron
import { Reactotron } from 'reactotron-core-client';
This is the TypeScript interface for the Reactotron client instance, commonly imported for type hinting or extending its functionality, especially when creating custom plugins.
Plugin
import { Plugin } from 'reactotron-core-client';
The TypeScript type definition for creating custom Reactotron plugins, used to extend client capabilities.

This quickstart demonstrates how to initialize `reactotron-core-client`, connect to the Reactotron desktop app, and send basic log and error messages using the `send` method. It highlights the `createClient` function with essential configuration options like `host`, `port`, and lifecycle callbacks.

import { createClient } from 'reactotron-core-client'; // In a Node.js environment, you might need a WebSocket polyfill or 'ws' package. // For browser environments, window.WebSocket is used by default. // const WebSocket = require('ws'); // If using in Node.js without a global WebSocket const client = createClient({ // Required: provide a WebSocket implementation, e.g., for Node.js createSocket: (path) => new WebSocket(path), host: process.env.REACTOTRON_HOST ?? 'localhost', port: parseInt(process.env.REACTOTRON_PORT ?? '9090', 10), name: 'My Generic Client', onConnect: () => { console.log('Reactotron client connected!'); }, onDisconnect: () => { console.log('Reactotron client disconnected!'); }, onCommand: ({ type, payload }) => { console.log(`Received command: ${type}`, payload); }, }); client.connect(); // Send a simple log message client.send('log', { level: 'info', message: 'Hello from Reactotron client!' }); // Send an object log message client.send('log', { level: 'debug', message: { component: 'App', status: 'initialized', user: { id: 1, name: 'Test User' }, }, }); // Example of sending an error try { throw new Error('Something went wrong!'); } catch (error: any) { client.send('log', { level: 'error', message: error.message, stack: error.stack }); } // You can also expose the client globally for easier access in development // (global as any).tron = client; console.log('Reactotron client initialized. Check your Reactotron desktop app.');
Debug
Known issues
breakingReactotron 3.0 introduced a monorepo structure and embraced `package.exports` in `package.json`. This change might affect older build tooling or custom module resolution configurations, potentially leading to 'module not found' errors. All Reactotron packages should ideally be updated together to their latest major versions (3.x for `reactotron-app`, 2.x for `reactotron-core-client` and related libraries) to ensure compatibility.
fix
Ensure all Reactotron-related packages in your project are updated to compatible major versions. If using custom build setups, verify `package.exports` resolution is supported. Use `npm upgrade` or `yarn upgrade` for all Reactotron dependencies.
affects: >=3.0.0 (for reactotron-app and related clients, `reactotron-core-client` >=2.x)
gotchaConnecting Reactotron from Android devices or emulators often requires manual host configuration or using `adb reverse tcp:9090 tcp:9090`. While Reactotron 3.0 aimed to improve auto-discovery, complex network setups or older Android versions may still need these steps to establish a connection with the desktop app. Ensure your device/emulator can reach the host machine's IP address on the specified port.
fix
For Android, run `adb reverse tcp:9090 tcp:9090` in your terminal. For tethered iOS devices, explicitly set the `host` option in your Reactotron configuration to your development machine's IP address, rather than 'localhost'. Ensure no other process is using port 9090.
affects: >=1.0.0
gotcha`reactotron-core-client`'s `createClient` function requires a `createSocket` option which provides a WebSocket implementation. In browser environments, `window.WebSocket` is implicitly available. However, in Node.js environments (e.g., for server-side debugging or testing), you must explicitly provide a WebSocket constructor, typically from the `ws` package, which needs to be installed as a direct dependency. Failure to do so will result in runtime errors related to `WebSocket` not being defined.
fix
For Node.js environments, install `ws` (`npm install ws` or `yarn add ws`) and configure `createClient` with `createSocket: (path) => new WebSocket(path)`. Ensure `WebSocket` is correctly imported or globally available.
affects: >=1.0.0
gotchaChanges in React Native's debugging architecture (e.g., deprecation of remote debugging and Flipper in RN 0.73+) can impact how Reactotron integrates with React Native applications. While `reactotron-core-client` provides the core communication, platform-specific clients like `reactotron-react-native` may require updates or specific configurations to work optimally with newer React Native versions, potentially involving new debuggers or different communication channels.
fix
Consult the `reactotron-react-native` (or `reactotron-react-js`) documentation for the latest integration instructions with newer React Native versions. Ensure you are using compatible versions of both React Native and Reactotron client packages.
affects: >=5.0.0 (reactotron-react-native) in React Native >=0.73
Errors
Common errors & fixes
error: bundling failed: Error: While trying to resolve module reactotron-core-client from file /path/to/project/node_modules/reactotron-react-native/dist/index.js, the package /path/to/project/node_modules/reactotron-core-client/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (...)
This error typically occurs when an older bundler or Node.js version fails to correctly resolve the `exports` field in `package.json`, which is used by Reactotron 3.x for modern module resolution.
fix
Ensure your Node.js version is up-to-date (LTS or newer). Update your bundler (e.g., Metro, Webpack) to a version that fully supports `package.exports`. Verify all Reactotron packages are at compatible major versions, ideally updated together.
Reactotron is waiting for connection...
The Reactotron client in your application cannot establish a connection with the Reactotron desktop application. This can be due to the desktop app not running, incorrect host/port configuration, firewall issues, or network connectivity problems (especially with physical devices/emulators).
fix
1. Ensure the Reactotron desktop application is running. 2. Verify `host` and `port` settings in your client configuration match the desktop app (default `localhost:9090`). 3. For Android devices/emulators, run `adb reverse tcp:9090 tcp:9090`. 4. For physical iOS devices, use your development machine's actual IP address as the `host`. 5. Check firewall settings on your development machine.
TypeError: (0 , reactotron_core_client_1.createClient) is not a function
This error occurs when `createClient` is imported incorrectly, typically in a CommonJS context attempting to consume an ESM-first package, or when using a transpilation setup that doesn't handle named exports correctly.
fix
Ensure you are using `import { createClient } from 'reactotron-core-client';` for modern JavaScript/TypeScript projects. If in a CommonJS-only environment (less common for new Reactotron setups), ensure proper interoperability or update to an environment that supports ESM imports.
Upgrade
Version history
2.9.9latest on npm
Audit
Dependencies
wsoptionalRequired for WebSocket communication in Node.js environments when `createSocket` is not explicitly provided or needs a Node.js-compatible WebSocket implementation. Browsers use `window.WebSocket` by default.
Agent activity
14 hits · last 30 days
node
10
Amazon
2
Resources
reactotron-core-client — npm install reactotron-core-client · libregistry