diff --git a/package.json b/package.json index 58585b31..60012149 100644 --- 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 index 30b0b364..178b3c3f 100644 --- 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[] }) => { {data.map((item, index) => ( - -- + {item.id} message diff --git a/src/store/socket-message/index.ts b/src/store/socket-message/index.ts index 42637e59..e66d3e13 100644 --- 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((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((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 index 47ce44d9..df0c8b31 100644 --- 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 index 0bcf6263..5993e82b 100644 --- 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"