From 44b5cef79689c4b3a0ce11d3aab59f59adc19c7f Mon Sep 17 00:00:00 2001 From: JonasBa Date: Mon, 9 Sep 2024 15:22:41 -0400 Subject: [PATCH 1/2] ref(tracing): support browser.request span for reparenting --- .../traceModels/traceTree.spec.tsx | 85 ++++++++++--------- .../newTraceDetails/traceModels/traceTree.tsx | 5 +- 2 files changed, 49 insertions(+), 41 deletions(-) diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx index 026d2f2cabedd3..b00a49a2cb1743 100644 --- a/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx +++ b/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx @@ -2857,47 +2857,52 @@ describe('TraceTree', () => { expect(serverHandlerTransaction.parent).toBe(pageloadTransaction); }); describe('expanded', () => { - it('server handler transaction becomes a child of browser request span if present', async () => { - const tree: TraceTree = TraceTree.FromTrace( - makeTrace({ - transactions: [ - makeTransaction({ - transaction: 'SSR', - event_id: 'ssr', - project_slug: 'js', - ['transaction.op']: 'http.server', - children: [ - makeTransaction({ - transaction: 'pageload', - ['transaction.op']: 'pageload', - }), - ], - }), - ], - }), - null, - null - ); - - MockApiClient.addMockResponse({ - url: '/organizations/org-slug/events/js:ssr/?averageColumn=span.self_time&averageColumn=span.duration', - method: 'GET', - body: makeEvent({}, [makeSpan({description: 'request', op: 'browser'})]), - }); - - tree.zoomIn(tree.list[1], true, { - api: new MockApiClient(), - organization: OrganizationFixture(), - }); - - await waitFor(() => tree.list.length === 4); - const browserRequestSpan = tree.list[1].children[0]; - const ssrTransaction = browserRequestSpan.children[0]; + it.each([['request'], ['browser.request']])( + 'server handler transaction becomes a child of %s span if present', + async span_description => { + const tree: TraceTree = TraceTree.FromTrace( + makeTrace({ + transactions: [ + makeTransaction({ + transaction: 'SSR', + event_id: 'ssr', + project_slug: 'js', + ['transaction.op']: 'http.server', + children: [ + makeTransaction({ + transaction: 'pageload', + ['transaction.op']: 'pageload', + }), + ], + }), + ], + }), + null, + null + ); - assertSpanNode(browserRequestSpan); - assertTransactionNode(ssrTransaction); - expect(ssrTransaction.value.transaction).toBe('SSR'); - }); + MockApiClient.addMockResponse({ + url: '/organizations/org-slug/events/js:ssr/?averageColumn=span.self_time&averageColumn=span.duration', + method: 'GET', + body: makeEvent({}, [ + makeSpan({description: span_description, op: 'browser'}), + ]), + }); + + tree.zoomIn(tree.list[1], true, { + api: new MockApiClient(), + organization: OrganizationFixture(), + }); + + await waitFor(() => tree.list.length === 4); + const browserRequestSpan = tree.list[1].children[0]; + const ssrTransaction = browserRequestSpan.children[0]; + + assertSpanNode(browserRequestSpan); + assertTransactionNode(ssrTransaction); + expect(ssrTransaction.value.transaction).toBe('SSR'); + } + ); it('server handler transaction becomes a direct child if there is no matching browser request span', async () => { const tree: TraceTree = TraceTree.FromTrace( makeTrace({ diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx index ed42aac6f0c014..2810543bda2514 100644 --- a/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx +++ b/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx @@ -230,7 +230,10 @@ function isServerRequestHandlerTransactionNode( } function isBrowserRequestSpan(value: TraceTree.Span): boolean { - return value.op === 'browser' && value.description === 'request'; + return ( + value.op === 'browser' && + (value.description === 'request' || value.description === 'browser.request') + ); } function getPageloadTransactionChildCount( From d560ab110ae160285746937f3c85b8e557223c02 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Tue, 10 Sep 2024 09:13:49 -0400 Subject: [PATCH 2/2] ref: use op instead of description --- .../newTraceDetails/traceModels/traceTree.spec.tsx | 8 +++----- .../performance/newTraceDetails/traceModels/traceTree.tsx | 5 +++-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx index b00a49a2cb1743..fe56691ad7954a 100644 --- a/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx +++ b/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx @@ -2857,9 +2857,9 @@ describe('TraceTree', () => { expect(serverHandlerTransaction.parent).toBe(pageloadTransaction); }); describe('expanded', () => { - it.each([['request'], ['browser.request']])( + it.each([['browser'], ['browser.request']])( 'server handler transaction becomes a child of %s span if present', - async span_description => { + async span_op => { const tree: TraceTree = TraceTree.FromTrace( makeTrace({ transactions: [ @@ -2884,9 +2884,7 @@ describe('TraceTree', () => { MockApiClient.addMockResponse({ url: '/organizations/org-slug/events/js:ssr/?averageColumn=span.self_time&averageColumn=span.duration', method: 'GET', - body: makeEvent({}, [ - makeSpan({description: span_description, op: 'browser'}), - ]), + body: makeEvent({}, [makeSpan({description: 'request', op: span_op})]), }); tree.zoomIn(tree.list[1], true, { diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx index 2810543bda2514..df2065dd0ba16f 100644 --- a/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx +++ b/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx @@ -231,8 +231,9 @@ function isServerRequestHandlerTransactionNode( function isBrowserRequestSpan(value: TraceTree.Span): boolean { return ( - value.op === 'browser' && - (value.description === 'request' || value.description === 'browser.request') + // Adjust for SDK changes in https://github.com/getsentry/sentry-javascript/pull/13527 + value.op === 'browser.request' || + (value.op === 'browser' && value.description === 'request') ); }