diff --git a/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx b/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx index 233e674082d2f9..39f8d54e7b5df6 100644 --- a/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx +++ b/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.spec.tsx @@ -673,7 +673,7 @@ describe('SpanEvidenceKeyValueList', () => { description: 'https://example.com/resource.js', problemSpan: ProblemSpan.OFFENDER, data: { - 'Encoded Body Size': 31041901, + 'http.response_content_length': 31041901, }, }); @@ -715,6 +715,45 @@ describe('SpanEvidenceKeyValueList', () => { screen.getByTestId('span-evidence-key-value-list.duration-impact') ).toHaveTextContent('52% (487ms/931ms)'); }); + + describe('With backwards compatible legacy keys', () => { + const legacyKeyBuilder = new TransactionEventBuilder( + 'a1', + '/', + IssueType.PERFORMANCE_UNCOMPRESSED_ASSET, + { + duration: 0.931, // in seconds + } + ); + legacyKeyBuilder.getEvent().projectID = '123'; + + const offenderSpanWithLegacyKey = new MockSpan({ + startTimestamp: 0, + endTimestamp: 0.487, // in seconds + op: 'resource.script', + description: 'https://example.com/resource.js', + problemSpan: ProblemSpan.OFFENDER, + data: { + 'Encoded Body Size': 31041901, + }, + }); + + legacyKeyBuilder.addSpan(offenderSpanWithLegacyKey); + + it('Renders relevant fields', () => { + render( + + ); + + expect(screen.getByRole('cell', {name: 'Asset Size'})).toBeInTheDocument(); + expect( + screen.getByTestId('span-evidence-key-value-list.asset-size') + ).toHaveTextContent('29.6 MiB (31041901 B)'); + }); + }); }); describe('Large HTTP Payload', () => { @@ -732,7 +771,7 @@ describe('SpanEvidenceKeyValueList', () => { description: 'https://example.com/api/users', problemSpan: ProblemSpan.OFFENDER, data: { - 'Encoded Body Size': 31041901, + 'http.response_content_length': 31041901, }, }); @@ -771,5 +810,40 @@ describe('SpanEvidenceKeyValueList', () => { screen.getByTestId('span-evidence-key-value-list.payload-size') ).toHaveTextContent('29.6 MiB (31041901 B)'); }); + + describe('With backwards compatible legacy keys', () => { + const legacyKeyBuilder = new TransactionEventBuilder( + 'a1', + '/', + IssueType.PERFORMANCE_LARGE_HTTP_PAYLOAD + ); + legacyKeyBuilder.getEvent().projectID = '123'; + + const offenderSpanWithLegacyKey = new MockSpan({ + startTimestamp: 0, + endTimestamp: 0.487, // in seconds + op: 'http.client', + description: 'https://example.com/api/users', + problemSpan: ProblemSpan.OFFENDER, + data: { + 'Encoded Body Size': 31041901, + }, + }); + + legacyKeyBuilder.addSpan(offenderSpanWithLegacyKey); + it('Renders relevant fields', () => { + render( + + ); + + expect(screen.getByRole('cell', {name: 'Payload Size'})).toBeInTheDocument(); + expect( + screen.getByTestId('span-evidence-key-value-list.payload-size') + ).toHaveTextContent('29.6 MiB (31041901 B)'); + }); + }); }); }); diff --git a/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx b/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx index 581fef817e4b21..ed9b9b46a3b115 100644 --- a/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx +++ b/static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx @@ -164,7 +164,8 @@ function LargeHTTPPayloadSpanEvidence({ makeRow(t('Large HTTP Payload Span'), getSpanEvidenceValue(offendingSpans[0])), makeRow( t('Payload Size'), - getSpanFieldBytes(offendingSpans[0], 'Encoded Body Size') + getSpanFieldBytes(offendingSpans[0], 'http.response_content_length') ?? + getSpanFieldBytes(offendingSpans[0], 'Encoded Body Size') ), ].filter(Boolean) as KeyValueListData } @@ -311,7 +312,8 @@ function UncompressedAssetSpanEvidence({ makeRow(t('Slow Resource Span'), getSpanEvidenceValue(offendingSpans[0])), makeRow( t('Asset Size'), - getSpanFieldBytes(offendingSpans[0], 'Encoded Body Size') + getSpanFieldBytes(offendingSpans[0], 'http.response_content_length') ?? + getSpanFieldBytes(offendingSpans[0], 'Encoded Body Size') ), makeRow( t('Duration Impact'), diff --git a/static/app/components/events/interfaces/spans/spanDetail.tsx b/static/app/components/events/interfaces/spans/spanDetail.tsx index 6a1a62a026d1e8..5ae0dac1dc8bda 100644 --- a/static/app/components/events/interfaces/spans/spanDetail.tsx +++ b/static/app/components/events/interfaces/spans/spanDetail.tsx @@ -61,7 +61,14 @@ import { const DEFAULT_ERRORS_VISIBLE = 5; -const SIZE_DATA_KEYS = ['Encoded Body Size', 'Decoded Body Size', 'Transfer Size']; +const SIZE_DATA_KEYS = [ + 'Encoded Body Size', + 'Decoded Body Size', + 'Transfer Size', + 'http.response_content_length', + 'http.decoded_response_content_length', + 'http.response_transfer_size', +]; type TransactionResult = { id: string; diff --git a/static/app/components/events/interfaces/spans/spanTreeModel.spec.tsx b/static/app/components/events/interfaces/spans/spanTreeModel.spec.tsx index 990a6e7838af7b..64a156536c7401 100644 --- a/static/app/components/events/interfaces/spans/spanTreeModel.spec.tsx +++ b/static/app/components/events/interfaces/spans/spanTreeModel.spec.tsx @@ -79,9 +79,9 @@ describe('SpanTreeModel', () => { parent_span_id: 'a453cc713e5baf9c', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, ], @@ -298,9 +298,9 @@ describe('SpanTreeModel', () => { parent_span_id: 'a453cc713e5baf9c', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, numOfSpanChildren: 0, diff --git a/static/app/components/events/interfaces/spans/waterfallModel.spec.tsx b/static/app/components/events/interfaces/spans/waterfallModel.spec.tsx index c5da0a70345d3e..ff67d904b18072 100644 --- a/static/app/components/events/interfaces/spans/waterfallModel.spec.tsx +++ b/static/app/components/events/interfaces/spans/waterfallModel.spec.tsx @@ -69,9 +69,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a453cc713e5baf9c', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, { @@ -83,9 +83,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a23f26b939d1a735', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, { @@ -97,9 +97,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a0e89ce4e0900ad5', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, { @@ -111,9 +111,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a0e89ce4e0900ad5', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, { @@ -125,9 +125,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a934857184bdf5a6', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, { @@ -139,9 +139,9 @@ describe('WaterfallModel', () => { parent_span_id: 'b5795cf4ba68bbb4', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, { @@ -153,9 +153,9 @@ describe('WaterfallModel', () => { parent_span_id: 'b5795cf4ba68bbb5', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, { @@ -167,9 +167,9 @@ describe('WaterfallModel', () => { parent_span_id: 'b5795cf4ba68bbb6', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, ], @@ -280,9 +280,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a453cc713e5baf9c', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, numOfSpanChildren: 1, @@ -307,9 +307,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a23f26b939d1a735', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, numOfSpanChildren: 2, @@ -334,9 +334,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a0e89ce4e0900ad5', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, numOfSpanChildren: 0, @@ -361,9 +361,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a0e89ce4e0900ad5', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, numOfSpanChildren: 0, @@ -406,9 +406,9 @@ describe('WaterfallModel', () => { parent_span_id: 'a934857184bdf5a6', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, numOfSpanChildren: 1, @@ -433,9 +433,9 @@ describe('WaterfallModel', () => { parent_span_id: 'b5795cf4ba68bbb6', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, treeDepth: 2, @@ -452,9 +452,9 @@ describe('WaterfallModel', () => { parent_span_id: 'b5795cf4ba68bbb4', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, numOfSpanChildren: 1, @@ -479,9 +479,9 @@ describe('WaterfallModel', () => { parent_span_id: 'b5795cf4ba68bbb5', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, numOfSpanChildren: 1, @@ -511,9 +511,9 @@ describe('WaterfallModel', () => { parent_span_id: 'b5795cf4ba68bbb6', trace_id: '8cbbc19c0f54447ab702f00263262726', data: { - 'Decoded Body Size': 159248, - 'Encoded Body Size': 159248, - 'Transfer Size': 275, + 'http.decoded_response_content_length': 159248, + 'http.response_content_length': 159248, + 'http.response_transfer_size': 275, }, }, numOfSpanChildren: 0, diff --git a/static/app/utils/performanceForSentry.tsx b/static/app/utils/performanceForSentry.tsx index fe87695b619e04..196f5569015368 100644 --- a/static/app/utils/performanceForSentry.tsx +++ b/static/app/utils/performanceForSentry.tsx @@ -225,11 +225,17 @@ const addAssetMeasurements = (transaction: TransactionEvent) => { ) ); const transfered = filtered.reduce( - (acc, curr) => acc + (curr.data['Transfer Size'] ?? 0), + (acc, curr) => + acc + + (curr.data['http.response_transfer_size'] ?? curr.data['Transfer Size'] ?? 0), 0 ); const encoded = filtered.reduce( - (acc, curr) => acc + (curr.data['Encoded Body Size'] ?? 0), + (acc, curr) => + acc + + (curr.data['http.response_content_length'] ?? + curr.data['Encoded Body Size'] ?? + 0), 0 );