react-native-debug-toolkit 0.1.1

package/lib/features/NetworkFeature.js

@@ -0,0 +1,330 @@
+import React from 'react'
+
+class NetworkFeature {
+  static instance = null
+  static MAX_LOGS = 100
+
+  constructor() {
+    if (NetworkFeature.instance) {
+      return NetworkFeature.instance
+    }
+
+    this.logs = []
+    this.pendingAxiosRequests = new Map()
+    this.originalFetch = null
+
+    NetworkFeature.instance = this
+  }
+
+  setup() {
+    if (!__DEV__) {
+      return
+    }
+
+    // this._interceptFetch()
+    return this
+  }
+
+  getData() {
+    return this.logs
+  }
+
+  cleanup() {
+    if (this.originalFetch) {
+      global.fetch = this.originalFetch
+      this.originalFetch = null
+    }
+
+    this.logs = []
+    this.pendingAxiosRequests.clear()
+  }
+
+  setupAxiosInterceptors(axiosInstance) {
+    if (!__DEV__) {
+      return
+    }
+
+    axiosInstance.interceptors.request.use(
+      (config) => {
+        // Generate a unique ID if one doesn't exist
+        if (!config.headers) {
+          config.headers = {}
+        }
+
+        if (!config.headers['X-Request-Id']) {
+          config.headers['X-Request-Id'] =
+            Date.now().toString() + Math.random().toString(36).substring(2, 10)
+        }
+
+        const trackId = config.headers['X-Request-Id']
+        this.pendingAxiosRequests.set(trackId, {
+          timestamp: new Date(),
+          startTime: Date.now(),
+        })
+
+        return config
+      },
+      (error) => {
+        this.logAxiosError(error)
+        return Promise.reject(error)
+      },
+    )
+
+    axiosInstance.interceptors.response.use(
+      (response) => {
+        this.logAxiosResponse(response)
+        return response
+      },
+      (error) => {
+        this.logAxiosError(error)
+        return Promise.reject(error)
+      },
+    )
+  }
+
+  logAxiosResponse(response) {
+    if (!response || !response.config || !response.config.headers) {
+      return
+    }
+
+    const trackId = response.config.headers['X-Request-Id']
+    const pendingRequest = this.pendingAxiosRequests.get(trackId)
+
+    if (!pendingRequest) {
+      return
+    }
+
+    if (this.logs.length >= NetworkFeature.MAX_LOGS) {
+      this.logs.shift()
+    }
+
+    // Calculate duration
+    const duration = Date.now() - pendingRequest.startTime
+
+    const logEntry = {
+      timestamp: pendingRequest.timestamp,
+      duration: Math.round(duration),
+      request: {
+        url: `${response.config.baseURL || ''}${response.config.url}`,
+        method: response.config.method?.toUpperCase() || 'GET',
+        headers: response.config.headers,
+        body: response.config.data || response.config.params,
+      },
+      response: {
+        status: response.status,
+        statusText: response.statusText,
+        headers: response.headers,
+      },
+    }
+
+    if (response.data && typeof response.data === 'object') {
+      logEntry.response.success = response.data.success !== false
+      logEntry.response.data = response.data
+    } else {
+      logEntry.response.success =
+        response.status >= 200 && response.status < 300
+
+      if (response.data) {
+        logEntry.response.data = response.data
+      }
+    }
+
+    this.logs.push(logEntry)
+    this.pendingAxiosRequests.delete(trackId)
+  }
+
+  logAxiosError(error) {
+    if (!error.config) {
+      return
+    }
+
+    if (!error.config.headers) {
+      error.config.headers = {}
+    }
+
+    const trackId = error.config.headers['X-Request-Id']
+    const pendingRequest = this.pendingAxiosRequests.get(trackId)
+
+    const startTime = pendingRequest
+      ? pendingRequest.startTime
+      : Date.now() - 100
+
+    if (this.logs.length >= NetworkFeature.MAX_LOGS) {
+      this.logs.shift()
+    }
+
+    const duration = Date.now() - startTime
+
+    const logEntry = {
+      timestamp: pendingRequest ? pendingRequest.timestamp : new Date(),
+      duration: Math.round(duration),
+      request: {
+        url: `${error.config.baseURL || ''}${error.config.url}`,
+        method: error.config.method?.toUpperCase() || 'GET',
+        headers: error.config.headers,
+        body: error.config.data || error.config.params,
+      },
+      error: error.message,
+      success: false,
+    }
+
+    if (error.response && error.response.data) {
+      logEntry.response = {
+        status: error.response.status,
+        statusText: error.response.statusText,
+        headers: error.response.headers,
+        data: error.response.data,
+        success: false,
+      }
+    }
+
+    this.logs.push(logEntry)
+    this.pendingAxiosRequests.delete(trackId)
+  }
+
+  _interceptFetch() {
+    if (!__DEV__) {
+      return
+    }
+
+    this.originalFetch = global.fetch
+
+    global.fetch = async (...args) => {
+      const request = args[0]
+      const options = args[1] || {}
+      const startTime = Date.now()
+
+      try {
+        const response = await this.originalFetch(...args)
+        this._logFetchResponse(request, options, response.clone(), startTime)
+        return response
+      } catch (error) {
+        this._logFetchError(request, options, error, startTime)
+        throw error
+      }
+    }
+  }
+
+  _logFetchResponse(request, options, response, startTime) {
+    if (this.logs.length >= NetworkFeature.MAX_LOGS) {
+      this.logs.shift()
+    }
+
+    const duration = Date.now() - startTime
+    const requestUrl = typeof request === 'string' ? request : request.url
+
+    const commonData = {
+      timestamp: new Date(),
+      duration: Math.round(duration),
+      request: {
+        url: requestUrl,
+        method: options.method || 'GET',
+        headers: options.headers || {},
+        body: options.body,
+      },
+    }
+
+    // Try to parse JSON response
+    response
+      .text()
+      .then((text) => {
+        let responseData
+        let success = response.status >= 200 && response.status < 300
+
+        try {
+          // Try to parse as JSON
+          if (text) {
+            responseData = JSON.parse(text)
+
+            // Use API success flag if available
+            if (responseData && typeof responseData.success !== 'undefined') {
+              success = !!responseData.success
+            }
+          }
+        } catch (e) {
+          // Not JSON, use text response
+          responseData = text
+        }
+
+        const logEntry = {
+          ...commonData,
+          response: {
+            status: response.status,
+            statusText: response.statusText,
+            headers: this._headersToObject(response.headers),
+            data: responseData,
+            success: success,
+          },
+        }
+
+        this.logs.push(logEntry)
+      })
+      .catch((err) => {
+        // Fallback for when we can't read the response body
+        const logEntry = {
+          ...commonData,
+          response: {
+            status: response.status,
+            statusText: response.statusText,
+            headers: this._headersToObject(response.headers),
+            success: response.status >= 200 && response.status < 300,
+          },
+        }
+
+        this.logs.push(logEntry)
+      })
+  }
+
+  _logFetchError(request, options, error, startTime) {
+    if (this.logs.length >= NetworkFeature.MAX_LOGS) {
+      this.logs.shift()
+    }
+
+    const duration = Date.now() - startTime
+
+    this.logs.push({
+      timestamp: new Date(),
+      duration: Math.round(duration),
+      request: {
+        url: typeof request === 'string' ? request : request.url,
+        method: options.method || 'GET',
+        headers: options.headers || {},
+        body: options.body,
+      },
+      error: error.message,
+      success: false,
+    })
+  }
+
+  // Utility to convert Headers object to plain object
+  _headersToObject(headers) {
+    const result = {}
+
+    if (headers && typeof headers.forEach === 'function') {
+      headers.forEach((value, key) => {
+        result[key] = value
+      })
+    } else if (headers) {
+      // Fallback for non-standard headers object
+      Object.keys(headers).forEach((key) => {
+        result[key] = headers[key]
+      })
+    }
+
+    return result
+  }
+}
+
+export const createNetworkFeature = () => {
+  const feature = new NetworkFeature()
+
+  return {
+    name: 'network',
+    label: 'Network Logs',
+    setup: () => feature.setup(),
+    getData: () => feature.getData(),
+    cleanup: () => feature.cleanup(),
+    setupAxiosInterceptors: (axiosInstance) =>
+      feature.setupAxiosInterceptors(axiosInstance),
+  }
+}

package/lib/index.js

@@ -0,0 +1,6 @@
+import DebugToolKit from './DebugToolKit'
+import { createNetworkFeature } from './features/NetworkFeature'
+
+export { DebugToolKit, createNetworkFeature }
+
+export default DebugToolKit

package/lib/utils/DebugConst.js

@@ -0,0 +1,22 @@
+import { Dimensions } from 'react-native';
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+
+export const IconRadius = 50;
+export const PanelWidth = screenWidth * 0.85;
+export const PanelHeight = screenHeight * 0.85;
+
+export const DebugColors = {
+    white: '#FFFFFF',
+    blue: '#007AFF',
+    text: '#000000',
+    border: '#CCCCCC',
+    background: '#F5F5F5',
+    success: '#4CD964',
+    error: '#FF3B30',
+    warning: '#FF9500'
+};
+
+export const DebugImgs = {
+    iconLink: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVGhD7ZgxDoMwDEV9/xvQtReoGBASYmFhYmNiYmNhYWJiQQIJqUh8y05wlAYw+T/pD5Dg9xwnhPR6vV6v1+v1er3eGvuOb7yIhxEQvjAC4hRGQJzGCIhLGAFxGSMgbmEExC2MgLiFERC3MALiFkZA3MIIiFsYAXELIyBuYQTELYyAuIURELcwAuIWRkDcwgiIWxgBcQsjIG5hBMQtjIC4hREQtzAC4hZGQNzCCIhbGAFxCyMgbmEExC2MgLiFERC3MALiFkZA3MIIiFsYAXELIyBuYQTELYyAuIURELcwAuIWRkDcwgiIW/+PYBgfhPtL9WBrfKUAAAAASUVORK5CYII='
+};