diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx index 026d2f2cabedd3..fe56691ad7954a 100644 --- a/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx +++ b/static/app/views/performance/newTraceDetails/traceModels/traceTree.spec.tsx @@ -2857,47 +2857,50 @@ 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 - ); + it.each([['browser'], ['browser.request']])( + 'server handler transaction becomes a child of %s span if present', + async span_op => { + 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'})]), - }); + MockApiClient.addMockResponse({ + url: '/organizations/org-slug/events/js:ssr/?averageColumn=span.self_time&averageColumn=span.duration', + method: 'GET', + body: makeEvent({}, [makeSpan({description: 'request', op: span_op})]), + }); - tree.zoomIn(tree.list[1], true, { - api: new MockApiClient(), - organization: OrganizationFixture(), - }); + 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]; + 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'); - }); + 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..df2065dd0ba16f 100644 --- a/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx +++ b/static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx @@ -230,7 +230,11 @@ function isServerRequestHandlerTransactionNode( } function isBrowserRequestSpan(value: TraceTree.Span): boolean { - return value.op === 'browser' && value.description === 'request'; + return ( + // Adjust for SDK changes in https://github.com/getsentry/sentry-javascript/pull/13527 + value.op === 'browser.request' || + (value.op === 'browser' && value.description === 'request') + ); } function getPageloadTransactionChildCount(