fix: prevent not sending the unSent xhrRequest

CHANGELOG.md

@@ -8,6 +8,10 @@
 
 - Add support for xCode 16. ([#1370](https://github.com/Instabug/Instabug-React-Native/pull/1370))
 
+### Fixed
+
+- Not sending the inComplete xhrRequest. ([#1365](https://github.com/Instabug/Instabug-React-Native/pull/1365))
+
 - Added more search capabilities to the find-token.sh script. e.g., searching in .env file for react config. [#1366](https://github.com/Instabug/Instabug-React-Native/pull/1366)
 
 ## [14.3.0](https://github.com/Instabug/Instabug-React-Native/compare/v14.1.0...14.3.0)

examples/default/ios/Podfile.lock

@@ -1296,6 +1296,8 @@ PODS:
     - React-Core
   - react-native-maps (1.10.3):
     - React-Core
+  - react-native-netinfo (11.4.1):
+    - React-Core
   - react-native-safe-area-context (4.12.0):
     - React-Core
   - react-native-slider (4.5.5):
@@ -1806,6 +1808,7 @@ DEPENDENCIES:
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-google-maps (from `../node_modules/react-native-maps`)
   - react-native-maps (from `../node_modules/react-native-maps`)
+  - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-webview (from `../node_modules/react-native-webview`)
@@ -1935,6 +1938,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-maps"
   react-native-maps:
     :path: "../node_modules/react-native-maps"
+  react-native-netinfo:
+    :path: "../node_modules/@react-native-community/netinfo"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-slider:
@@ -2055,6 +2060,7 @@ SPEC CHECKSUMS:
   react-native-config: 8f7283449bbb048902f4e764affbbf24504454af
   react-native-google-maps: 1bcc1f9f13f798fcf230db7fe476f3566d0bc0a3
   react-native-maps: 72a8a903f8a1b53e2c777ba79102078ab502e0bf
+  react-native-netinfo: f0a9899081c185db1de5bb2fdc1c88c202a059ac
   react-native-safe-area-context: 142fade490cbebbe428640b8cbdb09daf17e8191
   react-native-slider: 4a0f3386a38fc3d2d955efc515aef7096f7d1ee4
   react-native-webview: c0b91a4598bd54e9fbc70353aebf1e9bab2e5bb9

examples/default/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-clipboard/clipboard": "^1.14.3",
+    "@react-native-community/netinfo": "^11.4.1",
     "@react-native-community/slider": "^4.5.5",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.6",

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

@@ -11,12 +11,16 @@ import axios from 'axios';
 import type { HomeStackParamList } from '../../navigation/HomeStack';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { ListTile } from '../../components/ListTile';
+import { useNetInfo } from '@react-native-community/netinfo';
 
 export const NetworkScreen: React.FC<
   NativeStackScreenProps<HomeStackParamList, 'NetworkTraces'>
 > = ({ navigation }) => {
   const [endpointUrl, setEndpointUrl] = useState('');
   const { width, height } = useWindowDimensions();
+
+  const { isConnected } = useNetInfo();
+
   const defaultRequestUrl = 'https://jsonplaceholder.typicode.com/posts/1';
   const imageUrls = [
     'https://fastly.picsum.photos/id/57/200/300.jpg?hmac=l908G1qVr4r7dP947-tak2mY8Vvic_vEYzCXUCKKskY',
@@ -129,6 +133,7 @@ export const NetworkScreen: React.FC<
             />
             <CustomButton onPress={() => refetch} title="Reload GraphQL" />
             <View>
+              <Text>{isConnected ? 'Network is Connected' : 'Network is not connected'}</Text>
               {isLoading && <Text>Loading...</Text>}
               {isSuccess && <Text>GraphQL Data: {data.country.emoji}</Text>}
               {isError && <Text>Error!</Text>}

examples/default/yarn.lock

@@ -2041,6 +2041,11 @@
     prompts "^2.4.2"
     semver "^7.5.2"
 
+"@react-native-community/netinfo@^11.4.1":
+  version "11.4.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-11.4.1.tgz#a3c247aceab35f75dd0aa4bfa85d2be5a4508688"
+  integrity sha512-B0BYAkghz3Q2V09BF88RA601XursIEA111tnc2JOaN7axJWmNefmfjZqw/KdSxKZp7CZUuPpjBmz/WCR9uaHYg==
+
 "@react-native-community/slider@^4.5.5":
   version "4.5.5"
   resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.5.5.tgz#d70fc5870477760033769bbd6625d57e7d7678b2"

src/utils/XhrNetworkInterceptor.ts

@@ -85,7 +85,7 @@ const getTraceparentHeader = async (networkData: NetworkData) => {
   });
 };
 
-export const injectHeaders = async (
+export const injectHeaders = (
   networkData: NetworkData,
   featureFlags: {
     isW3cExternalTraceIDEnabled: boolean;
@@ -113,10 +113,7 @@ export const injectHeaders = async (
   return injectionMethodology;
 };
 
-const identifyCaughtHeader = async (
-  networkData: NetworkData,
-  isW3cCaughtHeaderEnabled: boolean,
-) => {
+const identifyCaughtHeader = (networkData: NetworkData, isW3cCaughtHeaderEnabled: boolean) => {
   if (isW3cCaughtHeaderEnabled) {
     networkData.w3cCaughtHeader = networkData.requestHeaders.traceparent;
     return networkData.requestHeaders.traceparent;
@@ -314,6 +311,10 @@ export default {
       if (traceparent) {
         this.setRequestHeader('Traceparent', traceparent);
       }
+      if (this.readyState === this.UNSENT) {
+        return; // Prevent sending the request if not opened
+      }
+
       originalXHRSend.apply(this, [data]);
     };
     isInterceptorEnabled = true;