Feature/network logging (#26)

* ✨ add custom listeners and constants

* ✨ add responseObfuscationHandler and setRequestFilterPredicate

* ✨ add XMLHttpRequest network interceptor

* ✨ add setOnProgressForRequestHandler 

* ✨ add network log support for iOS

* 🐛 fix network logging disabled in ios, duration always 0, status code nil and responseHeaders not parsed as an NSDictionary


* 🐛 fix issue with XHR undefined and handle getting json response from blob

* 📝 change duration to be measured in ms instead of s

* 📝 Move all network logging APIs to a separate NetworkLogger module

* 🐛 add missing comma causing breaking iOS build

* ✨ Enable network logging by default

* ✨ Add typescript type defs for the NetworkLogger module

* 🔥 remove ios debug logs

* Add network logging guide to the README

* 📝 change name of API

Author: salmamali

README.md

@@ -197,6 +197,18 @@ export INSTABUG_APP_TOKEN="YOUR_APP_TOKEN"
 bash "../node_modules/instabug-reactnative/ios/upload_sourcemap.sh"
 ```
 
+## Network Logging
+
+Instabug network logging is enabled by default. It intercepts any requests performed with `fetch` or `XMLHttpRequest` and attaches them to the report that will be sent to the dashboard. To disable network logs:
+
+```javascript
+import { NetworkLogger } from 'instabug-reactnative';
+```
+
+```javascript
+NetworkLogger.setEnabled(false);
+```
+
 ## Documentation
 
 For more details about the supported APIs and how to use them, check our [**Documentation**](https://docs.instabug.com/docs/react-native-overview).

android/src/main/java/com/instabug/reactlibrary/RNInstabugReactnativeModule.java

@@ -544,7 +544,6 @@ public void run() {
         });
     }
 
-
     /**
      * Sets whether attachments in bug reporting and in-app messaging are enabled or not.
      *
@@ -1889,6 +1888,29 @@ public void setEmailFieldRequiredForFeatureRequests(boolean isEmailRequired, Rea
         }
     }
 
+    /**
+     * Extracts HTTP connection properties. Request method, Headers, Date, Url and Response code
+     *
+     * @param jsonObject the JSON object containing all HTTP connection properties
+     * @throws JSONException
+     */
+    @ReactMethod
+    public void networkLog(String jsonObject) throws JSONException {
+        NetworkLog networkLog = new NetworkLog();
+        String date = System.currentTimeMillis()+"";
+        networkLog.setDate(date);
+        JSONObject newJSONObject = new JSONObject(jsonObject);
+        networkLog.setUrl(newJSONObject.getString("url"));
+        networkLog.setRequest(newJSONObject.getString("requestBody"));
+        networkLog.setResponse(newJSONObject.getString("responseBody"));
+        networkLog.setMethod(newJSONObject.getString("method"));
+        networkLog.setResponseCode(newJSONObject.getInt("responseCode"));
+        networkLog.setRequestHeaders(newJSONObject.getString("requestHeaders"));
+        networkLog.setResponseHeaders(newJSONObject.getString("responseHeaders"));
+        networkLog.insert();
+    }
+
+
     @ReactMethod
     public void setSecureViews(ReadableArray ids) {
         int[] arrayOfIds = new int[ids.size()];

index.d.ts

@@ -112,6 +112,12 @@ export namespace Surveys {
     ): void;
   function setShouldShowWelcomeScreen(shouldShowWelcomeScreen: boolean): void;
 }
+export namespace NetworkLogger {
+  function setEnabled(isEnabled: boolean): void;
+  function setNetworkDataObfuscationHandler(handler: () => void): void;
+  function setRequestFilterExpression(expression: string): void;
+  function setProgressHandlerForRequest(handler: () => void): void;
+}
 export function startWithToken(
   token: string,
   invocationEvent: invocationEvent[]

index.js

@@ -14,8 +14,12 @@ import FeatureRequests from './modules/FeatureRequests';
 import Chats from './modules/Chats';
 import Replies from './modules/Replies';
 import CrashReporting from './modules/CrashReporting';
+import NetworkLogger from './modules/NetworkLogger';
 
 InstabugUtils.captureJsErrors();
+NetworkLogger.setEnabled(true);
+
+
 
 /**
  * Instabug
@@ -973,7 +977,8 @@ export {
   FeatureRequests,
   Chats,
   Replies,
-  CrashReporting
+  CrashReporting,
+  NetworkLogger
 };
 
 export default InstabugModule;

ios/RNInstabug/InstabugReactBridge.m

@@ -27,6 +27,7 @@ @implementation InstabugReactBridge
              @"IBGWillShowSurvey",
              @"IBGDidDismissSurvey",
              @"IBGDidSelectPromptOptionHandler",
+             @"IBGSetNetworkDataObfuscationHandler",
              @"IBGOnNewReplyReceivedCallback"
              ];
 }
@@ -46,13 +47,15 @@ - (dispatch_queue_t)methodQueue {
     [Instabug startWithToken:token invocationEvents:invocationEvents];
     RCTAddLogFunction(InstabugReactLogFunction);
     RCTSetLogThreshold(RCTLogLevelInfo);
-    IBGNetworkLogger.enabled = NO;
+    
     SEL setCrossPlatformSEL = NSSelectorFromString(@"setCrossPlatform:");
     if ([[Instabug class] respondsToSelector:setCrossPlatformSEL]) {
         [[Instabug class] performSelector:setCrossPlatformSEL withObject:@(true)];
     }
 
+    IBGNetworkLogger.enabled = YES;
     [self setBaseUrlForDeprecationLogs];
+
 }
 
 RCT_EXPORT_METHOD(callPrivateApi:(NSString *)apiName apiParam: (NSString *) param) {
@@ -530,11 +533,44 @@ - (dispatch_queue_t)methodQueue {
     callback(@[[NSNumber numberWithBool:result]]);
 }
 
+RCT_EXPORT_METHOD(networkLog:(NSDictionary *) networkData) {
+    NSString* url = networkData[@"url"];
+    NSString* method = networkData[@"method"];
+    NSString* requestBody = networkData[@"requestBody"];
+    NSString* responseBody = networkData[@"responseBody"];
+    int32_t responseCode = [networkData[@"responseCode"] integerValue];
+    NSDictionary* requestHeaders = networkData[@"requestHeaders"];
+    NSDictionary* responseHeaders = networkData[@"responseHeaders"];
+    NSString* contentType = networkData[@"contentType"];
+    double duration = [networkData[@"duration"] doubleValue];
+    
+    SEL networkLogSEL = NSSelectorFromString(@"addNetworkLogWithUrl:method:requestBody:responseBody:responseCode:requestHeaders:responseHeaders:contentType:duration:");
+    
+    if([[IBGNetworkLogger class] respondsToSelector:networkLogSEL]) {
+        NSInvocation *inv = [NSInvocation invocationWithMethodSignature:[[IBGNetworkLogger class] methodSignatureForSelector:networkLogSEL]];
+        [inv setSelector:networkLogSEL];
+        [inv setTarget:[IBGNetworkLogger class]];
+        
+        [inv setArgument:&(url) atIndex:2];
+        [inv setArgument:&(method) atIndex:3];
+        [inv setArgument:&(requestBody) atIndex:4];
+        [inv setArgument:&(responseBody) atIndex:5];
+        [inv setArgument:&(responseCode) atIndex:6];
+        [inv setArgument:&(requestHeaders) atIndex:7];
+        [inv setArgument:&(responseHeaders) atIndex:8];
+        [inv setArgument:&(contentType) atIndex:9];
+        [inv setArgument:&(duration) atIndex:10];
+        
+        [inv invoke];
+    }
+}
+
 RCT_EXPORT_METHOD(hideView: (nonnull NSNumber *)reactTag) {
     UIView* view = [self.bridge.uiManager viewForReactTag:reactTag];
     view.instabug_privateView = true;
 
 }
+
 RCT_EXPORT_METHOD(show) {
     [Instabug show];
 }
@@ -589,6 +625,7 @@ - (dispatch_queue_t)methodQueue {
     } else {
         IBGReplies.didReceiveReplyHandler = nil;
     }
+
 }
 
 - (NSDictionary *)constantsToExport

modules/NetworkLogger.js

@@ -0,0 +1,88 @@
+import { NativeModules, Platform } from 'react-native';
+import xhr from '../utils/XhrNetworkInterceptor';
+import IBGEventEmitter from '../utils/IBGEventEmitter.js';
+import InstabugConstants from '../utils/InstabugConstants';
+let { Instabug } = NativeModules;
+
+
+var _networkDataObfuscationHandlerSet = false;
+var _requestFilterExpression = false;
+
+/**
+ * NetworkLogger
+ * @exports NetworkLogger
+ */
+export default {
+  /**
+   * Sets whether network logs should be sent with bug reports.
+   * It is enabled by default.
+   * @param {boolean} isEnabled
+   */
+  setEnabled(isEnabled) {
+    if (isEnabled) {
+      xhr.enableInterception();
+      xhr.setOnDoneCallback(network => {
+        if (!eval(_requestFilterExpression)) {
+          if (_networkDataObfuscationHandlerSet) {
+            IBGEventEmitter.emit(
+              InstabugConstants.NETWORK_DATA_OBFUSCATION_HANDLER_EVENT,
+              network
+            );
+          } else {
+            if (Platform.OS === 'android') {
+              Instabug.networkLog(JSON.stringify(network));
+            } else {
+              Instabug.networkLog(network);
+            }
+          }
+        }
+      });
+    } else {
+      xhr.disableInterception();
+    }
+  },
+
+  /**
+   * Obfuscates any response data.
+   * @param {function} handler
+   */
+  setNetworkDataObfuscationHandler(handler) {
+    if (handler !== null) {
+      _networkDataObfuscationHandlerSet = true;
+    }
+    IBGEventEmitter.addListener(
+      InstabugConstants.NETWORK_DATA_OBFUSCATION_HANDLER_EVENT,
+      async data => {
+        try {
+          const newData = await handler(data);
+          if (Platform.OS === 'android') {
+            Instabug.networkLog(JSON.stringify(newData));
+          } else {
+            Instabug.networkLog(newData);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    );
+  },
+
+
+  /**
+   * Omit requests from being logged based on either their request or response details
+   * @param {string} expression
+   */
+  setRequestFilterExpression(expression) {
+    _requestFilterExpression = expression;
+  },
+
+  /**
+   * Returns progress in terms of totalBytesSent and totalBytesExpectedToSend a network request.
+   * @param {function} handler
+   */
+  setProgressHandlerForRequest(handler) {
+    xhr.setOnProgressCallback(handler);
+  },
+
+ 
+};

utils/InstabugConstants.js

@@ -0,0 +1,3 @@
+export default {
+    NETWORK_DATA_OBFUSCATION_HANDLER_EVENT: 'IBGSetNetworkDataObfuscationHandler',
+};