feat: capture client error in the network interceptor (#1257)

* feat/support-capture-client-error-in-xhr-requests
---------

Co-authored-by: Abdelhamid Nasser <[email protected]>
Co-authored-by: Ahmed Elrefaey <[email protected]>
Co-authored-by: kholood <[email protected]>

Author: 4 people

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 
 - Add support for Expo Router navigation tracking ([#1270](https://github.com/Instabug/Instabug-React-Native/pull/1270)).
+- Enhance the network interceptor to capture more client error messages ([#1257](https://github.com/Instabug/Instabug-React-Native/pull/1257)).
 
 ### Fixed
 

examples/default/package.json

@@ -16,6 +16,7 @@
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "graphql": "^16.8.1",
+    "axios": "^1.7.4",
     "graphql-request": "^6.1.0",
     "instabug-reactnative": "link:../..",
     "instabug-reactnative-ndk": "github:https://github.com/Instabug/Instabug-React-Native-NDK",

examples/default/src/screens/apm/NetworkScreen.tsx

@@ -10,6 +10,7 @@ import { CustomButton } from '../../components/CustomButton';
 import type { HomeStackParamList } from '../../navigation/HomeStack';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { ListTile } from '../../components/ListTile';
+import axios from 'axios';
 
 export const NetworkScreen: React.FC<
   NativeStackScreenProps<HomeStackParamList, 'NetworkTraces'>
@@ -50,6 +51,32 @@ export const NetworkScreen: React.FC<
     }
   }
 
+  async function sendRequestToUrlUsingAxios() {
+    let urlToSend = '';
+
+    if (endpointUrl.trim() !== '') {
+      urlToSend = endpointUrl;
+      console.log('Sending request to: ', endpointUrl);
+    } else {
+      // Use json placeholder URL as a default if endpointUrl is empty
+      console.log('sending request to default json placeholder');
+      urlToSend = defaultRequestUrl;
+    }
+
+    try {
+      // Perform the request using the urlToSend
+      const response = await axios.get(urlToSend);
+      // Format the JSON response for better logging
+      const formattedData = JSON.stringify(response.data, null, 2);
+
+      // Log the formatted response
+      console.log('Response:', formattedData);
+    } catch (error) {
+      // Handle errors appropriately
+      console.error('Error:', error);
+    }
+  }
+
   const fetchGraphQlData = async () => {
     const document = gql`
       query {
@@ -80,6 +107,11 @@ export const NetworkScreen: React.FC<
               value={endpointUrl}
             />
             <CustomButton onPress={sendRequestToUrl} title="Send Request To Url" />
+            <CustomButton
+              onPress={sendRequestToUrlUsingAxios}
+              title="Send Request To Url Using Axios"
+            />
+
             <CustomButton onPress={() => refetch} title="Reload GraphQL" />
             <View>
               {isLoading && <Text>Loading...</Text>}

examples/default/yarn.lock

@@ -3239,11 +3239,25 @@ async@^3.2.2:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 at-least-node@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
+axios@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.4.tgz#4c8ded1b43683c8dd362973c393f3ede24052aa2"
+  integrity sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
@@ -3729,6 +3743,13 @@ colorette@^1.0.7:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
   integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 command-exists@^1.2.8:
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.9.tgz#c50725af3808c8ab0260fd60b01fbfa25b954f69"
@@ -3941,6 +3962,11 @@ define-data-property@^1.1.1:
     gopd "^1.0.1"
     has-property-descriptors "^1.0.0"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 denodeify@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/denodeify/-/denodeify-1.2.1.tgz#3a36287f5034e699e7577901052c2e6c94251631"
@@ -4329,6 +4355,20 @@ flow-parser@^0.206.0:
   resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.206.0.tgz#f4f794f8026535278393308e01ea72f31000bfef"
   integrity sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w==
 
+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 [email protected]:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -4650,7 +4690,8 @@ inline-style-prefixer@^6.0.1:
   resolved "https://codeload.github.com/Instabug/Instabug-React-Native-NDK/tar.gz/3b0bac281253133852d32f52aa50cc805dd0b570"
 
 "instabug-reactnative@link:../..":
-  version "13.0.5"
+  version "0.0.0"
+  uid ""
 
 intl-messageformat@^10.1.0:
   version "10.5.0"
@@ -6105,7 +6146,7 @@ [email protected], "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.27, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -6664,6 +6705,11 @@ proper-lockfile@^3.0.2:
     retry "^0.12.0"
     signal-exit "^3.0.2"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"

src/utils/XhrNetworkInterceptor.ts

@@ -72,7 +72,8 @@ export default {
     originalXHROpen = XMLHttpRequest.prototype.open;
     originalXHRSend = XMLHttpRequest.prototype.send;
     originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
-
+    // An error code that signifies an issue with the RN client.
+    const clientErrorCode = 9876;
     XMLHttpRequest.prototype.open = function (method, url, ...args) {
       _reset();
       network.url = url;
@@ -145,14 +146,24 @@ export default {
 
             // @ts-ignore
             if (this._hasError) {
-              cloneNetwork.errorCode = 0;
+              cloneNetwork.errorCode = clientErrorCode;
               cloneNetwork.errorDomain = 'ClientError';
 
               // @ts-ignore
               const _response = this._response;
               cloneNetwork.requestBody =
                 typeof _response === 'string' ? _response : JSON.stringify(_response);
               cloneNetwork.responseBody = '';
+
+              // Detect a more descriptive error message.
+              if (typeof _response === 'string' && _response.length > 0) {
+                cloneNetwork.errorDomain = _response;
+              }
+
+              // @ts-ignore
+            } else if (this._timedOut) {
+              cloneNetwork.errorCode = clientErrorCode;
+              cloneNetwork.errorDomain = 'TimeOutError';
             }
 
             if (this.response) {
@@ -162,6 +173,9 @@ export default {
               } else if (['text', '', 'json'].includes(this.responseType)) {
                 cloneNetwork.responseBody = JSON.stringify(this.response);
               }
+            } else {
+              cloneNetwork.responseBody = '';
+              cloneNetwork.contentType = 'text/plain';
             }
 
             cloneNetwork.requestBodySize = cloneNetwork.requestBody.length;

test/utils/XhrNetworkInterceptor.spec.ts

@@ -235,7 +235,7 @@ describe('Network Interceptor', () => {
       expect(callback).toBeCalledWith(
         expect.objectContaining({
           errorDomain: 'ClientError',
-          errorCode: 0,
+          errorCode: 9876,
           responseBody: '',
         }),
       );