fix: fetch error keep pending

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "prefer-rest-params": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-require-imports": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "prefer-spread": "off"
+  }
+}

devtools/network.js

@@ -0,0 +1,39 @@
+setTimeout(function () {
+  fetch(location.href)
+}, 1000)
+
+function testFetch() {
+  fetch('/index.js')
+  fetch('https://domainnotexist.com').catch(err => {
+    console.error(err)
+  })
+}
+
+function testXhr() {
+  let xhr = new XMLHttpRequest()
+  xhr.open('GET', '/index.js', true)
+  xhr.send()
+
+  xhr = new XMLHttpRequest()
+  xhr.open('GET', 'https://domainnotexist.com', true)
+  xhr.send()
+}
+
+function testWs() {
+  const text = 'This is the text used for testing!'
+
+  const enc = new TextEncoder()
+  const ws = new WebSocket('wss://echo.websocket.org')
+
+  ws.onopen = function () {
+    ws.send(text)
+    ws.send(enc.encode(text))
+  }
+  setTimeout(() => {
+    ws.close()
+  }, 1000)
+}
+
+testFetch()
+testXhr()
+testWs()

devtools/target.html

@@ -86,27 +86,8 @@
       console.log('Page loaded!')
       setTimeout(function () {
         console.log('Hello Chii')
-        fetch(location.href)
       }, 1000)
     </script>
-    <script>
-      function testFetch() {
-        fetch('/index.js')
-      }
-      function testWs() {
-        const text = 'This is the text used for testing!'
-
-        const enc = new TextEncoder()
-        const ws = new WebSocket('wss://echo.websocket.org')
-
-        ws.onopen = function () {
-          ws.send(text)
-          ws.send(enc.encode(text))
-        }
-      }
-      testFetch()
-      testWs()
-    </script>
     <script type="module" src="target.js"></script>
     <script>
       console.log('console right after target injected')

devtools/target.js

@@ -1,4 +1,5 @@
 import './db.js'
+import './network.js'
 
 const targetOrigin = location.protocol + '//' + location.host
 function sendToDevtools(message) {
@@ -48,29 +49,29 @@ function resetDevtools() {
           resourceTreeModel
         )
       }
-    })
-    sendToDevtools({
-      method: 'Page.frameNavigated',
-      params: {
-        frame: {
-          id: '1',
-          mimeType: 'text/html',
-          securityOrigin: location.origin,
-          url: location.href,
+      sendToDevtools({
+        method: 'Page.frameNavigated',
+        params: {
+          frame: {
+            id: '1',
+            mimeType: 'text/html',
+            securityOrigin: location.origin,
+            url: location.href,
+          },
+          type: 'Navigation',
         },
-        type: 'Navigation',
-      },
+      })
+      sendToChobitsu({ method: 'Network.enable' })
+      sendToDevtools({ method: 'Runtime.executionContextsCleared' })
+      sendToChobitsu({ method: 'Runtime.enable' })
+      sendToChobitsu({ method: 'Debugger.enable' })
+      sendToChobitsu({ method: 'DOMStorage.enable' })
+      sendToChobitsu({ method: 'DOM.enable' })
+      sendToChobitsu({ method: 'CSS.enable' })
+      sendToChobitsu({ method: 'Overlay.enable' })
+      sendToDevtools({ method: 'DOM.documentUpdated' })
+      sendToChobitsu({ method: 'Page.enable' })
+      sendToDevtools({ method: 'Page.loadEventFired' })
     })
-    sendToChobitsu({ method: 'Network.enable' })
-    sendToDevtools({ method: 'Runtime.executionContextsCleared' })
-    sendToChobitsu({ method: 'Runtime.enable' })
-    sendToChobitsu({ method: 'Debugger.enable' })
-    sendToChobitsu({ method: 'DOMStorage.enable' })
-    sendToChobitsu({ method: 'DOM.enable' })
-    sendToChobitsu({ method: 'CSS.enable' })
-    sendToChobitsu({ method: 'Overlay.enable' })
-    sendToDevtools({ method: 'DOM.documentUpdated' })
-    sendToChobitsu({ method: 'Page.enable' })
-    sendToDevtools({ method: 'Page.loadEventFired' })
   }, 0)
 }

package.json

@@ -48,8 +48,8 @@
     "@babel/preset-env": "^7.17.10",
     "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
     "@types/node": "^20.14.12",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
+    "@typescript-eslint/eslint-plugin": "^8.9.0",
+    "@typescript-eslint/parser": "^8.9.0",
     "babel-loader": "^8.2.5",
     "concurrently": "^7.6.0",
     "es-check": "^6.2.1",

src/domains/Network.ts

@@ -5,6 +5,7 @@ import rmCookie from 'licia/rmCookie'
 import isNative from 'licia/isNative'
 import contain from 'licia/contain'
 import now from 'licia/now'
+import Emitter from 'licia/Emitter'
 import isStr from 'licia/isStr'
 import isBlob from 'licia/isBlob'
 import isUndef from 'licia/isUndef'
@@ -78,55 +79,7 @@ function enableXhr() {
       url
     ))
 
-    req.on('send', (id: string, data: any) => {
-      const request: any = {
-        method: data.method,
-        url: data.url,
-        headers: data.reqHeaders,
-      }
-      if (data.data) {
-        request.postData = data.data
-      }
-
-      trigger('Network.requestWillBeSent', {
-        requestId: id,
-        type: 'XHR',
-        request,
-        timestamp: data.time / 1000,
-      })
-    })
-    req.on('headersReceived', (id: string, data: any) => {
-      trigger('Network.responseReceivedExtraInfo', {
-        requestId: id,
-        blockedCookies: [],
-        headers: data.resHeaders,
-      })
-    })
-    req.on('done', (id: string, data: any) => {
-      trigger('Network.responseReceived', {
-        requestId: id,
-        type: 'XHR',
-        response: {
-          status: data.status,
-        },
-        timestamp: data.time / 1000,
-      })
-      resTxtMap.set(id, data.resTxt)
-      trigger('Network.loadingFinished', {
-        requestId: id,
-        encodedDataLength: data.size,
-        timestamp: data.time / 1000,
-      })
-    })
-
-    xhr.addEventListener('readystatechange', function () {
-      switch (xhr.readyState) {
-        case 2:
-          return req.handleHeadersReceived()
-        case 4:
-          return req.handleDone()
-      }
-    })
+    bindRequestEvent(req, 'XHR')
 
     origOpen.apply(this, arguments)
   }
@@ -168,49 +121,70 @@ function enableFetch() {
 
   window.fetch = function (...args) {
     const req = new FetchRequest(...args)
-    req.on('send', (id, data) => {
-      const request: any = {
-        method: data.method,
-        url: data.url,
-        headers: data.reqHeaders,
-      }
-
-      if (data.data) {
-        request.postData = data.data
-      }
-
-      trigger('Network.requestWillBeSent', {
-        requestId: id,
-        type: 'Fetch',
-        request,
-        timestamp: data.time / 1000,
-      })
-    })
-    req.on('done', (id, data) => {
-      trigger('Network.responseReceived', {
-        requestId: id,
-        type: 'Fetch',
-        response: {
-          status: data.status,
-          headers: data.resHeaders,
-        },
-        timestamp: data.time / 1000,
-      })
-      resTxtMap.set(id, data.resTxt)
-      trigger('Network.loadingFinished', {
-        requestId: id,
-        encodedDataLength: data.size,
-        timestamp: data.time / 1000,
-      })
-    })
-
+    bindRequestEvent(req, 'Fetch')
     const fetchResult = origFetch(...args)
     req.send(fetchResult)
 
     return fetchResult
   }
 }
 
+function bindRequestEvent(req: Emitter, type: string) {
+  req.on('send', (id: string, data: any) => {
+    const request: any = {
+      method: data.method,
+      url: data.url,
+      headers: data.reqHeaders,
+    }
+    if (data.data) {
+      request.postData = data.data
+    }
+
+    trigger('Network.requestWillBeSent', {
+      requestId: id,
+      type,
+      request,
+      timestamp: data.time / 1000,
+    })
+  })
+  req.on('headersReceived', (id: string, data: any) => {
+    trigger('Network.responseReceivedExtraInfo', {
+      requestId: id,
+      blockedCookies: [],
+      headers: data.resHeaders,
+    })
+  })
+  req.on('done', (id: string, data: any) => {
+    const response: any = {
+      status: data.status,
+    }
+    if (data.resHeaders) {
+      response.headers = data.resHeaders
+    }
+
+    trigger('Network.responseReceived', {
+      requestId: id,
+      type,
+      response,
+      timestamp: data.time / 1000,
+    })
+    resTxtMap.set(id, data.resTxt)
+    trigger('Network.loadingFinished', {
+      requestId: id,
+      encodedDataLength: data.size,
+      timestamp: data.time / 1000,
+    })
+  })
+  req.on('error', (id, data) => {
+    trigger('Network.loadingFailed', {
+      requestId: id,
+      errorText: data.errorText,
+      timestamp: data.time / 1000,
+      type,
+    })
+  })
+}
+
 function enableWebSocket() {
   const origWebSocket = window.WebSocket
   function WebSocket(url: string, protocols?: string | string[]) {