feat(dev): visualize network requests in the development environment …

…on Chrome Devtools's network tab (DIYgod#17308)

* chore: add node-network-devtools to enhance development experience

* feat(dev): visualize network requests in the development environment on Chrome Devtools's network tab

* chore(deps): update node-network-devtools

* fix: lock error when ci

* chore: update node-network-devtools to v1.0.18

* chore: update node-network-devtools

* chore: use node-network-devtools v1.0.20

* feat: use hook to add custom headers for fetch

* fix: complex method 16

* test: add test for fetch

* fix: test type error

* fix: hard code

* chore(cr): rename the fetch.spec.ts to fetch.test.ts and use exact version

* chore: fix lock error

---------

lib/utils/ofetch.ts

@@ -1,6 +1,9 @@
 import { createFetch } from 'ofetch';
 import { config } from '@/config';
 import logger from '@/utils/logger';
+import { register } from 'node-network-devtools';
+
+process.env.NODE_ENV === 'dev' && register();
 
 const rofetch = createFetch().create({
     retryStatusCodes: [400, 408, 409, 425, 429, 500, 502, 503, 504],

lib/utils/request-rewriter/fetch.test.ts

@@ -0,0 +1,93 @@
+import { getCurrentCell, setCurrentCell } from 'node-network-devtools';
+import { useCustomHeader } from './fetch';
+import { describe, beforeEach, afterEach, test, expect } from 'vitest';
+
+const getInitRequest = () =>
+    ({
+        requestHeaders: {} as Record<string, string>,
+        id: '',
+        loadCallFrames: () => {},
+        cookies: '',
+        requestData: '',
+        responseData: '',
+        responseHeaders: {},
+        responseInfo: {},
+    }) satisfies NonNullable<ReturnType<typeof getCurrentCell>>['request'];
+
+enum Env {
+    dev = 'dev',
+    production = 'production',
+    test = 'test',
+}
+
+describe('useCustomHeader', () => {
+    let originalEnv: string;
+
+    beforeEach(() => {
+        originalEnv = process.env.NODE_ENV || Env.test;
+    });
+
+    afterEach(() => {
+        process.env.NODE_ENV = originalEnv;
+    });
+
+    test('should register request with custom headers in dev environment', () => {
+        process.env.NODE_ENV = Env.dev;
+
+        const headers = new Headers();
+        const headerText = 'authorization';
+        const headerValue = 'Bearer token';
+        headers.set(headerText, headerValue);
+
+        const req = getInitRequest();
+        setCurrentCell({
+            request: req,
+            pipes: [],
+            isAborted: false,
+        });
+
+        useCustomHeader(headers);
+
+        const cell = getCurrentCell();
+        expect(cell).toBeDefined();
+
+        let request = req;
+        if (cell) {
+            for (const { pipe } of cell.pipes) {
+                request = pipe(request);
+            }
+        }
+
+        expect(request.requestHeaders[headerText]).toEqual(headerValue);
+    });
+
+    test('should not register request in non-dev environment', () => {
+        process.env.NODE_ENV = Env.production;
+
+        const headers = new Headers();
+        const headerText = 'content-type';
+        const headerValue = 'application/json';
+
+        headers.set(headerText, headerValue);
+        const req = getInitRequest();
+
+        setCurrentCell({
+            request: req,
+            pipes: [],
+            isAborted: false,
+        });
+        useCustomHeader(headers);
+
+        const cell = getCurrentCell();
+        expect(cell).toBeDefined();
+
+        let request = req;
+        if (cell) {
+            for (const { pipe } of cell.pipes) {
+                request = pipe(request);
+            }
+        }
+
+        expect(req.requestHeaders[headerText]).toBeUndefined();
+    });
+});

lib/utils/request-rewriter/fetch.ts

@@ -3,6 +3,7 @@ import { config } from '@/config';
 import undici, { Request, RequestInfo, RequestInit } from 'undici';
 import proxy from '@/utils/proxy';
 import { RateLimiterMemory, RateLimiterQueue } from 'rate-limiter-flexible';
+import { useRegisterRequest } from 'node-network-devtools';
 
 const limiter = new RateLimiterMemory({
     points: 10,
@@ -14,6 +15,16 @@ const limiterQueue = new RateLimiterQueue(limiter, {
     maxQueueSize: 5000,
 });
 
+export const useCustomHeader = (headers: Headers) => {
+    process.env.NODE_ENV === 'dev' &&
+        useRegisterRequest((req) => {
+            for (const [key, value] of headers.entries()) {
+                req.requestHeaders[key] = value;
+            }
+            return req;
+        });
+};
+
 const wrappedFetch: typeof undici.fetch = async (input: RequestInfo, init?: RequestInit) => {
     const request = new Request(input, init);
     const options: RequestInit = {};
@@ -46,6 +57,8 @@ const wrappedFetch: typeof undici.fetch = async (input: RequestInfo, init?: Requ
         request.headers.delete('x-prefer-proxy');
     }
 
+    useCustomHeader(request.headers);
+
     // proxy
     if (!init?.dispatcher && proxy.dispatcher && (proxy.proxyObj.strategy !== 'on_retry' || isRetry)) {
         const proxyRegex = new RegExp(proxy.proxyObj.url_regex);

package.json

@@ -186,6 +186,7 @@
         "lint-staged": "15.2.10",
         "mockdate": "3.0.5",
         "msw": "2.4.3",
+        "node-network-devtools": "1.0.22",
         "prettier": "3.3.3",
         "remark-parse": "11.0.0",
         "supertest": "7.0.0",