rn-api-debugger

A draggable floating debug panel for React Native apps.
Logs API calls (axios + fetch), custom events, and crash reports — all in a beautiful in-app overlay.

Works out of the box with built-in defaults. Pass your own design system and it matches your app exactly.

Features

• 🐞 Floating draggable FAB — stays out of your way, drag anywhere
• 🔍 API Logs — method, URL, status, duration, screen, headers, request & response
• 📊 Event Logs — track analytics events anywhere in the app
• 💥 Crash Logs — record errors from ErrorBoundaries or try/catch blocks
• 🔎 Search & filter — by URL, screen, method or error status
• 📋 Copy to clipboard — one tap to share any log
• 🎨 Themeable — pass your own colours, typography, constants, footer & arrow icon

Installation

npm install rn-api-debugger
# or
yarn add rn-api-debugger

Peer dependencies

npm install @react-native-clipboard/clipboard  axios react-native-svg-transformer react-native-svg

Setup in App.js

import React, { useEffect } from 'react';
import { configureDebugger, initApiDebugger, FloatingDebugButton } from 'rn-api-debugger';

// ── Step 1: Inject your design system (optional — library has built-in defaults) ──
import { DefaultThemePallet } from './assets/themes/default_theme';
import { DefaultTypography }  from './assets/typography';
import { stylesConstants }        from './assets/styleConstants';
import SVGDownArrow               from 'path-of-arrowSvgIcon';
import FooterComponent                  from 'path-of-footer/Footer';

configureDebugger({
  theme:           DefaultThemePallet,
  typography:      DefaultTypography,
  constants:       stylesConstants,
  ArrowIcon:       SVGDownArrow,
  FooterComponent: FooterComponent,
});

// ── Step 2: Wire up interceptors ───────────────────────────────────────────────
import axios from 'axios';
import {authAxios , any kind of axios handler}
  from './your-file';
import { navigationRef } from './routers/navigation';

const App = () => {
  useEffect(() => {
    // init api debugger
      initApiDebugger({
        axiosInstances: [axios,.......],// you do not need to pass fetch this is default.
        navigationRef,
        excludeUrls: ['percept', 'perceptinsight',......], // URLs to skip for logging
      });
  }, []);

  return (
    <>
      {/* add fab button */}
      <FloatingDebugButton />}
    </>
  );
};

Logging Events

Call addEventLog anywhere in your app — inside components, services, or navigation handlers.

import { addEventLog } from 'rn-api-debugger';

// Track a button tap
addEventLog('buy_now_tapped', { screen: 'ProductDetail', productId: '42' });

// Track screen view
addEventLog('screen_viewed', { screen: 'Checkout' });

// Track any custom event
addEventLog('filter_applied', { type: 'price', min: 100, max: 500 });

Logging Crashes

Call addCrashLog inside Error Boundaries or any try/catch block.

import { addCrashLog } from 'rn-api-debugger';

// ── Inside a try/catch ────────────────────────────────────────────────────────
const handlePayment = async () => {
  try {
    await processPayment();
  } catch (error) {
    addCrashLog('CheckoutScreen', error);
  }
};

// ── Inside a service / utility ────────────────────────────────────────────────
export const loadUserProfile = async () => {
  try {
    const res = await AuthAxios.get('/profile');
    return res.data;
  } catch (error) {
    addCrashLog('UserService', error);
    throw error;
  }
};

API Reference

configureDebugger(options)

Call once before rendering FloatingDebugButton. All keys are optional. primary object set in DefaultThemePallet for background color . | Option | Type | Description | |---|---|---| | theme | object | Your theme palette (e.g. DefaultThemePallet) | | typography | object | Your typography styles (e.g. DefaultTypography) | | constants | object | Your spacing constants (e.g. stylesConstants) | | ArrowIcon | React component | SVG/component used as expand/collapse chevron | | FooterComponent | React component | Rendered at the bottom of log lists |

initApiDebugger(options)

| Option | Type | Default | Description | |---|---|---|---| | axiosInstances | any[] | [] | Axios instances to intercept | | interceptFetch | boolean | true | Patch global fetch | | navigationRef | React.Ref | null | NavigationContainer ref for screen names | | excludeUrls | string[] | [] | URL substrings to skip logging |

addEventLog(event, eventProps)

| Param | Type | Description | |---|---|---| | event | string | Event name e.g. 'button_tapped' | | eventProps | object | Any key-value data about the event |

addCrashLog(page, error)

| Param | Type | Description | |---|---|---| | page | string | Screen or component name where crash occurred | | error | Error | The caught Error object (name, message, stack are recorded) |

<FloatingDebugButton />

| Prop | Type | Default | Description | |---|---|---|---| | position | { bottom, right } | { bottom: 40, right: 20 } | Initial FAB position | | fabColor | string | from theme | FAB background colour override | | fabIcon | string | '🐞' | FAB icon/label override | | showEventLog | boolean | true | true/false | | showCrashLog | boolean | true | true/false |

Full exports

import {
  // UI
  FloatingDebugButton,

  // Config
  configureDebugger,

  // Init + helpers (most commonly used)
  initApiDebugger,
  addEventLog,
  addCrashLog,

  // Store
  addApiLog,
  getApiLogs,
  getEventLogs,
  getCrashLogs,
  clearApiLogs,
  setExcludeUrls,

  // Low-level
  setupAxiosInterceptor,
  setupFetchInterceptor,
  setNavigationRef,
} from 'rn-api-debugger';

Theme objects

use same object for your theme .
const DefaultThemePallet = {
  colors: {
    primary: '#colors-value',// main primary color
    alertColour_error: '#colors-value',// 500 api error 
    badgeGreen: '#colors-value',//success api badge color
    primaryLight: {
      primaryLight3: '#colors-value',// chip borderColor
      primaryLight4: '#colors-value',//borderColor
      primaryLight5: '#colors-value',//#ffffff
      primaryLight7: '#colors-value',// FAB BG Color
    },
    tertiary_2_Light: {
      tertiary_2_Light3: '#colors-value',//success badge borderColor
      tertiary_2_Light5: '#colors-value',//success badge backgroundColor
    },
    neutralDark: {
      neutralDark2: '#colors-value',//header text color
      neutralDark3: '#colors-value',//searchInput text color
      neutralDark5: '#colors-value',//filterChipText color
    },
    neutralLight: {
      neutralLight1: '#colors-value',//footer content text color
      neutralLight2: '#colors-value',//placeholderTextColor & chip borderColor
      neutralLight4: '#colors-value',//JSON LOG backgroundColor
      neutralLight5: '#FFFFFF',
    },
  },
  textColors: {
    primary: 'black',
    secondary: 'white',
    tertiary: '#colors-value',
  },
  fonts: {
    primary: {
      light: 'Manrope-Light',
      regular: 'Manrope-Regular',
      medium: 'Manrope-Medium',
      semiBold: 'Manrope-SemiBold',
      bold: 'Manrope-Bold',
    },
    secondary: '',
    tertiary: '',
  },
}
configureDebugger({
  theme:           DefaultThemePallet,
  typography:      DefaultTypography,
  constants:       stylesConstants,
  ArrowIcon:       SVGDownArrow,
  FooterComponent: FooterComponent,
});

## License

MIT
Asim Abbasi