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

@@ -7,6 +7,7 @@ import { useQuery } from 'react-query';
 import { HStack, VStack } from 'native-base';
 import { gql, request } from 'graphql-request';
 import { CustomButton } from '../../components/CustomButton';
+import axios from 'axios';
 
 export const NetworkScreen: React.FC = () => {
   const [endpointUrl, setEndpointUrl] = useState('');
@@ -45,6 +46,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 {
@@ -75,6 +102,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

@@ -3249,10 +3249,10 @@ at-least-node@^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.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621"
-  integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
+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"
@@ -4690,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"

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: '',
         }),
       );