Merge pull request #279 from HuolalaTech/fix/event-stream

Fill 'id' in EventStream
HuolalaTech · Nov 18, 2024 · 91d9912 · 91d9912
2 parents 6f38a59 + d86915c
commit 91d9912
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -49,10 +49,10 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@huolala-tech/page-spy-browser": "^1.9.13",
-    "@huolala-tech/page-spy-plugin-data-harbor": "^1.3.11",
-    "@huolala-tech/page-spy-plugin-rrweb": "^1.2.7",
-    "@huolala-tech/page-spy-plugin-whole-bundle": "^0.0.9",
+    "@huolala-tech/page-spy-browser": "^1.9.14",
+    "@huolala-tech/page-spy-plugin-data-harbor": "^1.3.12",
+    "@huolala-tech/page-spy-plugin-rrweb": "^1.2.8",
+    "@huolala-tech/page-spy-plugin-whole-bundle": "^0.0.10",
     "@huolala-tech/page-spy-types": "^1.9.6",
     "@huolala-tech/react-json-view": "^1.2.5",
     "@huolala-tech/request": "^1.1.2",

diff --git a/src/components/NetworkTable/ResponseBody/index.tsx b/src/components/NetworkTable/ResponseBody/index.tsx
@@ -120,6 +120,7 @@ const MediaWidget = ({ dataUrl }: MediaWidgetProps) => {
 };
 
 interface EventData {
+  id: string;
   time: number;
   data: string;
 }
@@ -138,7 +139,7 @@ const EventStream = ({ data }: { data: EventData[] }) => {
         <tbody>
           {data.map((item, index) => (
             <tr key={index}>
-              <td>--</td>
+              <td>{item.id}</td>
               <td>message</td>
               <td>
                 <ReactJsonView source={item.data} />

diff --git a/src/store/socket-message/index.ts b/src/store/socket-message/index.ts
@@ -4,7 +4,6 @@ import { produce } from 'immer';
 import { CUSTOM_EVENT, SocketStore } from './socket';
 import {
   SpyConsole,
-  SpyNetwork,
   SpySystem,
   SpyPage,
   SpyStorage,
@@ -18,6 +17,7 @@ import { getFixedPageMsg, processMPNetworkMsg } from './utils';
 import { isArray, isEqual, isString, omit } from 'lodash-es';
 import { parseClientInfo, ParsedClientInfo } from '@/utils/brand';
 import { StorageType } from '../platform-config';
+import type { RequestItem } from '@huolala-tech/page-spy-base';
 
 const USER_ID = 'Debugger';
 
@@ -107,7 +107,7 @@ export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
         }),
       );
     });
-    socket.addListener('network', (data: SpyNetwork.RequestInfo) => {
+    socket.addListener('network', (data: RequestItem) => {
       const { name, pathname, getData } = resolveUrlInfo(data.url);
 
       const newData: ResolvedNetworkInfo = {
@@ -125,41 +125,46 @@ export const useSocketMessageStore = create<SocketMessage>((set, get) => ({
       if (browserType.startsWith('mp-') || sdk === 'uniapp' || sdk === 'taro') {
         processMPNetworkMsg(newData);
       }
-      const cache = get().networkMsg;
       // 整理 xhr 的消息
       const { id } = newData;
+      const cache = get().networkMsg;
       const index = cache.findIndex((item) => item.id === id);
       if (index !== -1) {
-        const { requestType, response = '', status, endTime } = newData;
+        const {
+          requestType,
+          response = '',
+          status,
+          endTime,
+          lastEventId,
+        } = newData;
         // eventsource 需要合并 response
         // eventsource 的 'open / error' 事件都没有 response，'message' 事件可能会带着 response
         // status === 200 是在 SDK 中硬编码的，和 'message' 事件对应
         if (requestType === 'eventsource' && status === 200) {
-          const { response: cacheData, endTime: cacheTime } = cache[index];
-          if (!cacheData) {
-            newData.response = [
-              {
-                time: endTime,
-                data: response,
-              },
-            ];
-          }
+          const {
+            response: cacheData,
+            endTime: cacheTime,
+            lastEventId: cacheId,
+          } = cache[index];
           if (isString(cacheData)) {
             newData.response = [
               {
+                id: cacheId,
                 time: cacheTime,
                 data: cacheData,
               },
               {
+                id: lastEventId,
                 time: endTime,
                 data: response,
               },
             ];
           }
-          if (isArray(cache[index].response)) {
+          if (isArray(cacheData)) {
             newData.response = [
-              ...cache[index].response,
+              ...cacheData,
               {
+                id: lastEventId,
                 time: endTime,
                 data: response,
               },

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,4 +1,4 @@
-import { SpyNetwork } from '@huolala-tech/page-spy-types';
+import type { RequestItem } from '@huolala-tech/page-spy-base';
 import {
   EventType,
   eventWithTime,
@@ -98,7 +98,7 @@ export function resolveUrlInfo(url: string): ResolvedUrlInfo {
   }
 }
 
-export type ResolvedNetworkInfo = SpyNetwork.RequestInfo & ResolvedUrlInfo;
+export type ResolvedNetworkInfo = RequestItem & ResolvedUrlInfo;
 
 interface RRWebClickEvent {
   type: EventType.IncrementalSnapshot;

diff --git a/yarn.lock b/yarn.lock
@@ -742,43 +742,50 @@
   dependencies:
     "@huolala-tech/page-spy-types" "^1.9.6"
 
-"@huolala-tech/page-spy-browser@^1.9.13":
-  version "1.9.13"
-  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-browser/-/page-spy-browser-1.9.13.tgz#33975e10716590b99cfe6074ebc00ca5e6e227ab"
-  integrity sha512-Bb6Vz3lZaaH9Ko36xm9jxKCdPHysk27k2uL+5jlqZ/x03ecqTAcrpHfKt7oBqbUXYLLaWyYydXr8OQ6s8rtvvg==
+"@huolala-tech/page-spy-base@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-base/-/page-spy-base-1.0.7.tgz#8fdabfd24a05607192c94cc36bdff6b92c1e389f"
+  integrity sha512-4t3xqbE8p8PPbrY8Wrzg6KTkQ/9k0UYPo02AjotV9mejRcvzkYU8E/I8EbBYTfqXCo02ObuVeJK9/o2vQs1uxA==
+  dependencies:
+    "@huolala-tech/page-spy-types" "^1.9.7"
+
+"@huolala-tech/page-spy-browser@^1.9.14":
+  version "1.9.14"
+  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-browser/-/page-spy-browser-1.9.14.tgz#d400bdab9523978a21fa7d8c350c529f51b57dea"
+  integrity sha512-QNtxAnkVLlDu0Z3QTWzy0EXCEiUeSAWKht+EgC0pClU6X87Ss3aMbIgzRSBhIW/8rG0bVaKRY1TG+nrb+qPYMQ==
   dependencies:
     "@babel/runtime" "^7.13.0"
-    "@huolala-tech/page-spy-base" "^1.0.6"
-    "@huolala-tech/page-spy-types" "^1.9.6"
+    "@huolala-tech/page-spy-base" "^1.0.7"
+    "@huolala-tech/page-spy-types" "^1.9.7"
     copy-to-clipboard "^3.3.1"
 
-"@huolala-tech/page-spy-plugin-data-harbor@^1.3.11":
-  version "1.3.11"
-  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-plugin-data-harbor/-/page-spy-plugin-data-harbor-1.3.11.tgz#9745e0a5b278fffd4f1929a3dbbfa84ff17f589a"
-  integrity sha512-O8+MsV13QA+poKxUas/YQNFI9nImEKE6yCrQAqclq+qs/GkQaZluYpiEEkbONSQ8Umxq8ERW1Pxh81aCOcouWw==
+"@huolala-tech/page-spy-plugin-data-harbor@^1.3.12":
+  version "1.3.12"
+  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-plugin-data-harbor/-/page-spy-plugin-data-harbor-1.3.12.tgz#e0ebc0c9174edb4bfab415c68f65f49629963572"
+  integrity sha512-awkm9yKyEPmII74UtPTzYRwPSX3xrFmE4qHFMUQKM1RT15u85zGzPbOiU5pkJ+B1OTBlIUlmvd76T3XIZrDHmg==
   dependencies:
     "@babel/runtime" "^7.13.0"
-    "@huolala-tech/page-spy-base" "^1.0.6"
+    "@huolala-tech/page-spy-base" "^1.0.7"
     fflate "^0.8.1"
 
-"@huolala-tech/page-spy-plugin-rrweb@^1.2.7":
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-plugin-rrweb/-/page-spy-plugin-rrweb-1.2.7.tgz#ee46416a1ca72c3c94b2a35c7989ccf5ddaad8d7"
-  integrity sha512-TPuQfKep0hR33aaSnM8NoKTClYDjKcrovjn51G3r5P+E4JOSHyMJZx4q+Z1t4kkKcRr260vJNlcpi7C8CpbISg==
+"@huolala-tech/page-spy-plugin-rrweb@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-plugin-rrweb/-/page-spy-plugin-rrweb-1.2.8.tgz#9cc7e2969df8d06f810d5049ba104c7f27cbfc30"
+  integrity sha512-uuOEnMbyZiKv/3gAm86FEmQ04BH1Uipx5teZTJ5XCX7ocGZ144yI/3o/cavnIwqMIT//tkEmUjZUjhTf+XlX3w==
   dependencies:
     "@babel/runtime" "^7.13.0"
-    "@huolala-tech/page-spy-base" "^1.0.6"
-    "@huolala-tech/page-spy-types" "^1.9.6"
+    "@huolala-tech/page-spy-base" "^1.0.7"
+    "@huolala-tech/page-spy-types" "^1.9.7"
     rrweb "^2.0.0-alpha.4"
 
-"@huolala-tech/page-spy-plugin-whole-bundle@^0.0.9":
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-plugin-whole-bundle/-/page-spy-plugin-whole-bundle-0.0.9.tgz#c2137b06dc236c082a825835054f6e4dcb53c404"
-  integrity sha512-rZFVf1gTwgSLUHmbX6DmukGPHS0Vz+CiCe4bs2rSdl1qC94wfoGKhGLEtWfi3hQdZqkub9+4EJVdyKlDu3S8/A==
+"@huolala-tech/page-spy-plugin-whole-bundle@^0.0.10":
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-plugin-whole-bundle/-/page-spy-plugin-whole-bundle-0.0.10.tgz#03beb851e3812843ef6a5167f2173a971d464ab0"
+  integrity sha512-4vfGPkG7IpMYIgYrlQP/iOCvnnS440W4YMWA+HDG/Lmulzshhb2cTyZNPYx01F95uHt8E3Bo21j/48GPAART0g==
   dependencies:
-    "@huolala-tech/page-spy-browser" "^1.9.13"
-    "@huolala-tech/page-spy-plugin-data-harbor" "^1.3.11"
-    "@huolala-tech/page-spy-plugin-rrweb" "^1.2.7"
+    "@huolala-tech/page-spy-browser" "^1.9.14"
+    "@huolala-tech/page-spy-plugin-data-harbor" "^1.3.12"
+    "@huolala-tech/page-spy-plugin-rrweb" "^1.2.8"
 
 "@huolala-tech/page-spy-types@^1.9.6":
   version "1.9.6"
@@ -787,6 +794,13 @@
   dependencies:
     "@huolala-tech/page-spy-base" "^1.0.6"
 
+"@huolala-tech/page-spy-types@^1.9.7":
+  version "1.9.7"
+  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy-types/-/page-spy-types-1.9.7.tgz#7d8eb3d76497088de814396c3cf6a77260c73514"
+  integrity sha512-ZxarPu4rPCOGoiv7SCxijSlXE3AK8QZY8Gd/mJvUb2lQ2A1z+AoaU9wwc00aucHms17ndTWwBgjv8t1pzS7y1g==
+  dependencies:
+    "@huolala-tech/page-spy-base" "^1.0.7"
+
 "@huolala-tech/react-json-view@^1.2.5":
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/@huolala-tech/react-json-view/-/react-json-view-1.2.5.tgz#fa593f8bff9ac30a4c21f7f9cd5987d7f9ed3199"