refactor: rename DebuggerOverlay back to NetworkLoggerOverlay for backward compatibility

- Renamed component from DebuggerOverlay to NetworkLoggerOverlay
- Renamed interface from DebuggerOverlayProps to NetworkLoggerOverlayProps
- Renamed error class from DebuggerSetupError to NetworkLoggerSetupError
- Updated README to reflect component name change
- Updated example app import

Author: cmcWebCode40

README.md

@@ -109,15 +109,15 @@ export default function App() {
 
 ### 2. Full Setup (HTTP + WebSocket)
 
-Use `DebuggerOverlay` with `enableWebSocket={true}` for the unified tabbed interface.
+Use `NetworkLoggerOverlay` with `enableWebSocket={true}` for the unified tabbed interface.
 
 ```tsx
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import { 
   networkLogger, 
   webSocketLogger, 
-  DebuggerOverlay 
+  NetworkLoggerOverlay 
 } from 'react-native-api-debugger';
 
 export default function App() {
@@ -133,7 +133,7 @@ export default function App() {
     <View style={{ flex: 1 }}>
       {/* Your app content */}
 
-      <DebuggerOverlay
+      <NetworkLoggerOverlay
         networkLogger={networkLogger}
         webSocketLogger={webSocketLogger}
         enableWebSocket={true}
@@ -153,7 +153,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { 
   networkLogger, 
   webSocketLogger, 
-  DebuggerOverlay 
+  NetworkLoggerOverlay 
 } from 'react-native-api-debugger';
 
 export default function App() {
@@ -166,7 +166,7 @@ export default function App() {
     <GestureHandlerRootView style={{ flex: 1 }}>
       {/* Your app content */}
 
-      <DebuggerOverlay
+      <NetworkLoggerOverlay
         networkLogger={networkLogger}
         webSocketLogger={webSocketLogger}
         enableWebSocket={true}
@@ -180,7 +180,7 @@ export default function App() {
 ### 4. Full Featured Setup
 
 ```tsx
-<DebuggerOverlay
+<NetworkLoggerOverlay
   networkLogger={networkLogger}
   webSocketLogger={webSocketLogger}
   enableWebSocket={true}
@@ -385,7 +385,7 @@ webSocketLogger.restoreInterceptor();
 
 ## API Reference
 
-### DebuggerOverlay Props
+### NetworkLoggerOverlay Props
 
 The unified overlay component with HTTP and optional WebSocket tabs.
 
@@ -543,11 +543,11 @@ useEffect(() => {
 
 Ensure you have:
 1. Called `webSocketLogger.setupInterceptor()` before any WebSocket connections
-2. Set `enableWebSocket={true}` on the DebuggerOverlay
+2. Set `enableWebSocket={true}` on the NetworkLoggerOverlay
 3. Passed the `webSocketLogger` prop
 
 ```tsx
-<DebuggerOverlay
+<NetworkLoggerOverlay
   networkLogger={networkLogger}
   webSocketLogger={webSocketLogger}
   enableWebSocket={true}  // Required to show WebSocket tab

example/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, SafeAreaView, View } from 'react-native';
 import {
-  DebuggerOverlay,
+  NetworkLoggerOverlay,
   networkLogger,
   webSocketLogger,
 } from 'react-native-api-debugger';
@@ -54,7 +54,7 @@ const App: React.FC = () => {
           activeTab={activeTab}
           onTabPress={setActiveTab}
         />
-        <DebuggerOverlay
+        <NetworkLoggerOverlay
           draggable={true}
           enableDeviceShake={false}
           useCopyToClipboard={true}

src/features/http/DebuggerOverlay.tsx …c/features/http/NetworkLoggerOverlay.tsxsrc/features/http/DebuggerOverlay.tsx renamed to src/features/http/NetworkLoggerOverlay.tsx src/features/http/DebuggerOverlay.tsx renamed to src/features/http/NetworkLoggerOverlay.tsx

@@ -52,7 +52,7 @@ try {
 
 type ActiveTab = 'http' | 'websocket';
 
-interface DebuggerOverlayProps {
+interface NetworkLoggerOverlayProps {
   networkLogger: NetworkLogger;
   webSocketLogger?: IWebSocketLogger;
   enabled?: boolean;
@@ -66,10 +66,10 @@ interface DebuggerOverlayProps {
   onThemeChange?: (theme: ThemeMode) => void;
 }
 
-class DebuggerSetupError extends Error {
+class NetworkLoggerSetupError extends Error {
   constructor(message: string) {
     super(message);
-    this.name = 'DebuggerSetupError';
+    this.name = 'NetworkLoggerSetupError';
   }
 }
 
@@ -81,7 +81,7 @@ const STATUS_FILTERS: { key: StatusFilterKey; label: string }[] = [
   { key: 'serverError', label: '5xx' },
 ];
 
-export const DebuggerOverlay: React.FC<DebuggerOverlayProps> = ({
+export const NetworkLoggerOverlay: React.FC<NetworkLoggerOverlayProps> = ({
   draggable,
   networkLogger,
   webSocketLogger,
@@ -123,7 +123,7 @@ export const DebuggerOverlay: React.FC<DebuggerOverlayProps> = ({
   useEffect(() => {
     if (enabled && !__DEV__) {
       console.warn(
-        '[DebuggerOverlay] Warning: Debugger is enabled in production mode. ' +
+        '[NetworkLoggerOverlay] Warning: Debugger is enabled in production mode. ' +
           'This may expose sensitive data. Set enabled={false} or remove the prop to disable in production.'
       );
     }
@@ -134,8 +134,8 @@ export const DebuggerOverlay: React.FC<DebuggerOverlayProps> = ({
 
     // Validate HTTP interceptor setup
     if (!networkLogger.isSetup()) {
-      throw new DebuggerSetupError(
-        '[DebuggerOverlay] HTTP interceptor not initialized.\n\n' +
+      throw new NetworkLoggerSetupError(
+        '[NetworkLoggerOverlay] HTTP interceptor not initialized.\n\n' +
           'Please call networkLogger.setupInterceptor() before rendering DebuggerOverlay.\n\n' +
           'Example:\n' +
           '  useEffect(() => {\n' +
@@ -148,8 +148,8 @@ export const DebuggerOverlay: React.FC<DebuggerOverlayProps> = ({
     // Validate WebSocket interceptor setup if enabled
     if (enableWebSocket) {
       if (!webSocketLogger) {
-        throw new DebuggerSetupError(
-          '[DebuggerOverlay] WebSocket debugging is enabled but webSocketLogger prop is missing.\n\n' +
+        throw new NetworkLoggerSetupError(
+          '[NetworkLoggerOverlay] WebSocket debugging is enabled but webSocketLogger prop is missing.\n\n' +
             'Please pass the webSocketLogger prop when enableWebSocket={true}.\n\n' +
             'Example:\n' +
             '  import { webSocketLogger, DebuggerOverlay } from "react-native-api-debugger";\n\n' +
@@ -162,8 +162,8 @@ export const DebuggerOverlay: React.FC<DebuggerOverlayProps> = ({
       }
 
       if (!webSocketLogger.isSetup()) {
-        throw new DebuggerSetupError(
-          '[DebuggerOverlay] WebSocket interceptor not initialized.\n\n' +
+        throw new NetworkLoggerSetupError(
+          '[NetworkLoggerOverlay] WebSocket interceptor not initialized.\n\n' +
             'Please call webSocketLogger.setupInterceptor() before rendering DebuggerOverlay with enableWebSocket={true}.\n\n' +
             'Example:\n' +
             '  useEffect(() => {\n' +
@@ -181,8 +181,8 @@ export const DebuggerOverlay: React.FC<DebuggerOverlayProps> = ({
       : undefined;
 
     if (enableDeviceShake && !RNShake) {
-      throw new DebuggerSetupError(
-        '[DebuggerOverlay] react-native-shake is required for enableDeviceShake but module is not installed.\n\n' +
+      throw new NetworkLoggerSetupError(
+        '[NetworkLoggerOverlay] react-native-shake is required for enableDeviceShake but module is not installed.\n\n' +
           'Please install it with:\n' +
           '  npm install react-native-shake\n\n' +
           'Or disable device shake:\n' +
@@ -957,4 +957,4 @@ const staticStyles = {
   } as ViewStyle,
 };
 
-export type { DebuggerOverlayProps };
+export type { NetworkLoggerOverlayProps };

src/features/http/index.ts

@@ -1,3 +1,3 @@
-export * from './DebuggerOverlay';
+export * from './NetworkLoggerOverlay';
 export { default as NetworkLogItem } from './NetworkLogItem';
 export type { NetworkLogItemProps } from './NetworkLogItem';