Skip to content

Commit

Permalink
feat: performance event display fiddling (#18629)
Browse files Browse the repository at this point in the history 
* only show wrapping data for fetch and xnr

* show prettier timing

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@pauldambra @github-actions
pauldambra and github-actions[bot] authored Nov 15, 2023
1 parent a81c1c7 commit 76c8652
Show file tree
Hide file tree
Showing 5 changed files with 430 additions and 51 deletions.
Binary file added frontend/__snapshots__/components-networkrequesttiming--basic.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
124 changes: 73 additions & 51 deletions frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { Fragment, useState } from 'react'
import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
import { FlaggedFeature } from 'lib/components/FlaggedFeature'
import { FEATURE_FLAGS } from 'lib/constants'
import { NetworkRequestTiming } from 'scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming'

const friendlyHttpStatus = {
'0': 'Request not sent',
Expand Down Expand Up @@ -179,6 +180,10 @@ export function ItemPerformanceEvent({
return acc
}

if (key.includes('time') || key.includes('end') || key.includes('start')) {
return acc
}

return {
...acc,
[key]: typeof value === 'number' ? Math.round(value) : value,
Expand Down Expand Up @@ -334,58 +339,75 @@ export function ItemPerformanceEvent({
</p>
</>
)}

<LemonDivider dashed />
<FlaggedFeature flag={FEATURE_FLAGS.NETWORK_PAYLOAD_CAPTURE} match={true}>
<LemonTabs
activeKey={activeTab}
onChange={(newKey) => setActiveTab(newKey)}
tabs={[
{
key: 'timings',
label: 'timings',
content: <SimpleKeyValueList item={sanitizedProps} />,
},
{
key: 'headers',
label: 'Headers',
content: (
<HeadersDisplay
request={item.request_headers}
response={item.response_headers}
/>
),
},
item.entry_type !== 'navigation' && {
key: 'payload',
label: 'Payload',
content: (
<BodyDisplay
content={item.request_body}
headers={item.request_headers}
emptyMessage={'No request body captured'}
/>
),
},
item.entry_type !== 'navigation' && item.response_body
? {
key: 'response_body',
label: 'Response',
content: (
<BodyDisplay
content={item.response_body}
headers={item.response_headers}
emptyMessage={'No response body captured'}
/>
),
}
: false,
]}
/>
</FlaggedFeature>
<FlaggedFeature flag={FEATURE_FLAGS.NETWORK_PAYLOAD_CAPTURE} match={false}>
<SimpleKeyValueList item={sanitizedProps} />
</FlaggedFeature>
{['fetch', 'xmlhttprequest'].includes(item.initiator_type || '') ? (
<>
<FlaggedFeature flag={FEATURE_FLAGS.NETWORK_PAYLOAD_CAPTURE} match={true}>
<LemonTabs
activeKey={activeTab}
onChange={(newKey) => setActiveTab(newKey)}
tabs={[
{
key: 'timings',
label: 'timings',
content: (
<>
<SimpleKeyValueList item={sanitizedProps} />
<LemonDivider dashed />
<NetworkRequestTiming performanceEvent={item} />
</>
),
},
{
key: 'headers',
label: 'Headers',
content: (
<HeadersDisplay
request={item.request_headers}
response={item.response_headers}
/>
),
},
item.entry_type !== 'navigation' && {
key: 'payload',
label: 'Payload',
content: (
<BodyDisplay
content={item.request_body}
headers={item.request_headers}
emptyMessage={'No request body captured'}
/>
),
},
item.entry_type !== 'navigation' && item.response_body
? {
key: 'response_body',
label: 'Response',
content: (
<BodyDisplay
content={item.response_body}
headers={item.response_headers}
emptyMessage={'No response body captured'}
/>
),
}
: false,
]}
/>
</FlaggedFeature>
<FlaggedFeature flag={FEATURE_FLAGS.NETWORK_PAYLOAD_CAPTURE} match={false}>
<SimpleKeyValueList item={sanitizedProps} />
<LemonDivider dashed />
<NetworkRequestTiming performanceEvent={item} />
</FlaggedFeature>
</>
) : (
<>
<SimpleKeyValueList item={sanitizedProps} />
<LemonDivider dashed />
<NetworkRequestTiming performanceEvent={item} />
</>
)}
</div>
)}
</div>
Expand Down
57 changes: 57 additions & 0 deletions ...es/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { mswDecorator } from '~/mocks/browser'
import { Meta } from '@storybook/react'
import { PerformanceEvent } from '~/types'
import { NetworkRequestTiming } from 'scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming'

const meta: Meta<typeof NetworkRequestTiming> = {
title: 'Components/NetworkRequestTiming',
component: NetworkRequestTiming,
decorators: [
mswDecorator({
get: {},
}),
],
}
export default meta

export function Basic(): JSX.Element {
return (
<NetworkRequestTiming
performanceEvent={
{
connect_end: 9525.599999964237,
connect_start: 9525.599999964237,
decoded_body_size: 18260,
domain_lookup_end: 9525.599999964237,
domain_lookup_start: 9525.599999964237,
duration: 935.5,
encoded_body_size: 18260,
entry_type: 'resource',
fetch_start: 9525.599999964237,
initiator_type: 'fetch',
name: 'http://localhost:8000/api/organizations/@current/plugins/repository/',
next_hop_protocol: 'http/1.1',
redirect_end: 0,
redirect_start: 0,
render_blocking_status: 'non-blocking',
request_start: 9803.099999964237,
response_end: 10461.099999964237,
response_start: 10428.399999976158,
response_status: 200,
secure_connection_start: 0,
start_time: 9525.599999964237,
time_origin: '1699990397357',
timestamp: 1699990406882,
transfer_size: 18560,
window_id: '018bcf51-b1f0-7fe0-ac05-10543621f4f2',
worker_start: 0,
uuid: '12345',
distinct_id: '23456',
session_id: 'abcde',
pageview_id: 'fghij',
current_url: 'http://localhost:8000/insights',
} satisfies PerformanceEvent
}
/>
)
}
Loading

0 comments on commit 76c8652

Please sign in to comment.