Lightning-Fast In-App Debugging with React Native BugBubble

#javascript #reactnative

If you want real-time visibility into network calls, WebSocket events, console logs, and analytics without leaving your app, @lokal-dev/react-native-bugbubble is a lightweight drop-in debugger for React Native.

DEMO

Why BugBubble?

Floating debug bubble you can drag and tap to open the debugger UI.
Tracks network, WebSocket, console, and analytics events out of the box.
Zero native setup; pure JS/TS with sensible defaults.
Configurable log limits, button position, and per-signal tracking.

Installation

yarn add @lokal-dev/react-native-bugbubble
# or
npm install @lokal-dev/react-native-bugbubble

Minimal Integration

Add the component at your app root so it mounts once:

import { BugBubbleProvider } from '@components/global/BugBubbleProvider';

export default function App() {
  return (
    <>
      <YourApp />
      <BugBubbleProvider />
    </>
  );
}

Configuring the Debugger

You can tune log limits, bubble position, and tracking switches:

import { BugBubble } from '@lokal-dev/react-native-bugbubble';

const IS_BUG_BUBBLE_ENABLED = Keys.ENV !== 'production';

/**
 * BugBubble configuration options
 */
const bugBubbleConfig = {
  maxLogs: 100, // Maximum number of logs to store
  floatingButtonPosition: {
    top: 150,
    right: 30,
  },
  trackingOptions: {
    enabled: true,
    options: {
      console: true, // Track console logs
      network: true, // Track network requests
      websocket: true, // Track websocket connections
      analytics: true, // Disable analytics tracking
    },
  },
  ignoreUrls: [/symbolicate/, /generate_204/, /clients3\.google\.com/], // optional: hide unwanted urls
};

export const BugBubbleProvider = () => {
  if (!IS_BUG_BUBBLE_ENABLED) {
    return null;
  }

  return <BugBubble config={bugBubbleConfig} />;
};

Notes:

Config is read on mount; remount to change it.
Disabling a log type hides its tab and stops interceptors for that type.

Manual Logging (Optional)

If you need to log custom events:

import { BugBubbleLogger } from '@lokal-dev/react-native-bugbubble';

BugBubbleLogger.logAnalytics('user_login', { method: 'email' });
BugBubbleLogger.logNetwork('POST', 'https://api.example.com/users', 201);
BugBubbleLogger.logWebSocket('message', 'wss://api.example.com/ws', { ping: true });
BugBubbleLogger.logConsole('warn', 'Deprecated API used');

When to Use It

QA builds to inspect API traffic without remote tools.
Investigating flaky WebSocket or console noise in CI-only environments.
Lightweight alternative to heavier remote debuggers.

For full API details and examples, see the project repo: react-native-bugbubble on GitHub.

DEV Community