Common workflows

Measure a slow interaction

Enable performance capture, then surround the operation with marks:

ReactNativeDevTool.performance.mark("checkout-start");
await submitCheckout();
ReactNativeDevTool.performance.mark("checkout-complete");
ReactNativeDevTool.performance.measure(
  "checkout-duration",
  "checkout-start",
  "checkout-complete",
);

Use startScreen, screenMounted, screenInteractive, and endScreen for screen milestones. Correlate the measurement with nearby network, Redux, and navigation events.

Capture handled failures

ReactNativeDevTool.captureError(error, {
  source: "manual",
  metadata: { operation: "checkout" },
});

Forward React error-boundary failures from componentDidCatch with source react_boundary and the component stack.

Attach an Axios instance

const removeAxiosInterceptor = ReactNativeDevTool.client?.attachAxios(axios);

Call the returned function when disposing the instance. Do not attach it when global instrumentation already captures the same requests unless duplicate events are acceptable.

Inspect custom storage

client.registerStorageProvider({
  id: "custom",
  name: "Custom storage",
  getAllKeys: async () => storage.getAllKeys(),
  getItem: async (key) => storage.getString(key) ?? null,
  setItem: async (key, value) => storage.set(key, value),
  removeItem: async (key) => storage.delete(key),
});

Provider IDs must be unique within a client.

Protect sensitive data

Configure redaction before connecting:

redaction: {
  fields: ['password', 'otp', 'token'],
  headers: ['authorization', 'cookie'],
  queryParameters: ['api_key'],
}

Structured values are recursively redacted before transmission. Avoid embedding secrets inside free-form error messages or stack strings, which cannot be field-redacted.

Diagnose a missing connection

1. Confirm the desktop app is open and listening on 9090.
2. Confirm the SDK is configured only in a development build.
3. Use the correct simulator host from Getting started.
4. Check client.getStats() for queueing or dropped events.
5. Check client.getDiagnosticSummary() and Connections for socket backpressure or reconnect failures.
6. For a physical device, enable LAN access and create a valid pairing code.

Preserve a development device identity

const identity = await getOrCreatePulseRNIdentity(AsyncStorage, {
  lifecycleId: developmentLifecycleId,
});

ReactNativeDevTool.configure({
  appName: "MyApp",
  ...identity,
}).connect();

Reuse the lifecycle ID during Fast Refresh and rotate it when the development run genuinely changes.

Diagnose a session automatically

Open the MCP panel, enable read-only access, and connect a trusted AI client. Ask it to diagnose the newest session or a selected session. PulseRN returns deterministic findings with confidence, relations, source context, evidence, and scan-completeness warnings.

Use a diagnostic snapshot when you want to preserve the evidence and paused debugger context for later review. See Automatic diagnostics and MCP debugger.