feat: update network

packages/page-spy-base/src/network/common.ts

@@ -1,7 +1,6 @@
 import type { SpyNetwork } from '@huolala-tech/page-spy-types';
 import {
   isBlob,
-  isBrowser,
   isDocument,
   isFile,
   isFormData,
@@ -45,58 +44,6 @@ export function formatEntries(data: IterableIterator<[string, unknown]>) {
   return result;
 }
 
-// parse url params without URLSearchParams
-function parseUrlParams(url: string): [string, string][] {
-  const reg = /[?&]([^=#]+)=([^&#]*)/g;
-  const result: [string, string][] = [];
-  let match;
-
-  // eslint-disable-next-line no-cond-assign
-  while ((match = reg.exec(url)) !== null) {
-    const key = decodeURIComponent(match[1]);
-    const value = decodeURIComponent(match[2]);
-    result.push([key, value]);
-  }
-
-  return result;
-}
-
-// TODO: 这部分逻辑可以移到调试端去做？因为收集端可能不在浏览器环境
-export function resolveUrlInfo(target: URL | string, base?: string | URL) {
-  try {
-    let url: string;
-    let query: [string, string][];
-
-    if (isBrowser()) {
-      const { searchParams, href } = new URL(target, base);
-      url = href;
-      query = [...searchParams.entries()];
-    } else {
-      url = target.toString();
-      query = parseUrlParams(url);
-    }
-    // https://exp.com => "exp.com/"
-    // https://exp.com/ => "exp.com/"
-    // https://exp.com/devtools => "devtools"
-    // https://exp.com/devtools/ => "devtools/"
-    // https://exp.com/devtools?version=Mac/10.15.7 => "devtools?version=Mac/10.15.7"
-    // https://exp.com/devtools/?version=Mac/10.15.7 => "devtools/?version=Mac/10.15.7"
-    const name = url.replace(/^.*?([^/]+)(\/)*(\?.*?)?$/, '$1$2$3') || '';
-
-    return {
-      url,
-      name,
-      query,
-    };
-  } /* c8 ignore start */ catch (e) {
-    return {
-      url: 'Unknown',
-      name: 'Unknown',
-      query: null,
-    };
-  } /* c8 ignore stop */
-}
-
 export function getContentType(data: Document | RequestInit['body']) {
   if (!data) return null;
   if (isFormData(data)) {

packages/page-spy-base/src/request-item.ts

@@ -3,8 +3,6 @@ import { SpyNetwork } from '@huolala-tech/page-spy-types';
 export class RequestItem implements SpyNetwork.RequestInfo {
   id = '';
 
-  name: string = '';
-
   method: string = '';
 
   url: string = '';
@@ -39,8 +37,6 @@ export class RequestItem implements SpyNetwork.RequestInfo {
 
   costTime: number = 0;
 
-  getData: [string, string][] | null = null;
-
   /**
    * @deprecated please using `requestPayload`
    */

packages/page-spy-browser/src/plugins/network/proxy/beacon-proxy.ts

@@ -3,7 +3,6 @@ import {
   getRandomId,
   psLog,
   getFormattedBody,
-  resolveUrlInfo,
 } from '@huolala-tech/page-spy-base';
 import WebNetworkProxyBase from './base';
 
@@ -39,10 +38,7 @@ export default class BeaconProxy extends WebNetworkProxyBase {
       that.createRequest(id);
       const req = that.getRequest(id);
       if (req) {
-        const urlInfo = resolveUrlInfo(url, window.location.href);
-        req.url = urlInfo.url;
-        req.name = urlInfo.name;
-        req.getData = urlInfo.query;
+        req.url = new URL(url, window.location.href).toString();
         req.method = 'POST';
         req.status = 0;
         req.statusText = 'Pending';

packages/page-spy-browser/src/plugins/network/proxy/fetch-proxy.ts

@@ -10,7 +10,6 @@ import {
   getFormattedBody,
   MAX_SIZE,
   Reason,
-  resolveUrlInfo,
 } from '@huolala-tech/page-spy-base';
 import WebNetworkProxyBase from './base';
 
@@ -59,11 +58,7 @@ export default class FetchProxy extends WebNetworkProxyBase {
           requestHeader = input.headers;
         }
 
-        const urlInfo = resolveUrlInfo(url, window.location.href);
-        req.url = urlInfo.url;
-        req.name = urlInfo.name;
-        req.getData = urlInfo.query;
-
+        req.url = new URL(url, window.location.href).toString();
         req.method = method.toUpperCase();
         req.requestType = 'fetch';
         req.status = 0;

packages/page-spy-browser/src/plugins/network/proxy/sse-proxy.ts

@@ -2,7 +2,6 @@ import {
   getRandomId,
   RequestItem,
   ReqReadyState,
-  resolveUrlInfo,
 } from '@huolala-tech/page-spy-base';
 import WebNetworkProxyBase from './base';
 
@@ -40,11 +39,8 @@ export default class SSEProxy extends WebNetworkProxyBase {
       constructor(url: string | URL, eventSourceInitDict?: EventSourceInit) {
         const id = getRandomId();
         const req = new RequestItem(id);
-        const urlInfo = resolveUrlInfo(url, window.location.href);
+        req.url = new URL(url, window.location.href).toString();
         req.method = 'GET';
-        req.url = urlInfo.url;
-        req.name = urlInfo.name;
-        req.getData = urlInfo.query;
         req.requestType = 'eventsource';
         req.requestHeader = [
           ['Accept', 'text/event-stream'],

packages/page-spy-browser/src/plugins/network/proxy/xhr-proxy.ts

@@ -11,7 +11,6 @@ import {
   Reason,
   addContentTypeHeader,
   getFormattedBody,
-  resolveUrlInfo,
   RequestItem,
 } from '@huolala-tech/page-spy-base';
 import WebNetworkProxyBase from './base';
@@ -144,10 +143,7 @@ class XhrProxy extends WebNetworkProxyBase {
       } = XMLReq;
       const req = that.getRequest(pageSpyRequestId);
       if (req) {
-        const urlInfo = resolveUrlInfo(pageSpyRequestUrl, window.location.href);
-        req.url = urlInfo.url;
-        req.name = urlInfo.name;
-        req.getData = urlInfo.query;
+        req.url = new URL(pageSpyRequestUrl, window.location.href).toString();
         req.method = pageSpyRequestMethod.toUpperCase();
         req.requestType = 'xhr';
         req.responseType = XMLReq.responseType;

packages/page-spy-browser/tests/plugins/network/common.test.ts

@@ -4,9 +4,7 @@ import {
   formatEntries,
   getContentType,
   getFormattedBody,
-  resolveUrlInfo,
 } from 'page-spy-base/src';
-import { isBrowser, toStringTag } from 'page-spy-base/src';
 
 describe('Network utilities', () => {
   // format the USP and FormData data which be used in request payload,
@@ -39,51 +37,6 @@ describe('Network utilities', () => {
     expect(usp_data_format).toEqual(usp_data_result);
   });
 
-  describe('resolveUrlInfo()', () => {
-    it('Normal location context', () => {
-      const urlInfo = resolveUrlInfo('./foo?bar=bar', 'http://localhost/');
-      expect(urlInfo).toEqual({
-        url: 'http://localhost/foo?bar=bar',
-        name: 'foo?bar=bar',
-        query: [['bar', 'bar']],
-      });
-    });
-    it('Unknown wired location context', () => {
-      const originLocation = window.location;
-      Object.defineProperty(window, 'location', {
-        value: {
-          href: null,
-        },
-        writable: true,
-      });
-      const urlInfo = resolveUrlInfo('./foo?bar=bar');
-      expect(urlInfo).toEqual({
-        url: 'Unknown',
-        name: 'Unknown',
-        query: null,
-      });
-      window.location = originLocation;
-    });
-    it('Format `Name` field', () => {
-      [
-        { received: 'https://exp.com', expected: 'exp.com/' },
-        { received: 'https://exp.com/', expected: 'exp.com/' },
-        { received: 'https://exp.com/devtools', expected: 'devtools' },
-        { received: 'https://exp.com/devtools/', expected: 'devtools/' },
-        {
-          received: 'https://exp.com/devtools?version=Mac/10.15.7',
-          expected: 'devtools?version=Mac/10.15.7',
-        },
-        {
-          received: 'https://exp.com/devtools/?version=Mac/10.15.7',
-          expected: 'devtools/?version=Mac/10.15.7',
-        },
-      ].forEach(({ received, expected }) => {
-        expect(resolveUrlInfo(received).name).toBe(expected);
-      });
-    });
-  });
-
   it('getContentType()', () => {
     [
       {

packages/page-spy-harmony/entry/src/main/ets/entryability/EntryAbility.ets

@@ -18,6 +18,7 @@ export default class EntryAbility extends UIAbility {
     const $pageSpy = new PageSpy({
       context: this.context,
       api: 'page-spy-web-v.huolala.work',
+      enableSSL: true,
       axios,
       project: 'hello-harmony',
       title: '测试 API-11'

packages/page-spy-harmony/library/src/main/ets/plugins/network/axios.ts

@@ -1,7 +1,7 @@
 import { getRandomId, isString } from '../../utils';
 import {
+  getFullPath,
   ReqReadyState,
-  resolveUrlInfo,
   ResponseType,
 } from '../../utils/network/common';
 import NetworkProxyBase from '../../utils/network/base';
@@ -28,11 +28,7 @@ export default class AxiosProxy extends NetworkProxyBase {
       this.createRequest(id);
       const reqItem = this.getRequest(id);
 
-      const urlInfo = resolveUrlInfo(config);
-      reqItem.url = urlInfo.url;
-      reqItem.name = urlInfo.name;
-      reqItem.getData = urlInfo.getData;
-
+      reqItem.url = getFullPath(config);
       reqItem.method = config.method;
       reqItem.status = 0;
       reqItem.statusText = 'Pending';

packages/page-spy-harmony/library/src/main/ets/types/lib/network.d.ts

@@ -1,6 +1,5 @@
 export interface RequestInfo {
   id: string;
-  name: string;
   method: string;
   url: string;
   requestType: string;
@@ -28,7 +27,6 @@ export interface RequestInfo {
   startTime: number;
   endTime: number;
   costTime: number;
-  getData: [string, string][] | null;
   /**
    * @deprecated please using `requestPayload`
    */

packages/page-spy-harmony/library/src/main/ets/utils/network/common.ts

@@ -58,23 +58,15 @@ export function toLowerKeys(obj: any) {
   return lowerKeys;
 }
 
-export function resolveUrlInfo(config: AxiosRequestConfig) {
+export function getFullPath(config: AxiosRequestConfig) {
   const urlObj = url.URL.parseURL(config.url, config.baseURL);
-  Object.entries(config.params || {}).forEach(([key, value]) => {
-    try {
-      urlObj.params.append(key, JSON.stringify(value));
-    } catch (e) {
-      psLog.warn(
-        `params[${key}] with invalid value in request: ${urlObj.href}`,
-      );
-    }
-  });
+  if (!config.params) return urlObj.toString();
 
-  const getData = [...urlObj.params.entries()];
+  const searchParams = new url.URLParams(urlObj.search.slice(1));
+  Object.entries(config.params).forEach(([key, val]) => {
+    searchParams.append(key, val.toString());
+  });
 
-  return {
-    url: urlObj.toString(),
-    name: urlObj.pathname,
-    getData,
-  };
+  const fullpath = `${urlObj.pathname}?${searchParams.toString()}`;
+  return url.URL.parseURL(fullpath, config.baseURL).toString();
 }

packages/page-spy-harmony/library/src/main/ets/utils/request-item.ts

@@ -4,8 +4,6 @@ import { ReqReadyState, ResponseType } from './network/common';
 export class RequestItem implements SpyNetwork.RequestInfo {
   id = '';
 
-  name: string = '';
-
   method: string = 'GET';
 
   url: string = '';
@@ -34,8 +32,6 @@ export class RequestItem implements SpyNetwork.RequestInfo {
 
   costTime: number = 0;
 
-  getData: [string, string][] | null = null;
-
   /**
    * @deprecated please using `requestPayload`
    */

packages/page-spy-react-native/src/plugins/network/proxy/fetch-proxy.ts

@@ -10,7 +10,6 @@ import {
   getFormattedBody,
   MAX_SIZE,
   Reason,
-  resolveUrlInfo,
 } from '@huolala-tech/page-spy-base';
 import RNNetworkProxyBase from './base';
 import { IS_FETCH_HEADER } from './xhr-proxy';
@@ -70,11 +69,7 @@ export default class FetchProxy extends RNNetworkProxyBase {
           requestHeader = input.headers;
         }
 
-        const urlInfo = resolveUrlInfo(url);
-        req.url = urlInfo.url;
-        req.name = urlInfo.name;
-        req.getData = urlInfo.query;
-
+        req.url = new URL(url).toString();
         req.method = method.toUpperCase();
         req.requestType = 'fetch';
         req.status = 0;

packages/page-spy-react-native/src/plugins/network/proxy/xhr-proxy.ts

@@ -12,7 +12,6 @@ import {
   Reason,
   addContentTypeHeader,
   getFormattedBody,
-  resolveUrlInfo,
 } from '@huolala-tech/page-spy-base';
 import RNNetworkProxyBase from './base';
 
@@ -194,10 +193,7 @@ class XhrProxy extends RNNetworkProxyBase {
       });
 
       if (req) {
-        const urlInfo = resolveUrlInfo(pageSpyRequestUrl);
-        req.url = urlInfo.url;
-        req.name = urlInfo.name;
-        req.getData = urlInfo.query;
+        req.url = new URL(pageSpyRequestUrl).toString();
         req.method = pageSpyRequestMethod.toUpperCase();
         req.requestType = 'xhr';
         req.withCredentials = XMLReq.withCredentials;

packages/page-spy-types/lib/network.d.ts

@@ -1,6 +1,5 @@
 export interface RequestInfo {
   id: string;
-  name: string;
   method: string;
   url: string;
   requestType:
@@ -34,7 +33,6 @@ export interface RequestInfo {
   startTime: number;
   endTime: number;
   costTime: number;
-  getData: [string, string][] | null;
   /**
    * @deprecated please using `requestPayload`
    */