Fix long-poll request cancellation (#434)

parfeon · web-flow · commit a204205a6e08 · 2025-01-31T08:23:59.000+02:00
fix(subscribe): fix long-poll request cancellation

Fix long-poll request cancellation caused by APM packages monkey patching 'fetch' and try to use
'native' implementation instead of patched.
diff --git a/.pubnub.yml b/.pubnub.yml
@@ -1,5 +1,10 @@
 ---
 changelog:
+  - date: 2025-01-31
+    version: v8.7.1
+    changes:
+      - type: bug
+        text: "Fix long-poll request cancellation caused by APM packages monkey patching 'fetch' and try to use 'native' implementation instead of patched."
   - date: 2025-01-30
     version: v8.7.0
     changes:
@@ -1118,7 +1123,7 @@ supported-platforms:
       - 'Ubuntu 14.04 and up'
       - 'Windows 7 and up'
     version: 'Pubnub Javascript for Node'
-version: '8.7.0'
+version: '8.7.1'
 sdks:
   - full-name: PubNub Javascript SDK
     short-name: Javascript
@@ -1134,7 +1139,7 @@ sdks:
           - distribution-type: source
             distribution-repository: GitHub release
             package-name: pubnub.js
-            location: https://github.com/pubnub/javascript/archive/refs/tags/v8.7.0.zip
+            location: https://github.com/pubnub/javascript/archive/refs/tags/v8.7.1.zip
             requires:
               - name: 'agentkeepalive'
                 min-version: '3.5.2'
@@ -1805,7 +1810,7 @@ sdks:
           - distribution-type: library
             distribution-repository: GitHub release
             package-name: pubnub.js
-            location: https://github.com/pubnub/javascript/releases/download/v8.7.0/pubnub.8.7.0.js
+            location: https://github.com/pubnub/javascript/releases/download/v8.7.1/pubnub.8.7.1.js
             requires:
               - name: 'agentkeepalive'
                 min-version: '3.5.2'
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## v8.7.1
+January 31 2025
+
+#### Fixed
+- Fix long-poll request cancellation caused by APM packages monkey patching 'fetch' and try to use 'native' implementation instead of patched.
+
 ## v8.7.0
 January 30 2025
 
diff --git a/README.md b/README.md
@@ -28,8 +28,8 @@ Watch [Getting Started with PubNub JS SDK](https://app.dashcam.io/replay/64ee0d2
      npm install pubnub
      ```
    * or download one of our builds from our CDN: 
-     * https://cdn.pubnub.com/sdk/javascript/pubnub.8.7.0.js
-     * https://cdn.pubnub.com/sdk/javascript/pubnub.8.7.0.min.js
+     * https://cdn.pubnub.com/sdk/javascript/pubnub.8.7.1.js
+     * https://cdn.pubnub.com/sdk/javascript/pubnub.8.7.1.min.js
 
 2. Configure your keys:
 
diff --git a/dist/web/pubnub.js b/dist/web/pubnub.js
@@ -3370,14 +3370,24 @@
 	    /**
 	     * Create and configure transport provider for Web and Rect environments.
 	     *
+	     * @param originalFetch - Pointer to the original (not monkey patched) `fetch` implementation.
 	     * @param [keepAlive] - Whether client should try to keep connections open for reuse or not.
 	     * @param logVerbosity - Whether verbose logs should be printed or not.
 	     *
 	     * @internal
 	     */
-	    constructor(keepAlive = false, logVerbosity) {
+	    constructor(originalFetch, keepAlive = false, logVerbosity = false) {
 	        this.keepAlive = keepAlive;
 	        this.logVerbosity = logVerbosity;
+	        WebReactNativeTransport.originalFetch = originalFetch;
+	        // Check whether `fetch` has been monkey patched or not.
+	        if (logVerbosity && this.isFetchMonkeyPatched()) {
+	            console.warn("[PubNub] Native Web Fetch API 'fetch' function monkey patched.");
+	            if (!this.isFetchMonkeyPatched(WebReactNativeTransport.originalFetch))
+	                console.info("[PubNub] Use native Web Fetch API 'fetch' implementation from iframe as APM workaround.");
+	            else
+	                console.warn('[PubNub] Unable receive native Web Fetch API. There can be issues with subscribe long-poll cancellation');
+	        }
 	    }
 	    makeSendable(req) {
 	        let controller;
@@ -3407,7 +3417,11 @@
 	                    }, req.timeout * 1000);
 	                });
 	                return Promise.race([
-	                    fetch(request, { signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal, credentials: 'omit', cache: 'no-cache' }),
+	                    WebReactNativeTransport.originalFetch(request, {
+	                        signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal,
+	                        credentials: 'omit',
+	                        cache: 'no-cache',
+	                    }),
 	                    requestTimeout,
 	                ])
 	                    .then((response) => response.arrayBuffer().then((arrayBuffer) => [response, arrayBuffer]))
@@ -3522,6 +3536,17 @@
 	            console.log('-----');
 	        }
 	    }
+	    /**
+	     * Check whether original `fetch` has been monkey patched or not.
+	     *
+	     * @returns `true` if original `fetch` has been patched.
+	     *
+	     * @internal
+	     */
+	    isFetchMonkeyPatched(oFetch) {
+	        const fetchString = (oFetch !== null && oFetch !== void 0 ? oFetch : fetch).toString();
+	        return !fetchString.includes('[native code]') && fetch.name !== 'fetch';
+	    }
 	}
 	/**
 	 * Service {@link ArrayBuffer} response decoder.
@@ -3975,7 +4000,7 @@
 	            return base.PubNubFile;
 	        },
 	        get version() {
-	            return '8.7.0';
+	            return '8.7.1';
 	        },
 	        getVersion() {
 	            return this.version;
@@ -14544,7 +14569,7 @@
 	        let cryptography;
 	        cryptography = new WebCryptography();
 	        // Setup transport provider.
-	        let transport = new WebReactNativeTransport(clientConfiguration.keepAlive, clientConfiguration.logVerbosity);
+	        let transport = new WebReactNativeTransport(PubNub.originalFetch(), clientConfiguration.keepAlive, clientConfiguration.logVerbosity);
 	        {
 	            if (configurationCopy.subscriptionWorkerUrl) {
 	                // Inject subscription worker into transport provider stack.
@@ -14593,6 +14618,19 @@
 	        this.listenerManager.announceNetworkUp();
 	        this.reconnect();
 	    }
+	    static originalFetch() {
+	        let iframe = document.querySelector('iframe[name="pubnub-context-unpatched-fetch"]');
+	        if (!iframe) {
+	            iframe = document.createElement('iframe');
+	            iframe.style.display = 'none';
+	            iframe.name = 'pubnub-context-unpatched-fetch';
+	            iframe.src = 'about:blank';
+	            document.body.appendChild(iframe);
+	        }
+	        if (iframe.contentWindow)
+	            return iframe.contentWindow.fetch.bind(iframe.contentWindow);
+	        return fetch;
+	    }
 	}
 	/**
 	 * Data encryption / decryption module constructor.
diff --git a/dist/web/pubnub.min.js b/dist/web/pubnub.min.js
diff --git a/lib/core/components/configuration.js b/lib/core/components/configuration.js
@@ -120,7 +120,7 @@ const makeConfiguration = (base, setupCryptoModule) => {
             return base.PubNubFile;
         },
         get version() {
-            return '8.7.0';
+            return '8.7.1';
         },
         getVersion() {
             return this.version;
diff --git a/lib/react_native/index.js b/lib/react_native/index.js
@@ -62,7 +62,7 @@ class PubNub extends pubnub_common_1.PubNubCore {
         const transportMiddleware = new middleware_1.PubNubMiddleware({
             clientConfiguration,
             tokenManager,
-            transport: new web_react_native_transport_1.WebReactNativeTransport(clientConfiguration.keepAlive, clientConfiguration.logVerbosity),
+            transport: new web_react_native_transport_1.WebReactNativeTransport(fetch, clientConfiguration.keepAlive, clientConfiguration.logVerbosity),
         });
         super({
             configuration: clientConfiguration,
diff --git a/lib/transport/web-react-native-transport.js b/lib/transport/web-react-native-transport.js
@@ -26,14 +26,24 @@ class WebReactNativeTransport {
     /**
      * Create and configure transport provider for Web and Rect environments.
      *
+     * @param originalFetch - Pointer to the original (not monkey patched) `fetch` implementation.
      * @param [keepAlive] - Whether client should try to keep connections open for reuse or not.
      * @param logVerbosity - Whether verbose logs should be printed or not.
      *
      * @internal
      */
-    constructor(keepAlive = false, logVerbosity) {
+    constructor(originalFetch, keepAlive = false, logVerbosity = false) {
         this.keepAlive = keepAlive;
         this.logVerbosity = logVerbosity;
+        WebReactNativeTransport.originalFetch = originalFetch;
+        // Check whether `fetch` has been monkey patched or not.
+        if (logVerbosity && this.isFetchMonkeyPatched()) {
+            console.warn("[PubNub] Native Web Fetch API 'fetch' function monkey patched.");
+            if (!this.isFetchMonkeyPatched(WebReactNativeTransport.originalFetch))
+                console.info("[PubNub] Use native Web Fetch API 'fetch' implementation from iframe as APM workaround.");
+            else
+                console.warn('[PubNub] Unable receive native Web Fetch API. There can be issues with subscribe long-poll cancellation');
+        }
     }
     makeSendable(req) {
         let controller;
@@ -63,7 +73,11 @@ class WebReactNativeTransport {
                     }, req.timeout * 1000);
                 });
                 return Promise.race([
-                    fetch(request, { signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal, credentials: 'omit', cache: 'no-cache' }),
+                    WebReactNativeTransport.originalFetch(request, {
+                        signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal,
+                        credentials: 'omit',
+                        cache: 'no-cache',
+                    }),
                     requestTimeout,
                 ])
                     .then((response) => response.arrayBuffer().then((arrayBuffer) => [response, arrayBuffer]))
@@ -178,6 +192,17 @@ class WebReactNativeTransport {
             console.log('-----');
         }
     }
+    /**
+     * Check whether original `fetch` has been monkey patched or not.
+     *
+     * @returns `true` if original `fetch` has been patched.
+     *
+     * @internal
+     */
+    isFetchMonkeyPatched(oFetch) {
+        const fetchString = (oFetch !== null && oFetch !== void 0 ? oFetch : fetch).toString();
+        return !fetchString.includes('[native code]') && fetch.name !== 'fetch';
+    }
 }
 exports.WebReactNativeTransport = WebReactNativeTransport;
 /**
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pubnub",
-  "version": "8.7.0",
+  "version": "8.7.1",
   "author": "PubNub <support@pubnub.com>",
   "description": "Publish & Subscribe Real-time Messaging with PubNub",
   "scripts": {
diff --git a/src/core/components/configuration.ts b/src/core/components/configuration.ts
@@ -178,7 +178,7 @@ export const makeConfiguration = (
       return base.PubNubFile;
     },
     get version(): string {
-      return '8.7.0';
+      return '8.7.1';
     },
     getVersion(): string {
       return this.version;
diff --git a/src/react_native/index.ts b/src/react_native/index.ts
@@ -72,7 +72,7 @@ export default class PubNub extends PubNubCore<null, PubNubFileParameters> {
     const transportMiddleware = new PubNubMiddleware({
       clientConfiguration,
       tokenManager,
-      transport: new WebReactNativeTransport(clientConfiguration.keepAlive, clientConfiguration.logVerbosity!),
+      transport: new WebReactNativeTransport(fetch, clientConfiguration.keepAlive, clientConfiguration.logVerbosity!),
     });
 
     super({
diff --git a/src/transport/web-react-native-transport.ts b/src/transport/web-react-native-transport.ts
@@ -17,6 +17,15 @@ import { queryStringFromObject } from '../core/utils';
  * @internal
  */
 export class WebReactNativeTransport implements Transport {
+  /**
+   * Pointer to the "clean" `fetch` function.
+   *
+   * This protects against APM which overload implementation and may break crucial functionality.
+   *
+   * @internal
+   */
+  private static originalFetch: typeof fetch;
+
   /**
    * Service {@link ArrayBuffer} response decoder.
    *
@@ -27,15 +36,30 @@ export class WebReactNativeTransport implements Transport {
   /**
    * Create and configure transport provider for Web and Rect environments.
    *
+   * @param originalFetch - Pointer to the original (not monkey patched) `fetch` implementation.
    * @param [keepAlive] - Whether client should try to keep connections open for reuse or not.
    * @param logVerbosity - Whether verbose logs should be printed or not.
    *
    * @internal
    */
   constructor(
+    originalFetch: unknown,
     private keepAlive: boolean = false,
-    private readonly logVerbosity: boolean,
-  ) {}
+    private readonly logVerbosity: boolean = false,
+  ) {
+    WebReactNativeTransport.originalFetch = originalFetch as typeof fetch;
+
+    // Check whether `fetch` has been monkey patched or not.
+    if (logVerbosity && this.isFetchMonkeyPatched()) {
+      console.warn("[PubNub] Native Web Fetch API 'fetch' function monkey patched.");
+      if (!this.isFetchMonkeyPatched(WebReactNativeTransport.originalFetch))
+        console.info("[PubNub] Use native Web Fetch API 'fetch' implementation from iframe as APM workaround.");
+      else
+        console.warn(
+          '[PubNub] Unable receive native Web Fetch API. There can be issues with subscribe long-poll cancellation',
+        );
+    }
+  }
 
   makeSendable(req: TransportRequest): [Promise<TransportResponse>, CancellationController | undefined] {
     let controller: CancellationController | undefined;
@@ -71,7 +95,11 @@ export class WebReactNativeTransport implements Transport {
         });
 
         return Promise.race([
-          fetch(request, { signal: abortController?.signal, credentials: 'omit', cache: 'no-cache' }),
+          WebReactNativeTransport.originalFetch(request, {
+            signal: abortController?.signal,
+            credentials: 'omit',
+            cache: 'no-cache',
+          }),
           requestTimeout,
         ])
           .then((response): Promise<[Response, ArrayBuffer]> | [Response, ArrayBuffer] =>
@@ -198,4 +226,17 @@ export class WebReactNativeTransport implements Transport {
       console.log('-----');
     }
   }
+
+  /**
+   * Check whether original `fetch` has been monkey patched or not.
+   *
+   * @returns `true` if original `fetch` has been patched.
+   *
+   * @internal
+   */
+  private isFetchMonkeyPatched(oFetch?: typeof fetch): boolean {
+    const fetchString = (oFetch ?? fetch).toString();
+
+    return !fetchString.includes('[native code]') && fetch.name !== 'fetch';
+  }
 }
diff --git a/src/web/index.ts b/src/web/index.ts
@@ -93,6 +93,7 @@ export default class PubNub extends PubNubCore<ArrayBuffer | string, PubNubFileP
 
     // Setup transport provider.
     let transport: Transport = new WebReactNativeTransport(
+      PubNub.originalFetch(),
       clientConfiguration.keepAlive,
       clientConfiguration.logVerbosity!,
     );
@@ -150,4 +151,19 @@ export default class PubNub extends PubNubCore<ArrayBuffer | string, PubNubFileP
     this.listenerManager.announceNetworkUp();
     this.reconnect();
   }
+
+  private static originalFetch(): typeof fetch {
+    let iframe = document.querySelector<HTMLIFrameElement>('iframe[name="pubnub-context-unpatched-fetch"]');
+
+    if (!iframe) {
+      iframe = document.createElement('iframe');
+      iframe.style.display = 'none';
+      iframe.name = 'pubnub-context-unpatched-fetch';
+      iframe.src = 'about:blank';
+      document.body.appendChild(iframe);
+    }
+
+    if (iframe.contentWindow) return iframe.contentWindow.fetch.bind(iframe.contentWindow);
+    return fetch;
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "pubnub",`
`3`		`- "version": "8.7.0",`
	`3`	`+ "version": "8.7.1",`
`4`	`4`	`"author": "PubNub <[email protected]>",`
`5`	`5`	`"description": "Publish & Subscribe Real-time Messaging with PubNub",`
`6`	`6`	`"scripts": {`