Merge pull request #245 from HuolalaTech/optimize/network-lifecycle-in-replay

show whole lifecycle for network request when replay

Author: wqcstrong

src/components/NetworkTable/index.less

@@ -32,24 +32,6 @@
       &.active {
         background-color: @tbody-select-bg;
       }
-      &:nth-child(1) {
-        width: 20%;
-      }
-      &:nth-child(2) {
-        width: 38%;
-      }
-      &:nth-child(3) {
-        width: 12%;
-      }
-      &:nth-child(4) {
-        width: 10%;
-      }
-      &:nth-child(5) {
-        width: 10%;
-      }
-      &:nth-child(6) {
-        width: 10%;
-      }
       &:last-child {
         border-right: none;
       }
@@ -77,6 +59,26 @@
   }
 
   .network-list {
+    td {
+      &:nth-child(1) {
+        width: 20%;
+      }
+      &:nth-child(2) {
+        width: 38%;
+      }
+      &:nth-child(3) {
+        width: 12%;
+      }
+      &:nth-child(4) {
+        width: 10%;
+      }
+      &:nth-child(5) {
+        width: 10%;
+      }
+      &:nth-child(6) {
+        width: 10%;
+      }
+    }
     &__header {
       position: sticky;
       top: 0;
@@ -225,7 +227,7 @@
             width: 8%;
           }
           &:nth-child(4) {
-            width: 15%;
+            width: 100px;
           }
         }
       }

src/store/replay.ts

@@ -252,39 +252,36 @@ export const useReplayStore = create<ReplayStore>((set, get) => ({
     const { allNetworkMsg, networkMsg } = get();
 
     let networkIndex = 0;
-    const eventSourceData: Record<string, SpyNetwork.RequestInfo> = {};
-    const showedNetworkMsg: SpyNetwork.RequestInfo[] = [];
+    const showedNetworkMsg: Map<string, SpyNetwork.RequestInfo> = new Map();
     while (
       networkIndex < allNetworkMsg.length &&
       allNetworkMsg[networkIndex].timestamp <= currentTime
     ) {
       const { data } = allNetworkMsg[networkIndex];
       const { id, requestType, endTime, response } = data;
-      // @ts-ignore
+
       if (requestType === 'eventsource') {
-        if (!eventSourceData[id]) {
+        if (!showedNetworkMsg.has(id)) {
           const result = {
             ...data,
             response: [{ time: endTime, data: response }],
           };
-          eventSourceData[id] = result;
-          showedNetworkMsg.push(result);
+          showedNetworkMsg.set(id, result);
         } else {
-          // 通过 response 数组引用直接修改
-          eventSourceData[id].response.push({
+          showedNetworkMsg.get(id)!.response.push({
             time: endTime,
             data: response,
           });
         }
       } else {
-        showedNetworkMsg.push(data);
+        showedNetworkMsg.set(id, data);
       }
       networkIndex += 1;
     }
 
     set(
       produce((state) => {
-        state.networkMsg = showedNetworkMsg;
+        state.networkMsg = [...showedNetworkMsg.values()];
       }),
     );
   },