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.

Author: parfeon

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.
@@ -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.

dist/web/pubnub.min.js

@@ -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({

src/react_native/index.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';
+  }
 }

src/transport/web-react-native-transport.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;
+  }
 }