使用 React Native BugBubble 实现闪电般快速的应用内调试

Source: Dev.to

概述

@lokal-dev/react-native-bugbubble 提供对网络请求、WebSocket 事件、控制台日志和分析数据的实时可视化，直接在你的 React Native 应用内部。它是一个轻量级、即插即用的调试器，无需原生配置——纯 JavaScript/TypeScript 实现。

演示

一个漂浮的调试气泡可以拖动位置，点击后打开调试 UI。它默认即可追踪网络、WebSocket、控制台和分析事件。

安装

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

用法

在应用根组件中添加 provider，使其只挂载一次：

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

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

配置

你可以调节日志上限、气泡位置以及追踪开关：

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} />;
};

注意事项

• 配置在组件挂载时读取；若要生效更改，请重新挂载组件。
• 禁用某种日志类型会隐藏对应标签页并停止相应的拦截器。

自定义日志

如果需要手动记录自定义事件：

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

使用场景

• 需要在 QA 包中检查 API 流量而不依赖远程工具。
• 调查不稳定的 WebSocket 连接或 CI 环境下的控制台噪声。
• 作为更重型远程调试器的轻量替代方案。

进一步阅读

完整的 API 细节和更多示例，请参阅 GitHub 上的项目仓库：
react-native-bugbubble