react-native-xenon 0.1.0 → 0.2.1

package/lib/typescript/module/src/ui/components/items/ConsolePanelItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConsolePanelItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/ConsolePanelItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,UAAU,qBAAsB,SAAQ,UAAU;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAQxF"}
+{"version":3,"file":"ConsolePanelItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/ConsolePanelItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,UAAU,qBAAsB,SAAQ,UAAU;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAQxF"}

package/lib/typescript/module/src/ui/components/items/DebuggerHeaderItem.d.ts

@@ -5,6 +5,6 @@ interface DebuggerHeaderItemProps {
     isActive?: boolean;
     onPress: () => void;
 }
-export default function DebuggerHeaderItem(props: DebuggerHeaderItemProps): import("react/jsx-runtime").JSX.Element;
+export default function DebuggerHeaderItem({ content, isLabel, isActive, onPress, }: DebuggerHeaderItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DebuggerHeaderItem.d.ts.map

package/lib/typescript/module/src/ui/components/items/DebuggerHeaderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebuggerHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/DebuggerHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElG,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAuBxE"}
+{"version":3,"file":"DebuggerHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/DebuggerHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlG,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,uBAAuB,2CAuBzB"}

package/lib/typescript/module/src/ui/components/items/NetworkPanelItem.d.ts

@@ -1,10 +1,11 @@
-import type { HttpRequest, WebSocketRequest } from '../../../types';
+import type { HttpRequest, NetworkRequest } from '../../../types';
 interface NetworkPanelItemProps {
-    name: HttpRequest['url'] | WebSocketRequest['uri'];
     method?: HttpRequest['method'];
-    status?: HttpRequest['status'] | WebSocketRequest['status'];
+    name: NetworkRequest['url'];
+    duration?: NetworkRequest['duration'];
+    status?: NetworkRequest['status'];
     onPress: () => void;
 }
-export default function NetworkPanelItem({ name, status, method, onPress }: NetworkPanelItemProps): import("react/jsx-runtime").JSX.Element;
+export default function NetworkPanelItem({ method, name, duration, status, onPress, }: NetworkPanelItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=NetworkPanelItem.d.ts.map

package/lib/typescript/module/src/ui/components/items/NetworkPanelItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkPanelItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkPanelItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGpE,UAAU,qBAAqB;IAC7B,IAAI,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAoChG"}
+{"version":3,"file":"NetworkPanelItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkPanelItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAQlE,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,qBAAqB,2CA0CvB"}

package/lib/typescript/module/src/ui/components/items/NetworkRequestDetailsHeaderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkRequestDetailsHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkRequestDetailsHeaderItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,UAAU,oCAAoC;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAK,EACL,OAAO,GACR,EAAE,oCAAoC,kDAatC"}
+{"version":3,"file":"NetworkRequestDetailsHeaderItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkRequestDetailsHeaderItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,UAAU,oCAAoC;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,+BAA+B,CAAC,EACtD,OAAO,EACP,IAAI,EACJ,UAAU,EACV,KAAK,EACL,OAAO,GACR,EAAE,oCAAoC,kDAatC"}

package/lib/typescript/module/src/ui/components/items/NetworkRequestDetailsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkRequestDetailsItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkRequestDetailsItem.tsx"],"names":[],"mappings":"AAEA,UAAU,8BAA8B;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,OAAO,EACP,UAAU,GACX,EAAE,8BAA8B,2CAkBhC"}
+{"version":3,"file":"NetworkRequestDetailsItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/items/NetworkRequestDetailsItem.tsx"],"names":[],"mappings":"AAGA,UAAU,8BAA8B;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,OAAO,EACP,UAAU,GACX,EAAE,8BAA8B,2CAkBhC"}

package/lib/typescript/module/src/ui/components/panels/ConsolePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAkCnC"}
+{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAkCnC"}

package/lib/typescript/module/src/ui/components/panels/NetworkPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA0CnC"}
+{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA2CnC"}

package/lib/typescript/module/src/utils.d.ts

@@ -2,8 +2,9 @@ import type { HttpRequest } from './types';
 export declare const limitChar: (value: any, limit?: number) => string;
 export declare const getHttpInterceptorId: () => string;
 export declare const keyValueToString: (key: string, value: any) => string;
-export declare const formatMethod: (method?: string) => string;
-export declare const formatStatusCode: (statusCode?: number) => string;
+export declare const formatRequestMethod: (method?: string) => string;
+export declare const formatRequestDuration: (duration?: number) => string;
+export declare const formatRequestStatusCode: (statusCode?: number) => string;
 export declare const formatLogMessage: (type: string, values: any[]) => string;
 export declare const convertToCurl: (method: HttpRequest["method"], url: HttpRequest["url"], headers: HttpRequest["requestHeaders"], body: HttpRequest["body"]) => string;
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/module/src/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,SAAS,UAAW,GAAG,2BAMnC,CAAC;AAEF,eAAO,MAAM,oBAAoB,cAIhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAS,MAAM,SAAS,GAAG,KAAG,MAC1B,CAAC;AAElC,eAAO,MAAM,YAAY,YAAa,MAAM,WAAoB,CAAC;AAEjE,eAAO,MAAM,gBAAgB,gBAAiB,MAAM,WAAiC,CAAC;AAEtF,eAAO,MAAM,gBAAgB,SAAU,MAAM,UAAU,GAAG,EAAE,WAQ3D,CAAC;AAEF,eAAO,MAAM,aAAa,WAChB,WAAW,CAAC,QAAQ,CAAC,OACxB,WAAW,CAAC,KAAK,CAAC,WACd,WAAW,CAAC,gBAAgB,CAAC,QAChC,WAAW,CAAC,MAAM,CAAC,WAgB1B,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,SAAS,UAAW,GAAG,2BAMnC,CAAC;AAEF,eAAO,MAAM,oBAAoB,cAIhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAS,MAAM,SAAS,GAAG,KAAG,MAC1B,CAAC;AAElC,eAAO,MAAM,mBAAmB,YAAa,MAAM,WAAoB,CAAC;AAExE,eAAO,MAAM,qBAAqB,cAAe,MAAM,WACf,CAAC;AAEzC,eAAO,MAAM,uBAAuB,gBAAiB,MAAM,WAAiC,CAAC;AAE7F,eAAO,MAAM,gBAAgB,SAAU,MAAM,UAAU,GAAG,EAAE,WAQ3D,CAAC;AAEF,eAAO,MAAM,aAAa,WAChB,WAAW,CAAC,QAAQ,CAAC,OACxB,WAAW,CAAC,KAAK,CAAC,WACd,WAAW,CAAC,gBAAgB,CAAC,QAChC,WAAW,CAAC,MAAM,CAAC,WAgB1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-xenon",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "A comprehensive tool for analyzing HTTP(S) requests and logs in React Native apps. Designed for use across all environments, it offers an intuitive interface for efficient debugging and issue resolution.",
   "source": "./src/index.ts",
   "main": "./lib/commonjs/index.js",

package/src/colors.ts

@@ -0,0 +1,8 @@
+const colors = Object.freeze({
+  black: '#000000',
+  red: '#ef4444',
+  gray: '#888888',
+  lightGray: '#AAAAAA',
+});
+
+export default colors;

package/src/contexts/MainContext.ts

@@ -1,10 +1,10 @@
 import { createContext, type MutableRefObject } from 'react';
 import type { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import type {
-  HttpRequest,
   DebuggerPanel,
   DebuggerPosition,
   DebuggerVisibility,
+  HttpRequest,
   LogMessage,
   SetState,
   WebSocketRequest,

package/src/global.d.ts

@@ -5,18 +5,18 @@ interface XMLHttpRequest {
 declare module 'react-native/Libraries/WebSocket/NativeWebSocketModule' {
   interface NativeWebSocketModule extends NativeModule {
     connect(
-      uri: string,
-      protocols?: string | string[] | null,
+      url: string,
+      protocols?: string | string[],
       options?: {
         headers: { [headerName: string]: string };
         [optionName: string]: any;
-      } | null,
+      },
       socketId: number,
     ): void;
 
     send(data: string, socketId: number): void;
 
-    sendBinary(data: string, socketId: number): void;
+    sendBinary(base64String: string, socketId: number): void;
 
     close(code: number, reason: string, socketId: number): void;
 

package/src/hooks/useConsoleInterceptor.ts

@@ -4,12 +4,10 @@ import { ConsoleInterceptor } from '../interceptors';
 import type { LogMessage } from '../types';
 
 interface ConsoleInterceptorParams {
-  autoEnabled?: boolean;
+  autoEnabled: boolean;
 }
 
-export default function useConsoleInterceptor(params: ConsoleInterceptorParams) {
-  const { autoEnabled = false } = params || {};
-
+export default function useConsoleInterceptor({ autoEnabled }: ConsoleInterceptorParams) {
   const [isInterceptorEnabled, setIsInterceptorEnabled] = useState(autoEnabled);
 
   const [logMessages, setLogMessages] = useImmer<LogMessage[]>([]);
@@ -18,10 +16,10 @@ export default function useConsoleInterceptor(params: ConsoleInterceptorParams)
     setLogMessages([]);
   };
 
-  const _isInterceptorEnabled = () => ConsoleInterceptor.instance.isInterceptorEnabled;
+  const isEnabled = () => ConsoleInterceptor.instance.isInterceptorEnabled;
 
   const enableInterception = useCallback(() => {
-    if (_isInterceptorEnabled()) return;
+    if (isEnabled()) return;
 
     ConsoleInterceptor.instance
       .setCallback((type, args) => {
@@ -35,7 +33,7 @@ export default function useConsoleInterceptor(params: ConsoleInterceptorParams)
   }, [setLogMessages]);
 
   const disableInterception = useCallback(() => {
-    if (!_isInterceptorEnabled()) return;
+    if (!isEnabled()) return;
 
     ConsoleInterceptor.instance.disableInterception();
 

package/src/hooks/useNetworkInterceptor.ts

@@ -1,7 +1,7 @@
-import { enableMapSet } from 'immer';
 import { useCallback, useEffect, useState } from 'react';
 import { useImmer } from 'use-immer';
 import { NETWORK_REQUEST_HEADER } from '../constants';
+import { FetchInterceptor, WebSocketInterceptor, XHRInterceptor } from '../interceptors';
 import {
   NetworkType,
   type HttpHeaderReceivedCallback,
@@ -21,25 +21,21 @@ import {
   type WebSocketSendCallback,
 } from '../types';
 import { keyValueToString } from '../utils';
-import { XHRInterceptor, FetchInterceptor, WebSocketInterceptor } from '../interceptors';
 
 interface NetworkInterceptorParams {
-  autoEnabled?: boolean;
+  autoEnabled: boolean;
 }
 
 type NetworkRequests<T> = Map<NonNullable<ID>, T>;
 
-enableMapSet();
-
 const initRequests = new Map<NonNullable<ID>, HttpRequest & WebSocketRequest>();
 
-export default function useNetworkInterceptor(params?: NetworkInterceptorParams) {
-  const { autoEnabled = false } = params || {};
+export default function useNetworkInterceptor({ autoEnabled }: NetworkInterceptorParams) {
   const [isInterceptorEnabled, setIsInterceptorEnabled] = useState(autoEnabled);
 
   const [networkRequests, setNetworkRequests] = useImmer(initRequests);
 
-  const _isInterceptorEnabled = () =>
+  const isEnabled = () =>
     XHRInterceptor.instance.isInterceptorEnabled &&
     FetchInterceptor.instance.isInterceptorEnabled &&
     WebSocketInterceptor.instance.isInterceptorEnabled;
@@ -116,6 +112,7 @@ export default function useNetworkInterceptor(params?: NetworkInterceptorParams)
       id,
       status,
       timeout,
+      duration,
       response,
       responseURL,
       responseType,
@@ -127,6 +124,7 @@ export default function useNetworkInterceptor(params?: NetworkInterceptorParams)
 
         draft.get(id)!.status = status;
         draft.get(id)!.timeout = timeout;
+        draft.get(id)!.duration = duration;
         draft.get(id)!.response = response;
         if (responseURL) draft.get(id)!.url = responseURL;
         draft.get(id)!.responseType = responseType;
@@ -151,12 +149,12 @@ export default function useNetworkInterceptor(params?: NetworkInterceptorParams)
   }, [setNetworkRequests]);
 
   const enableWebSocketInterception = useCallback(() => {
-    const connectCallback: WebSocketConnectCallback = (uri, protocols, options, socketId) => {
+    const connectCallback: WebSocketConnectCallback = (url, protocols, options, socketId) => {
       if (typeof socketId !== 'number') return;
 
       setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
         draft.set(`${socketId}`, {
-          uri,
+          url,
           type: NetworkType.WS,
           protocols,
           options,
@@ -186,7 +184,15 @@ export default function useNetworkInterceptor(params?: NetworkInterceptorParams)
       });
     };
 
-    const onOpenCallback: WebSocketOnOpenCallback = () => {};
+    const onOpenCallback: WebSocketOnOpenCallback = (socketId, duration) => {
+      if (typeof socketId !== 'number') return;
+
+      setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
+        if (!draft.get(`${socketId}`)) return draft;
+
+        draft.get(`${socketId}`)!.duration = duration;
+      });
+    };
 
     const onMessageCallback: WebSocketOnMessageCallback = (socketId, message) => {
       if (typeof socketId !== 'number') return;
@@ -231,7 +237,7 @@ export default function useNetworkInterceptor(params?: NetworkInterceptorParams)
   }, [setNetworkRequests]);
 
   const enableInterception = useCallback(() => {
-    if (_isInterceptorEnabled()) return;
+    if (isEnabled()) return;
 
     enableHttpInterceptions();
     enableWebSocketInterception();
@@ -239,7 +245,7 @@ export default function useNetworkInterceptor(params?: NetworkInterceptorParams)
   }, [enableHttpInterceptions, enableWebSocketInterception]);
 
   const disableInterception = useCallback(() => {
-    if (!_isInterceptorEnabled()) return;
+    if (!isEnabled()) return;
 
     XHRInterceptor.instance.disableInterception();
     FetchInterceptor.instance.disableInterception();

package/src/icons.ts

@@ -0,0 +1,9 @@
+const icons = Object.freeze({
+  code: require('./assets/icons/code.png'),
+  delete: require('./assets/icons/delete.png'),
+  hide: require('./assets/icons/hide.png'),
+  move: require('./assets/icons/move.png'),
+  record: require('./assets/icons/record.png'),
+});
+
+export default icons;

package/src/interceptors/ConsoleInterceptor.ts

@@ -13,7 +13,7 @@ const originalConsoleGroupEnd = console.groupEnd;
 const originalConsoleGroup = console.group;
 
 export default class ConsoleInterceptor extends Interceptor {
-  static instance = new ConsoleInterceptor();
+  static readonly instance = new ConsoleInterceptor();
 
   private constructor() {
     super();
@@ -67,10 +67,10 @@ export default class ConsoleInterceptor extends Interceptor {
       originalConsoleDebug.call(this, ...args);
     };
 
-    console.table = function (...args) {
+    console.table = function (...args: Parameters<typeof originalConsoleTable>) {
       callback?.('table', args);
 
-      originalConsoleTable.call(this, ...(args as Parameters<typeof originalConsoleTable>));
+      originalConsoleTable.call(this, ...args);
     };
 
     console.groupCollapsed = function (...args) {

package/src/interceptors/FetchInterceptor.ts

@@ -1,12 +1,12 @@
 import { NETWORK_REQUEST_HEADER } from '../constants';
 import { NetworkType } from '../types';
-import { keyValueToString, formatMethod, getHttpInterceptorId } from '../utils';
+import { formatRequestMethod, getHttpInterceptorId, keyValueToString } from '../utils';
 import HttpInterceptor from './HttpInterceptor';
 
 const originalFetch = global.fetch;
 
 export default class FetchInterceptor extends HttpInterceptor {
-  static instance = new FetchInterceptor();
+  static readonly instance = new FetchInterceptor();
 
   private constructor() {
     super();
@@ -33,7 +33,7 @@ export default class FetchInterceptor extends HttpInterceptor {
       const requestInit: RequestInit = { ...init, headers: requestHeaders };
 
       //#region open
-      const method = formatMethod(init?.method);
+      const method = formatRequestMethod(init?.method);
 
       let url: string;
 
@@ -76,11 +76,13 @@ export default class FetchInterceptor extends HttpInterceptor {
       //#endregion
 
       //#region send
+      const timeStart = Date.now();
       sendCallback?.(interceptionId, init?.body ?? null);
       //#endregion
 
       const response = await originalFetch.call(this, input, requestInit);
 
+      const timeEnd = Date.now();
       const clonedResponse = response.clone();
       const clonedResponseHeaders = clonedResponse.headers;
 
@@ -105,11 +107,13 @@ export default class FetchInterceptor extends HttpInterceptor {
 
       //#region response
       const responseBody: string | null = await clonedResponse.text().catch(() => null);
+      const duration = timeEnd - timeStart;
 
       responseCallback?.(
         interceptionId,
         clonedResponse.status,
         0,
+        duration,
         responseBody,
         clonedResponse.url,
         clonedResponse.type,

package/src/interceptors/Interceptor.ts

@@ -1,5 +1,13 @@
 export default abstract class Interceptor {
-  isInterceptorEnabled = false;
+  #isInterceptorEnabled = false;
+
+  get isInterceptorEnabled() {
+    return this.#isInterceptorEnabled;
+  }
+
+  protected set isInterceptorEnabled(value: boolean) {
+    this.#isInterceptorEnabled = value;
+  }
 
   abstract enableInterception(): void;
   abstract disableInterception(): void;

package/src/interceptors/WebSocketInterceptor.ts

@@ -17,7 +17,7 @@ const originalWebSocketSendBinary = NativeWebSocketModule.sendBinary;
 const originalWebSocketClose = NativeWebSocketModule.close;
 
 export default class WebSocketInterceptor extends NetworkInterceptor {
-  static instance = new WebSocketInterceptor();
+  static readonly instance = new WebSocketInterceptor();
 
   private constructor() {
     super();
@@ -92,6 +92,7 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
 
   private eventEmitter: NativeEventEmitter | null = null;
   private subscriptions: EmitterSubscription[] = [];
+  private readonly timeStart: Map<number, number> = new Map();
 
   private arrayBufferToString(data?: string) {
     try {
@@ -112,7 +113,12 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
 
     this.subscriptions = [
       this.eventEmitter.addListener('websocketOpen', ev => {
-        this.onOpenCallback?.(ev.id);
+        const timeStart = this.timeStart.get(ev.id);
+        const timeEnd = Date.now();
+        const duration = timeEnd - (timeStart ?? 0);
+        this.timeStart.delete(ev.id);
+
+        this.onOpenCallback?.(ev.id, duration);
       }),
       this.eventEmitter.addListener('websocketMessage', ev => {
         this.onMessageCallback?.(
@@ -145,9 +151,12 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
     const { connectCallback, sendCallback, closeCallback, arrayBufferToString } =
       this.getCallbacks();
 
+    const timeStart = this.timeStart;
     NativeWebSocketModule.connect = function (...args) {
       connectCallback?.(...args);
 
+      timeStart.set(args[3], Date.now());
+
       originalWebSocketConnect.call(this, ...args);
     };
 
@@ -157,10 +166,10 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
       originalWebSocketSend.call(this, ...args);
     };
 
-    NativeWebSocketModule.sendBinary = function (data, socketId) {
-      sendCallback?.(arrayBufferToString(data), socketId);
+    NativeWebSocketModule.sendBinary = function (base64String, socketId) {
+      sendCallback?.(arrayBufferToString(base64String), socketId);
 
-      originalWebSocketSendBinary.call(this, data, socketId);
+      originalWebSocketSendBinary.call(this, base64String, socketId);
     };
 
     NativeWebSocketModule.close = function (code, reason, socketId) {

package/src/interceptors/XHRInterceptor.ts

@@ -7,7 +7,7 @@ const originalXHRSend = XMLHttpRequest.prototype.send;
 const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
 
 export default class XHRInterceptor extends HttpInterceptor {
-  static instance = new XHRInterceptor();
+  static readonly instance = new XHRInterceptor();
 
   private constructor() {
     super();
@@ -43,6 +43,8 @@ export default class XHRInterceptor extends HttpInterceptor {
     XMLHttpRequest.prototype.send = function (data) {
       sendCallback?.(this._interceptionId, data);
 
+      const timeStart = Date.now();
+
       this.addEventListener?.('readystatechange', () => {
         if (!isInterceptorEnabled()) return;
 
@@ -66,10 +68,14 @@ export default class XHRInterceptor extends HttpInterceptor {
         }
 
         if (this.readyState === this.DONE) {
+          const timeEnd = Date.now();
+          const duration = timeEnd - timeStart;
+
           responseCallback?.(
             this._interceptionId,
             this.status,
             this.timeout,
+            duration,
             this.response,
             this.responseURL,
             this.responseType,

package/src/types/common.ts

@@ -14,7 +14,9 @@ export enum DebuggerPanel {
 export type ID = string | undefined;
 
 export interface NetworkRequest {
+  url: string;
   status?: number;
+  duration?: number;
 }
 
 export type DebuggerVisibility = 'hidden' | 'bubble' | 'panel';

package/src/types/http.ts

@@ -3,7 +3,6 @@ import type { ID, NetworkRequest, NetworkType } from './common';
 export interface HttpRequest extends NetworkRequest {
   type: NetworkType.Fetch | NetworkType.XHR;
   method: string;
-  url: string;
   requestHeaders?: Record<string, string>;
   requestHeadersString?: string;
   body?: any;
@@ -37,6 +36,7 @@ export type HttpResponseCallback =
       id: ID,
       status: number | undefined,
       timeout: number | undefined,
+      duration: number,
       response: any,
       responseURL: string | undefined,
       responseType: string | undefined,

package/src/types/index.ts

@@ -1,4 +1,4 @@
 export * from './common';
-export * from './http';
 export * from './console';
+export * from './http';
 export * from './websocket';

package/src/types/websocket.ts

@@ -2,12 +2,11 @@ import type { NetworkRequest, NetworkType } from './common';
 
 export interface WebSocketRequest extends NetworkRequest {
   type: NetworkType.WS;
-  uri: string;
-  protocols?: string | string[] | null;
+  protocols?: string | string[];
   options?: {
     headers: { [headerName: string]: string };
     [optionName: string]: any;
-  } | null;
+  };
   messages?: string;
   closeReason?: string;
   serverError?: { message?: string };
@@ -16,7 +15,7 @@ export interface WebSocketRequest extends NetworkRequest {
 
 export type WebSocketConnectCallback =
   | ((
-      uri: WebSocketRequest['uri'],
+      url: string,
       protocols?: WebSocketRequest['protocols'],
       options?: WebSocketRequest['options'],
       socketId?: number,
@@ -26,19 +25,15 @@ export type WebSocketConnectCallback =
 export type WebSocketSendCallback = ((data: string, socketId: number) => void) | null;
 
 export type WebSocketCloseCallback =
-  | ((
-      code: WebSocketRequest['status'],
-      reason: WebSocketRequest['closeReason'],
-      socketId: number,
-    ) => void)
+  | ((code: number, reason: string, socketId: number) => void)
   | null;
 
-export type WebSocketOnOpenCallback = ((socketId: number) => void) | null;
+export type WebSocketOnOpenCallback = ((socketId: number, duration: number) => void) | null;
 
 export type WebSocketOnMessageCallback = ((socketId: number, message: any) => void) | null;
 
 export type WebSocketOnErrorCallback =
-  | ((socketId: number, data: WebSocketRequest['serverError']) => void)
+  | ((socketId: number, error: WebSocketRequest['serverError']) => void)
   | null;
 
 export type WebSocketOnCloseCallback =