feat: experimental support for some hooks and undici package

Author: GrinZero

apps/koa/package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "nodemon --exec NODE_OPTIONS=--inspect-brk NODE_ENV=development ts-node --files ./src/index.ts",
     "dev": "cross-env NETWORK_DEBUG_MODE=true node --inspect --watch ./src/index.js",
-    "start": "cross-env NODE_ENV=production node --inspect  --watch ./src/index.js",
+    "start": "cross-env NODE_ENV=production node --inspect ./src/index.js",
     "build": "vite build"
   },
   "keywords": [],
@@ -35,6 +35,7 @@
     "ofetch": "^1.4.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
+    "undici": "^6.20.1",
     "ws": "^8.17.0"
   }
 }

apps/koa/src/index.js

@@ -13,9 +13,16 @@ const run = () => {
   const Koa = require('koa')
   const Router = require('koa-router')
   const { createFetch } = require('ofetch')
+  const undici = require('undici')
 
   const unregister = register()
-  register()
+  register({
+    intercept: {
+      undici: {
+        fetch: true
+      }
+    }
+  })
 
   const app = new Koa()
   const router = new Router()
@@ -30,6 +37,13 @@ const run = () => {
     ctx.body = res
   })
 
+  router.get('/undici', async (ctx) => {
+    await undici.fetch('https://jsonplaceholder.typicode.com/posts', {
+      headers: { h: 1 }
+    })
+    ctx.body = 'right'
+  })
+
   router.get('/unregister', async (ctx) => {
     unregister()
     ctx.body = 'Unregistered'

packages/network-debugger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-network-devtools",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "Inspecting Node.js's Network with Chrome DevTools",
   "homepage": "https://grinzero.github.io/node-network-devtools/",
   "main": "./dist/index.js",
@@ -60,5 +60,8 @@
     "iconv-lite": "^0.6.3",
     "open": "^8.4.2",
     "ws": "^8.17.0"
+  },
+  "peerDependencies": {
+    "undici": "^6"
   }
 }

packages/network-debugger/src/common.ts

@@ -92,4 +92,28 @@ export interface RegisterOptions {
    * @default true
    */
   autoOpenDevtool?: boolean
+
+  /**
+   * @description The option to intercept a certain packet.
+   *   If set false, the packet will not be intercepted.
+   */
+  intercept?: {
+    /**
+     * @default true
+     */
+    fetch?: boolean
+    /**
+     * @default true
+     */
+    normal?: boolean
+    /**
+     * @default false
+     */
+    undici?:
+      | false
+      | {
+          fetch?: false | {}
+          normal?: false | {}
+        }
+  }
 }

packages/network-debugger/src/core/fetch.ts

@@ -1,6 +1,7 @@
 import { RequestDetail } from '../common'
 import { headersToObject } from '../utils/map'
 import { MainProcess } from './fork'
+import { setCurrentCell } from './hooks/cell'
 
 export function proxyFetch(mainProcess: MainProcess) {
   if (!globalThis.fetch) {
@@ -15,10 +16,11 @@ export function proxyFetch(mainProcess: MainProcess) {
   }
 }
 
-function fetchProxyFactory(fetchFn: typeof fetch, mainProcess: MainProcess) {
+export function fetchProxyFactory(fetchFn: typeof fetch, mainProcess: MainProcess) {
   return function (request: string | URL | Request, options?: RequestInit) {
     const requestDetail = new RequestDetail()
-    requestDetail.requestStartTime = new Date().getTime()
+    requestDetail.requestStartTime = Date.now()
+    setCurrentCell({ request: requestDetail, pipes: [], isAborted: false })
 
     if (typeof request === 'string') {
       requestDetail.url = request
@@ -37,10 +39,15 @@ function fetchProxyFactory(fetchFn: typeof fetch, mainProcess: MainProcess) {
     }
     requestDetail.requestData = options?.body
 
-    mainProcess.registerRequest(requestDetail)
-    return fetchFn(request as string | Request, options)
+    const result = fetchFn(request as string | Request, options)
       .then(fetchResponseHandlerFactory(requestDetail, mainProcess))
       .catch(fetchErrorHandlerFactory(requestDetail, mainProcess))
+      .finally(() => {
+        setCurrentCell(null)
+      })
+
+    mainProcess.registerRequest(requestDetail)
+    return result
   }
 }
 

packages/network-debugger/src/core/fork.ts

@@ -9,6 +9,7 @@ import fs from 'fs'
 import { sleep, checkMainProcessAlive } from '../utils/process'
 import { unlinkSafe } from '../utils/file'
 import { warn } from '../utils'
+import { getCurrentCell } from './hooks/cell'
 
 class ExpectError extends Error {
   constructor(message: string) {
@@ -28,7 +29,7 @@ export class MainProcess {
       if (fs.existsSync(lockFilePath)) {
         // 读取 lock 文件中的进程号
         const pid = fs.readFileSync(lockFilePath, 'utf-8')
-        await sleep(800)
+        await sleep(1)
 
         // 检测该进程是否存活且 port 是否被占用
         const isProcessAlice = await checkMainProcessAlive(pid, props.port!)
@@ -97,6 +98,10 @@ export class MainProcess {
   }
 
   public async send(data: any) {
+    const currentCell = getCurrentCell()
+    if (currentCell?.isAborted) {
+      return
+    }
     const ws = await this.ws.catch((err) => {
       if (err instanceof ExpectError) {
         return null
@@ -108,9 +113,20 @@ export class MainProcess {
   }
 
   public registerRequest(request: RequestDetail) {
+    const currentCell = getCurrentCell()
+    let req = request
+    if (currentCell) {
+      currentCell.request = req
+      const pipes = currentCell.pipes.filter((p) => p.type === 'regsiter').map((p) => p.pipe)
+      pipes.forEach((pipe) => {
+        req = pipe(req)
+      })
+      currentCell.request = req
+    }
+
     this.send({
       type: 'registerRequest',
-      data: request
+      data: req
     })
   }
 

packages/network-debugger/src/core/hooks/cell.ts

@@ -0,0 +1,27 @@
+import { type RequestDetail } from '../../common'
+
+export interface Pipe<T = RequestDetail> {
+  (req: T): T
+}
+
+export interface Cell {
+  request: RequestDetail
+  pipes: Array<{
+    pipe: Pipe<RequestDetail>
+    type: 'regsiter'
+  }>
+  /**
+   * @default false
+   */
+  isAborted: boolean
+}
+
+let currentCell: Cell | null = null
+
+export function getCurrentCell() {
+  return currentCell
+}
+
+export function setCurrentCell(cell: Cell | null) {
+  currentCell = cell
+}

packages/network-debugger/src/core/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useRegisterRequest'
+export * from './useAbortRequest'

packages/network-debugger/src/core/hooks/useAbortRequest.ts

@@ -0,0 +1,13 @@
+import { getCurrentCell } from './cell'
+
+export const useAbortRequest = () => {
+  const cell = getCurrentCell()
+
+  if (!cell) {
+    throw new Error('useRegisterRequest must be used in request handler')
+  }
+
+  cell.isAborted = true
+
+  return
+}

packages/network-debugger/src/core/hooks/useRegisterRequest.ts

@@ -0,0 +1,21 @@
+import { RequestDetail } from '../../common'
+import { getCurrentCell } from './cell'
+
+export interface RegisterRequestHook {
+  (pipe: (req: RequestDetail) => RequestDetail): void
+}
+
+export const useRegisterRequest: RegisterRequestHook = (pipe) => {
+  const cell = getCurrentCell()
+
+  if (!cell) {
+    throw new Error('useRegisterRequest must be used in request handler')
+  }
+
+  cell.pipes.push({
+    pipe,
+    type: 'regsiter'
+  })
+
+  return
+}