React Native BugBubble을 사용한 초고속 앱 내 디버깅

Source: Dev.to

Overview

@lokal-dev/react-native-bugbubble은 네트워크 호출, WebSocket 이벤트, 콘솔 로그, 그리고 분석 정보를 실시간으로 React Native 앱 내부에서 바로 확인할 수 있게 해줍니다. 별도의 네이티브 설정이 필요 없는 가벼운 드롭‑인 디버거이며, 순수 JavaScript/TypeScript만으로 동작합니다.

Demo

플로팅 디버그 버블을 화면 어디든 끌어다 놓을 수 있으며, 탭하면 디버거 UI가 열립니다. 기본적으로 네트워크, WebSocket, 콘솔, 분석 이벤트를 모두 추적합니다.

Installation

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

Usage

앱 루트에 프로바이더를 추가하면 한 번만 마운트됩니다:

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

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

Configuration

로그 제한, 버블 위치, 추적 옵션 등을 조정할 수 있습니다:

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

• 설정은 마운트 시 읽히며, 변경 사항을 적용하려면 컴포넌트를 다시 마운트해야 합니다.
• 로그 유형을 비활성화하면 해당 탭이 사라지고 관련 인터셉터도 중단됩니다.

Custom Logging

수동으로 커스텀 이벤트를 로그하고 싶다면:

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

• 원격 도구 없이 API 트래픽을 확인해야 하는 QA 빌드.
• 불안정한 WebSocket 연결이나 CI 전용 환경에서 발생하는 콘솔 잡음을 조사할 때.
• 무거운 원격 디버거에 비해 가벼운 대안이 필요할 때.

Further Reading

전체 API 상세 내용 및 추가 예제는 GitHub에 있는 프로젝트 저장소를 참고하세요:
react-native-bugbubble