From 9b88aaca432caa6f6607b65a9a0426b220a3308b Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Tue, 15 Oct 2024 17:32:31 +0800
Subject: [PATCH] fix: fetch error keep pending

---
 .eslintrc.js           |  21 ------
 .eslintrc.json         |  25 +++++++
 devtools/network.js    |  39 +++++++++++
 devtools/target.html   |  19 ------
 devtools/target.js     |  45 ++++++-------
 package.json           |   4 +-
 src/domains/Network.ts | 144 +++++++++++++++++------------------------
 src/lib/request.ts     |  69 +++++++++++++-------
 8 files changed, 195 insertions(+), 171 deletions(-)
 delete mode 100644 .eslintrc.js
 create mode 100644 .eslintrc.json
 create mode 100644 devtools/network.js

diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index c64da99..0000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,21 +0,0 @@
-module.exports = {
-  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',
-    'prefer-spread': 'off',
-  },
-}
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..ebe44d6
--- /dev/null
+++ b/.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"
+  }
+}
diff --git a/devtools/network.js b/devtools/network.js
new file mode 100644
index 0000000..ea1a46a
--- /dev/null
+++ b/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()
diff --git a/devtools/target.html b/devtools/target.html
index 1b35984..8a794d5 100644
--- a/devtools/target.html
+++ b/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')
diff --git a/devtools/target.js b/devtools/target.js
index 2dfcfc5..968075d 100644
--- a/devtools/target.js
+++ b/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)
 }
diff --git a/package.json b/package.json
index 0a7640e..bcc2703 100644
--- a/package.json
+++ b/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",
diff --git a/src/domains/Network.ts b/src/domains/Network.ts
index 0d5c0ce..72de983 100644
--- a/src/domains/Network.ts
+++ b/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,42 +121,7 @@ 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)
 
@@ -211,6 +129,62 @@ function enableFetch() {
   }
 }
 
+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[]) {
diff --git a/src/lib/request.ts b/src/lib/request.ts
index bbc217c..7130da2 100644
--- a/src/lib/request.ts
+++ b/src/lib/request.ts
@@ -24,6 +24,18 @@ export class XhrRequest extends Emitter {
     this.method = method
     this.url = fullUrl(url)
     this.id = createId()
+
+    xhr.addEventListener('readystatechange', () => {
+      if (xhr.readyState === 2) {
+        this.handleHeadersReceived()
+      } else if (xhr.readyState === 4) {
+        if (xhr.status === 0) {
+          this.handleError()
+        } else {
+          this.handleDone()
+        }
+      }
+    })
   }
   // #1
   toJSON() {
@@ -54,7 +66,7 @@ export class XhrRequest extends Emitter {
       this.reqHeaders[key] = val
     }
   }
-  handleHeadersReceived() {
+  private handleHeadersReceived() {
     const { xhr } = this
 
     const type = getType(xhr.getResponseHeader('Content-Type') || '')
@@ -66,7 +78,7 @@ export class XhrRequest extends Emitter {
       resHeaders: getHeaders(xhr),
     })
   }
-  handleDone() {
+  private handleDone() {
     const xhr = this.xhr
     const resType = xhr.responseType
     let resTxt = ''
@@ -98,6 +110,12 @@ export class XhrRequest extends Emitter {
       update()
     }
   }
+  private handleError() {
+    this.emit('error', this.id, {
+      errorText: 'Network error',
+      time: now(),
+    })
+  }
 }
 
 export class FetchRequest extends Emitter {
@@ -132,28 +150,35 @@ export class FetchRequest extends Emitter {
       method: this.method,
     })
 
-    fetchResult.then((res: any) => {
-      res = res.clone()
-
-      const type = getType(res.headers.get('Content-Type'))
-      res.text().then((resTxt: string) => {
-        const data: any = {
-          type: type.type,
-          subType: type.subType,
+    fetchResult
+      .then((res: any) => {
+        res = res.clone()
+
+        const type = getType(res.headers.get('Content-Type'))
+        res.text().then((resTxt: string) => {
+          const data: any = {
+            type: type.type,
+            subType: type.subType,
+            time: now(),
+            size: getFetchSize(res, resTxt),
+            resTxt,
+            resHeaders: getFetchHeaders(res),
+            status: res.status,
+          }
+          if (!isEmpty(this.reqHeaders)) {
+            data.reqHeaders = this.reqHeaders
+          }
+          this.emit('done', this.id, data)
+        })
+
+        return res
+      })
+      .catch((err: any) => {
+        this.emit('error', this.id, {
+          errorText: err.message,
           time: now(),
-          size: getFetchSize(res, resTxt),
-          resTxt,
-          resHeaders: getFetchHeaders(res),
-          status: res.status,
-        }
-        if (!isEmpty(this.reqHeaders)) {
-          data.reqHeaders = this.reqHeaders
-        }
-        this.emit('done', this.id, data)
+        })
       })
-
-      return res
-    })
   }
 }