Fix Blob error for use fetch if Network Inspect enabled

app/middlewares/delta/DeltaPatcher.js

@@ -7,6 +7,8 @@
  * @format
  */
 
+import { checkFetchExists, patchFetchPolyfill } from './patchFetchPolyfill';
+
 /* eslint-disable no-underscore-dangle */
 
 /**
@@ -35,6 +37,7 @@ export default class DeltaPatcher {
     this._initialized = false;
     this._lastNumModifiedFiles = 0;
     this._lastModifiedDate = new Date();
+    this._fetchPolyfillPatched = false;
   }
 
   static get(id) {
@@ -58,6 +61,7 @@ export default class DeltaPatcher {
     }
 
     this._initialized = true;
+    this._fetchPolyfillPatched = false;
 
     // Reset the current delta when we receive a fresh delta.
     if (deltaBundle.reset) {
@@ -76,9 +80,9 @@ export default class DeltaPatcher {
       this._lastModifiedDate = new Date();
     }
 
-    this._patchMap(this._lastBundle.pre, deltaBundle.pre);
-    this._patchMap(this._lastBundle.post, deltaBundle.post);
-    this._patchMap(this._lastBundle.modules, deltaBundle.delta);
+    this._patchMap(this._lastBundle.pre, deltaBundle.pre, 'pre');
+    this._patchMap(this._lastBundle.post, deltaBundle.post, 'post');
+    this._patchMap(this._lastBundle.modules, deltaBundle.delta, 'delta');
 
     this._lastBundle.id = deltaBundle.id;
 
@@ -111,10 +115,13 @@ export default class DeltaPatcher {
     );
   }
 
-  _patchMap(original, patch) {
+  _patchMap(original, patch, type) {
     for (const [key, value] of patch.entries()) {
       if (value == null) {
         original.delete(key);
+      } else if (type === 'delta' && !this._fetchPolyfillPatched && checkFetchExists(value)) {
+        this._fetchPolyfillPatched = true;
+        original.set(key, patchFetchPolyfill(value));
       } else {
         original.set(key, value);
       }

app/middlewares/delta/patchFetchPolyfill.js

@@ -0,0 +1,12 @@
+/*
+ * See https://github.com/jhen0409/react-native-debugger/issues/209
+ *
+ * Patch whatwg-fetch code to get `support` var,
+ * so we could use it to fix the issue.
+ */
+const isFetch = '"node_modules/whatwg-fetch/fetch.js"';
+const flag = /(if \(self.fetch\) {\n\s+return;\n\s+}\n\s+var support )(=)( {)/g;
+const replaceStr = '$1= self._fetchSupport =$3';
+
+export const checkFetchExists = code => code.indexOf(isFetch) > -1;
+export const patchFetchPolyfill = code => code.replace(flag, replaceStr);

app/worker/networkInspect.js

@@ -2,11 +2,15 @@ const isWorkerMethod = fn => String(fn).indexOf('[native code]') > -1;
 
 let networkInspect;
 
+/* eslint-disable no-underscore-dangle */
 export const toggleNetworkInspect = enabled => {
   if (!enabled && networkInspect) {
     window.XMLHttpRequest = networkInspect.XMLHttpRequest;
     window.FormData = networkInspect.FormData;
     networkInspect = null;
+    if (window._fetchSupport) {
+      window._fetchSupport.blob = !!window._fetchSupport._blob;
+    }
     return;
   }
   if (!enabled) return;
@@ -30,6 +34,13 @@ export const toggleNetworkInspect = enabled => {
     : window.XMLHttpRequest;
   window.FormData = window.originalFormData ? window.originalFormData : window.FormData;
 
+  // Disable `support.blob` in `whatwg-fetch` for use native XMLHttpRequest,
+  // See https://github.com/jhen0409/react-native-debugger/issues/56
+  if (window._fetchSupport) {
+    window._fetchSupport._blob = window._fetchSupport.blob;
+    window._fetchSupport.blob = false;
+  }
+
   console.log(
     '[RNDebugger]',
     'Network Inspect is enabled,',

app/worker/setup.js

@@ -7,8 +7,9 @@ import {
 self.global = self;
 
 /*
- * Currently Blob is not supported for RN,
- * we should remove it in WebWorker because it will used for `whatwg-fetch`
+ * Blob is not supported for RN < 0.54,
+ * we should remove it in WebWorker because
+ * it will used for `whatwg-fetch` on older RN versions
  */
 if (self.Blob && self.Blob.toString() === 'function Blob() { [native code] }') {
   delete self.Blob;