Lightning-Fast In-App Debugging with React Native BugBubble

Source: Dev.to

Overview

@lokal-dev/react-native-bugbubble provides real‑time visibility into network calls, WebSocket events, console logs, and analytics directly inside your React Native app. It’s a lightweight, drop‑in debugger with zero native setup—just pure JavaScript/TypeScript.

Demo

A floating debug bubble can be dragged around and tapped to open the debugger UI. It tracks network, WebSocket, console, and analytics events out of the box.

Installation

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

Usage

Add the provider at the root of your app so it mounts once:

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

export default function App() {
  return (
    <>
      {/* Your app components go here */}
      <BugBubbleProvider />
    </>
  );
}

Configuration

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, // Track analytics events
    },
  },
  // Optional: hide unwanted URLs
  ignoreUrls: [/symbolicate/, /generate_204/, /clients3\.google\.com/],
};

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

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

Notes

• The configuration is read on mount; remount the component to apply changes.
• Disabling a log type hides its tab and stops the corresponding interceptors.

Custom Logging

If you need to log custom events manually:

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');

Use Cases

• QA builds that need to inspect API traffic without remote tools.
• Investigating flaky WebSocket connections or console noise in CI‑only environments.
• A lightweight alternative to heavier remote debuggers.

Further Reading

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