From b081abef363bd7b0dd3159b9ef35cafaa78544bf Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Wed, 15 Nov 2023 21:08:54 +0000 Subject: [PATCH] feat: show request method (#18666) * show request method * feat: show request method * logically can be nothing so.... --- ...components-networkrequesttiming--basic.png | Bin 10800 -> 10527 bytes .../components/ItemPerformanceEvent.tsx | 49 ++++++---- .../Timing/NetworkRequestTiming.tsx | 90 ++++++++---------- .../inspector/performance-event-utils.ts | 2 + frontend/src/types.ts | 1 + 5 files changed, 73 insertions(+), 69 deletions(-) diff --git a/frontend/__snapshots__/components-networkrequesttiming--basic.png b/frontend/__snapshots__/components-networkrequesttiming--basic.png index ff34c2d27d47919d5bd910dd27e553ee7f2233e5..8247b433f71c8f2b4e1682d1e2f887655045bc2b 100644 GIT binary patch literal 10527 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%0AY_m%)4M!`k-fUI? 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 diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx index 4dbd3cd4b3f2c..96c4a9e01a143 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx @@ -317,7 +317,7 @@ export function ItemPerformanceEvent({ ) : ( <> - +

Request started at{' '} @@ -466,29 +466,44 @@ function HeadersDisplay({ ) } -function StatusRow({ status }: { status: number | undefined }): JSX.Element | null { - if (status === undefined) { - return null - } +function StatusRow({ item }: { item: PerformanceEvent }): JSX.Element | null { + let statusRow = null + let methodRow = null + + if (item.response_status) { + const statusDescription = `${item.response_status} ${friendlyHttpStatus[item.response_status] || ''}` - const statusDescription = `${status} ${friendlyHttpStatus[status] || ''}` + let statusType: LemonTagType = 'success' + if (item.response_status >= 400 || item.response_status < 100) { + statusType = 'warning' + } else if (item.response_status >= 500) { + statusType = 'danger' + } - let statusType: LemonTagType = 'success' - if (status >= 400 || status < 100) { - statusType = 'warning' - } else if (status >= 500) { - statusType = 'danger' + statusRow = ( +

+
Status code
+ {statusDescription} +
+ ) } - return ( + if (item.method) { + methodRow = ( +
+
Request method
+
{item.method}
+
+ ) + } + + return methodRow || statusRow ? (

-
- Status code - {statusDescription} -
+ {methodRow} + {statusRow}

- ) + ) : null } diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx index df65c02326529..f77aeadf524dd 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx @@ -8,35 +8,6 @@ import { LemonDivider } from 'lib/lemon-ui/LemonDivider' import { SimpleKeyValueList } from 'scenes/session-recordings/player/inspector/components/SimpleKeyValueList' import { LemonButton } from 'lib/lemon-ui/LemonButton' -function colorForEntry(entryType: string | undefined): string { - switch (entryType) { - case 'domComplete': - return getSeriesColor(1) - case 'domInteractive': - return getSeriesColor(2) - case 'pageLoaded': - return getSeriesColor(3) - case 'first-contentful-paint': - return getSeriesColor(4) - case 'css': - return getSeriesColor(6) - case 'xmlhttprequest': - return getSeriesColor(7) - case 'fetch': - return getSeriesColor(8) - case 'other': - return getSeriesColor(9) - case 'script': - return getSeriesColor(10) - case 'link': - return getSeriesColor(11) - case 'first-paint': - return getSeriesColor(11) - default: - return getSeriesColor(13) - } -} - export interface EventPerformanceMeasure { start: number end: number @@ -50,7 +21,8 @@ const perfSections = [ 'dns lookup', 'connection time', 'tls time', - 'waiting for first byte (TTFB)', + 'request queuing time', + 'waiting for first byte', 'receiving response', 'document processing', ] as const @@ -62,7 +34,9 @@ const perfDescriptions: Record<(typeof perfSections)[number], string> = { 'dns lookup': 'The time taken to complete any DNS lookup for the resource.', 'connection time': 'The time taken to establish a connection to the server to retrieve the resource.', 'tls time': 'The time taken for the SSL/TLS handshake.', - 'waiting for first byte (TTFB)': 'The time taken waiting for the server to start returning a response.', + 'request queuing time': "The time taken waiting in the browser's task queue once ready to make a request.", + 'waiting for first byte': + 'The time taken waiting for the server to start returning a response. Also known as TTFB or time to first byte.', 'receiving response': 'The time taken to receive the response from the server.', 'document processing': 'The time taken to process the document after the response from the server has been received.', @@ -71,29 +45,36 @@ const perfDescriptions: Record<(typeof perfSections)[number], string> = { function colorForSection(section: (typeof perfSections)[number]): string { switch (section) { case 'redirect': - return getSeriesColor(1) - case 'app cache': return getSeriesColor(2) - case 'dns lookup': + case 'app cache': return getSeriesColor(3) - case 'connection time': + case 'dns lookup': return getSeriesColor(4) + case 'connection time': + return getSeriesColor(5) case 'tls time': return getSeriesColor(6) - case 'waiting for first byte (TTFB)': + case 'request queuing time': return getSeriesColor(7) - case 'receiving response': + case 'waiting for first byte': return getSeriesColor(8) - case 'document processing': + case 'receiving response': return getSeriesColor(9) - default: + case 'document processing': return getSeriesColor(10) + default: + return getSeriesColor(11) } } /** * There are defined sections to performance measurement. We may have data for some or all of them * + * + * 0) Queueing + * - from start_time + * - until the first item with activity + * * 1) Redirect * - from startTime which would also be redirectStart * - until redirect_end @@ -127,9 +108,6 @@ function colorForSection(section: (typeof perfSections)[number]): string { * - until load_event_end * * see https://nicj.net/resourcetiming-in-practice/ - * - * @param perfEntry - * @param maxTime */ function calculatePerformanceParts(perfEntry: PerformanceEvent): Record { const performanceParts: Record = {} @@ -138,7 +116,7 @@ function calculatePerformanceParts(perfEntry: PerformanceEvent): Record 1) { // find in eventsMapping[capturedRequest.url][capturedRequest.startTime] by matching capturedRequest.endTime and element.response_end const matchedEndTime = matchedStartTime.find( @@ -135,6 +136,7 @@ export function matchNetworkEvents(snapshotsByWindowId: Record request_body?: Body response_body?: Body + method?: string } export interface CurrentBillCycleType {