diff --git a/lib/src/components/DevTool/Requests/Details.js b/lib/src/components/DevTool/Requests/Details.js index e4b6932..0a2db72 100644 --- a/lib/src/components/DevTool/Requests/Details.js +++ b/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 🤖 Binary } @@ -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()); diff --git a/lib/src/components/base/Status.js b/lib/src/components/base/Status.js index 6156235..2f44dc6 100644 --- a/lib/src/components/base/Status.js +++ b/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'; } diff --git a/lib/src/network.js b/lib/src/network.js index 73b16ad..7d14d8e 100644 --- a/lib/src/network.js +++ b/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) { - this.requests.push({ - id: this.currentId++, - ...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, + ...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) {