diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index b7207ddef..38ebdf365 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -128,6 +128,21 @@ export function renderDuration(r: any) { ); } +function renderStatus({ status }) { + + return ( + <> + {parseInt(status, 10) === 200 ? ( + +
+ {status} + +
+
+ ) : status} + + ) +} function NetworkPanel({ startedAt }: { startedAt: number }) { const { player, store } = React.useContext(PlayerContext) @@ -348,7 +363,8 @@ function NetworkPanel({ startedAt }: { startedAt: number }) { { label: 'Status', dataKey: 'status', - width: 70, + width: 90, + render: renderStatus, }, { label: 'Type', diff --git a/mobs/run.rb b/mobs/run.rb index 8d481e3b3..398068f95 100644 --- a/mobs/run.rb +++ b/mobs/run.rb @@ -113,7 +113,6 @@ $ids = [] $messages = [] def message(id, name, opts = {}, &block) raise "id duplicated #{name}" if $ids.include? id - raise "id is too big #{name}" if id > 127 $ids << id opts[:id] = id opts[:name] = name diff --git a/tracker/tracker/src/main/modules/network.ts b/tracker/tracker/src/main/modules/network.ts index fdaed16c6..a85a0bb1b 100644 --- a/tracker/tracker/src/main/modules/network.ts +++ b/tracker/tracker/src/main/modules/network.ts @@ -35,6 +35,16 @@ type FetchRequestBody = RequestInit['body'] // } // } +function checkCacheByPerformanceTimings(requestUrl: string) { + if (performance) { + const timings = performance.getEntriesByName(requestUrl)[0] + // @ts-ignore - weird ts typings, please refer to https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming + if (timings.transferSize === 0 || timings.responseStart - timings.requestStart < 10) { + return true + } + } else return false +} + interface RequestData { body: XHRRequestBody | FetchRequestBody headers: Record @@ -208,6 +218,10 @@ export default function (app: App, opts: Partial = {}) { return } + const isCached = + r.status === 304 || + reqHs['x-cache'].includes('Hit') || + checkCacheByPerformanceTimings(reqResInfo.url) app.send( NetworkRequest( 'fetch', @@ -215,7 +229,7 @@ export default function (app: App, opts: Partial = {}) { String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), - r.status, + isCached ? 304 : r.status, startTime + getTimeOrigin(), duration, ), @@ -274,6 +288,10 @@ export default function (app: App, opts: Partial = {}) { return } + const isCached = + xhr.status === 304 || + reqHs['x-cache'].includes('Hit') || + (xhr.status < 400 && checkCacheByPerformanceTimings(reqResInfo.url)) app.send( NetworkRequest( 'xhr', @@ -281,7 +299,7 @@ export default function (app: App, opts: Partial = {}) { String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), - xhr.status, + isCached ? 304 : xhr.status, startTime + getTimeOrigin(), duration, ),