Add request as soon as they are send

lib/src/components/DevTool/Requests/Details.js

@@ -42,6 +42,9 @@ const Indented = styled.View`
 `;
 
 const getResponse = (contentType, request) => {
+  if (!contentType) {
+    return null;
+  }
   if (request.responseType == 'blob' || request.responseType == 'ArrayBuffer') {
     return <Emphasis>🤖 Binary</Emphasis>
   }
@@ -111,7 +114,7 @@ const Response = ({
 
 
 const getPreview = (contentType, request, url) => {
-  if (request.responseType == 'blob' || request.responseType == 'ArrayBuffer') {
+  if (!contentType || request.responseType == 'blob' || request.responseType == 'ArrayBuffer' || !contentType) {
     return [];
   }
   const contentTypes = contentType.split(';').map(c => c.trim());

lib/src/components/base/Status.js

@@ -5,6 +5,9 @@ import {
 } from '../base/text';
 
 const getColor = (code) => {
+  if (code === 0) {
+    return '#c0392b';
+  }
   if (code >= 500) {
     return '#c0392b';
   }

lib/src/network.js

@@ -1,10 +1,10 @@
 const proxied = window.XMLHttpRequest.prototype.open;
+let currentId = 0;
 
 class Network {
   constructor() {
     this.requests = [];
     this.listeners = [];
-    this.currentId = 0;
     // this.clear = this.clear.bind(this);
     this.get = this.get.bind(this);
   }
@@ -27,11 +27,19 @@ class Network {
     this.listeners.forEach(l => l(this.requests));
   }
 
-  addRequest(request) {
+  addRequest(id, request) {
+    const index = this.requests.findIndex(req => req.id === id);
+    if (index >= 0) {
+      this.requests[index] = {
+        id,
+        ...request,
+      };
+    } else {
       this.requests.push({
-      id: this.currentId++,
+        id,
         ...request,
       });
+    }
     this.listeners.forEach(l => l(this.requests));
   }
 
@@ -44,20 +52,21 @@ class Network {
         method,
         url,
       ] = args;
+      const id = currentId++;
       this.addEventListener('load', () => {
-        me.addRequest({
+        me.addRequest(id, {
           url,
           method,
           args: sendArgs,
           headers,
           requestHeaders: this.getAllResponseHeaders(),
-          contentType: this.getResponseHeader('content-type') || '',
+          contentType: (this.getResponseHeader('content-type') || ''),
           request: this,
-          status: this.status,
+          status: this.status || null,
         });
       })
       this.addEventListener('error', (error) => {
-        me.addRequest({
+        me.addRequest(id, {
           url,
           method,
           error,
@@ -65,13 +74,21 @@ class Network {
           headers,
           requestHeaders: this.getAllResponseHeaders(),
           request: this,
-          status: this.status || 'CONN ERR',
+          status: this.status,
         });
       })
       const proxiedSend = this.send;
       const proxiedSetRequestHeader = this.setRequestHeader;
       this.send = function proxySend (...sendargs) {
         sendArgs = sendargs;
+        me.addRequest(id, {
+          url,
+          method,
+          args: sendArgs,
+          headers,
+          request: this,
+          status: 'Waiting',
+        });
         return proxiedSend.apply(this, [].slice.call(arguments));
       }
       this.setRequestHeader = function (name, value) {