newTraceDetailsContent.tsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506
  1. import {Fragment, useMemo, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import omit from 'lodash/omit';
  4. import GuideAnchor from 'sentry/components/assistant/guideAnchor';
  5. import ButtonBar from 'sentry/components/buttonBar';
  6. import {Alert} from 'sentry/components/core/alert';
  7. import DiscoverButton from 'sentry/components/discoverButton';
  8. import EventVitals from 'sentry/components/events/eventVitals';
  9. import type {SpanDetailProps} from 'sentry/components/events/interfaces/spans/newTraceDetailsSpanDetails';
  10. import * as Layout from 'sentry/components/layouts/thirds';
  11. import ExternalLink from 'sentry/components/links/externalLink';
  12. import Link from 'sentry/components/links/link';
  13. import LoadingError from 'sentry/components/loadingError';
  14. import LoadingIndicator from 'sentry/components/loadingIndicator';
  15. import {Tooltip} from 'sentry/components/tooltip';
  16. import {IconPlay} from 'sentry/icons';
  17. import {t, tct, tn} from 'sentry/locale';
  18. import {space} from 'sentry/styles/space';
  19. import type {EventTransaction} from 'sentry/types/event';
  20. import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
  21. import type {Organization} from 'sentry/types/organization';
  22. import {generateQueryWithTag} from 'sentry/utils';
  23. import {trackAnalytics} from 'sentry/utils/analytics';
  24. import type EventView from 'sentry/utils/discover/eventView';
  25. import {formatTagKey} from 'sentry/utils/discover/fields';
  26. import type {QueryError} from 'sentry/utils/discover/genericDiscoverQuery';
  27. import getDuration from 'sentry/utils/duration/getDuration';
  28. import {getShortEventId} from 'sentry/utils/events';
  29. import type {
  30. TraceError,
  31. TraceFullDetailed,
  32. TraceMeta,
  33. } from 'sentry/utils/performance/quickTrace/types';
  34. import {WEB_VITAL_DETAILS} from 'sentry/utils/performance/vitals/constants';
  35. import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
  36. import {useApiQuery} from 'sentry/utils/queryClient';
  37. import {useNavigate} from 'sentry/utils/useNavigate';
  38. import Tags from 'sentry/views/discover/tags';
  39. import Breadcrumb from 'sentry/views/performance/breadcrumb';
  40. import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
  41. import {TraceShape} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
  42. import {MetaData} from 'sentry/views/performance/transactionDetails/styles';
  43. import {makeReplaysPathname} from 'sentry/views/replays/pathnames';
  44. import {BrowserDisplay} from '../transactionDetails/eventMetas';
  45. import NewTraceView from './newTraceDetailsTraceView';
  46. import TraceNotFound from './traceNotFound';
  47. import TraceViewDetailPanel from './traceViewDetailPanel';
  48. import {getTraceInfo, hasTraceData, isRootTransaction} from './utils';
  49. type Props = Pick<RouteComponentProps<{traceSlug: string}>, 'params' | 'location'> & {
  50. dateSelected: boolean;
  51. error: QueryError | null;
  52. isLoading: boolean;
  53. meta: TraceMeta | null;
  54. organization: Organization;
  55. traceEventView: EventView;
  56. traceSlug: string;
  57. traces: TraceTree.Transaction[] | null;
  58. handleLimitChange?: (newLimit: number) => void;
  59. orphanErrors?: TraceError[];
  60. };
  61. export type EventDetail = {
  62. event: EventTransaction | undefined;
  63. openPanel: string | undefined;
  64. traceFullDetailedEvent: TraceFullDetailed;
  65. };
  66. function NewTraceDetailsContent(props: Props) {
  67. const navigate = useNavigate();
  68. const [detail, setDetail] = useState<EventDetail | SpanDetailProps | undefined>(
  69. undefined
  70. );
  71. const traceInfo = useMemo(
  72. () => getTraceInfo(props.traces ?? [], props.orphanErrors),
  73. [props.traces, props.orphanErrors]
  74. );
  75. const root = props.traces?.[0];
  76. const {data: rootEvent, isPending: isRootEventLoading} = useApiQuery<EventTransaction>(
  77. [
  78. `/organizations/${props.organization.slug}/events/${root?.project_slug}:${root?.event_id}/`,
  79. {
  80. query: {
  81. referrer: 'trace-details-summary',
  82. },
  83. },
  84. ],
  85. {
  86. staleTime: Infinity,
  87. enabled: !!(props.traces && props.traces.length > 0),
  88. }
  89. );
  90. const renderTraceLoading = () => {
  91. return (
  92. <LoadingContainer>
  93. <StyledLoadingIndicator />
  94. {t('Hang in there, as we build your trace view!')}
  95. </LoadingContainer>
  96. );
  97. };
  98. const renderTraceRequiresDateRangeSelection = () => {
  99. return <LoadingError message={t('Trace view requires a date range selection.')} />;
  100. };
  101. const renderTraceHeader = () => {
  102. const {meta} = props;
  103. const errors = meta?.errors ?? traceInfo.errors.size;
  104. const performanceIssues =
  105. meta?.performance_issues ?? traceInfo.performanceIssues.size;
  106. const replay_id = rootEvent?.contexts.replay?.replay_id ?? '';
  107. return (
  108. <TraceHeaderContainer>
  109. {rootEvent && (
  110. <TraceHeaderRow>
  111. <MetaData
  112. headingText={t('User')}
  113. tooltipText=""
  114. bodyText={rootEvent?.user?.email ?? rootEvent?.user?.name ?? '\u2014'}
  115. subtext={null}
  116. />
  117. <MetaData
  118. headingText={t('Browser')}
  119. tooltipText=""
  120. bodyText={<BrowserDisplay event={rootEvent} showVersion />}
  121. subtext={null}
  122. />
  123. {replay_id && (
  124. <MetaData
  125. headingText={t('Replay')}
  126. tooltipText=""
  127. bodyText={
  128. <Link
  129. to={makeReplaysPathname({
  130. path: `/${replay_id}/`,
  131. organization,
  132. })}
  133. >
  134. <ReplayLinkBody>
  135. {getShortEventId(replay_id)}
  136. <IconPlay size="xs" />
  137. </ReplayLinkBody>
  138. </Link>
  139. }
  140. subtext={null}
  141. />
  142. )}
  143. </TraceHeaderRow>
  144. )}
  145. <TraceHeaderRow>
  146. <GuideAnchor target="trace_view_guide_breakdown">
  147. <MetaData
  148. headingText={t('Events')}
  149. tooltipText=""
  150. bodyText={meta?.transactions ?? traceInfo.transactions.size}
  151. subtext={null}
  152. />
  153. </GuideAnchor>
  154. <MetaData
  155. headingText={t('Issues')}
  156. tooltipText=""
  157. bodyText={
  158. <Tooltip
  159. title={
  160. errors + performanceIssues > 0 ? (
  161. <Fragment>
  162. <div>{tn('%s error issue', '%s error issues', errors)}</div>
  163. <div>
  164. {tn(
  165. '%s performance issue',
  166. '%s performance issues',
  167. performanceIssues
  168. )}
  169. </div>
  170. </Fragment>
  171. ) : null
  172. }
  173. showUnderline
  174. position="bottom"
  175. >
  176. {errors + performanceIssues}
  177. </Tooltip>
  178. }
  179. subtext={null}
  180. />
  181. <MetaData
  182. headingText={t('Total Duration')}
  183. tooltipText=""
  184. bodyText={getDuration(
  185. traceInfo.endTimestamp - traceInfo.startTimestamp,
  186. 2,
  187. true
  188. )}
  189. subtext={null}
  190. />
  191. </TraceHeaderRow>
  192. </TraceHeaderContainer>
  193. );
  194. };
  195. const getTraceType = (): TraceShape => {
  196. const {traces, orphanErrors} = props;
  197. const {roots, orphans} = (traces ?? []).reduce(
  198. (counts, trace) => {
  199. if (isRootTransaction(trace)) {
  200. counts.roots++;
  201. } else {
  202. counts.orphans++;
  203. }
  204. return counts;
  205. },
  206. {roots: 0, orphans: 0}
  207. );
  208. if (roots === 0 && orphans > 0) {
  209. return TraceShape.NO_ROOT;
  210. }
  211. if (roots === 1 && orphans > 0) {
  212. return TraceShape.BROKEN_SUBTRACES;
  213. }
  214. if (roots > 1) {
  215. return TraceShape.MULTIPLE_ROOTS;
  216. }
  217. if (orphanErrors && orphanErrors.length > 1) {
  218. return TraceShape.ONLY_ERRORS;
  219. }
  220. if (roots === 1) {
  221. return TraceShape.ONE_ROOT;
  222. }
  223. if (roots === 0 && orphans === 0) {
  224. return TraceShape.EMPTY_TRACE;
  225. }
  226. throw new Error('Unknown trace type');
  227. };
  228. const renderTraceWarnings = () => {
  229. let warning: React.ReactNode = null;
  230. const traceType = getTraceType();
  231. switch (traceType) {
  232. case TraceShape.NO_ROOT:
  233. warning = (
  234. <Alert.Container>
  235. <Alert type="info" showIcon>
  236. <ExternalLink href="https://docs.sentry.io/concepts/key-terms/tracing/trace-view/#orphan-traces-and-broken-subtraces">
  237. {t(
  238. 'A root transaction is missing. Transactions linked by a dashed line have been orphaned and cannot be directly linked to the root.'
  239. )}
  240. </ExternalLink>
  241. </Alert>
  242. </Alert.Container>
  243. );
  244. break;
  245. case TraceShape.BROKEN_SUBTRACES:
  246. warning = (
  247. <Alert.Container>
  248. <Alert type="info" showIcon>
  249. <ExternalLink href="https://docs.sentry.io/concepts/key-terms/tracing/trace-view/#orphan-traces-and-broken-subtraces">
  250. {t(
  251. 'This trace has broken subtraces. Transactions linked by a dashed line have been orphaned and cannot be directly linked to the root.'
  252. )}
  253. </ExternalLink>
  254. </Alert>
  255. </Alert.Container>
  256. );
  257. break;
  258. case TraceShape.MULTIPLE_ROOTS:
  259. warning = (
  260. <Alert.Container>
  261. <Alert type="info" showIcon>
  262. <ExternalLink href="https://docs.sentry.io/concepts/key-terms/tracing/trace-view/#multiple-roots">
  263. {t('Multiple root transactions have been found with this trace ID.')}
  264. </ExternalLink>
  265. </Alert>
  266. </Alert.Container>
  267. );
  268. break;
  269. case TraceShape.ONLY_ERRORS:
  270. warning = (
  271. <Alert.Container>
  272. <Alert type="info" showIcon>
  273. {tct(
  274. "The good news: we know all these errors are related. The bad news: we can't tell you more than that. If you haven't already, [tracingLink:configure tracing for your SDKs] to get a connected view of your software systems and services.",
  275. {
  276. tracingLink: (
  277. <ExternalLink href="https://docs.sentry.io/product/performance/getting-started/" />
  278. ),
  279. }
  280. )}
  281. </Alert>
  282. </Alert.Container>
  283. );
  284. break;
  285. default:
  286. }
  287. return warning;
  288. };
  289. const renderFooter = () => {
  290. const {traceEventView, organization, location, meta, orphanErrors} = props;
  291. const orphanErrorsCount = orphanErrors?.length ?? 0;
  292. const transactionsCount = meta?.transactions ?? traceInfo?.transactions.size ?? 0;
  293. const totalNumOfEvents = transactionsCount + orphanErrorsCount;
  294. const webVitals = Object.keys(rootEvent?.measurements ?? {})
  295. // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
  296. .filter(name => Boolean(WEB_VITAL_DETAILS[`measurements.${name}`]))
  297. .sort();
  298. return (
  299. rootEvent && (
  300. <TraceHeaderWrapper>
  301. {webVitals.length > 0 && (
  302. <div style={{flex: 1}}>
  303. <EventVitals event={rootEvent} />
  304. </div>
  305. )}
  306. <div style={{flex: 1}}>
  307. <Tags
  308. generateUrl={(key: string, value: string) => {
  309. const url = traceEventView.getResultsViewUrlTarget(organization, false);
  310. url.query = generateQueryWithTag(url.query, {
  311. key: formatTagKey(key),
  312. value,
  313. });
  314. return url;
  315. }}
  316. totalValues={totalNumOfEvents}
  317. eventView={traceEventView}
  318. organization={organization}
  319. location={location}
  320. />
  321. </div>
  322. </TraceHeaderWrapper>
  323. )
  324. );
  325. };
  326. const renderContent = () => {
  327. const {
  328. dateSelected,
  329. isLoading,
  330. error,
  331. organization,
  332. location,
  333. traceEventView,
  334. traceSlug,
  335. traces,
  336. meta,
  337. orphanErrors,
  338. } = props;
  339. if (!dateSelected) {
  340. return renderTraceRequiresDateRangeSelection();
  341. }
  342. const hasOrphanErrors = orphanErrors && orphanErrors.length > 0;
  343. const onlyOrphanErrors = hasOrphanErrors && (!traces || traces.length === 0);
  344. const hasData = hasTraceData(traces, orphanErrors);
  345. if (isLoading || (isRootEventLoading && hasData && !onlyOrphanErrors)) {
  346. return renderTraceLoading();
  347. }
  348. if (error !== null || !hasData) {
  349. return (
  350. <TraceNotFound
  351. meta={meta}
  352. traceEventView={traceEventView}
  353. traceSlug={traceSlug}
  354. location={location}
  355. organization={organization}
  356. />
  357. );
  358. }
  359. return (
  360. <Fragment>
  361. {renderTraceWarnings()}
  362. {traceInfo && renderTraceHeader()}
  363. <Margin>
  364. <VisuallyCompleteWithData id="PerformanceDetails-TraceView" hasData={hasData}>
  365. <NewTraceView
  366. traceType={getTraceType()}
  367. rootEvent={rootEvent}
  368. traceInfo={traceInfo}
  369. location={location}
  370. organization={organization}
  371. traceEventView={traceEventView}
  372. traceSlug={traceSlug}
  373. onRowClick={setDetail}
  374. traces={traces || []}
  375. meta={meta}
  376. orphanErrors={orphanErrors || []}
  377. />
  378. </VisuallyCompleteWithData>
  379. </Margin>
  380. {renderFooter()}
  381. <TraceViewDetailPanel
  382. detail={detail}
  383. onClose={() => {
  384. navigate(
  385. {
  386. ...location,
  387. hash: undefined,
  388. query: {
  389. ...omit(location.query, 'openPanel'),
  390. },
  391. },
  392. {replace: true}
  393. );
  394. setDetail(undefined);
  395. }}
  396. />
  397. </Fragment>
  398. );
  399. };
  400. const {organization, location, traceEventView, traceSlug} = props;
  401. return (
  402. <Fragment>
  403. <Layout.Header>
  404. <Layout.HeaderContent>
  405. <Breadcrumb
  406. organization={organization}
  407. location={location}
  408. transaction={{
  409. project: rootEvent?.projectID ?? '',
  410. name: rootEvent?.title ?? '',
  411. }}
  412. traceSlug={traceSlug}
  413. />
  414. <Layout.Title data-test-id="trace-header">
  415. {t('Trace ID: %s', traceSlug)}
  416. </Layout.Title>
  417. </Layout.HeaderContent>
  418. <Layout.HeaderActions>
  419. <ButtonBar gap={1}>
  420. <DiscoverButton
  421. size="sm"
  422. to={traceEventView.getResultsViewUrlTarget(organization)}
  423. onClick={() => {
  424. trackAnalytics('performance_views.trace_view.open_in_discover', {
  425. organization,
  426. });
  427. }}
  428. >
  429. {t('Open in Discover')}
  430. </DiscoverButton>
  431. </ButtonBar>
  432. </Layout.HeaderActions>
  433. </Layout.Header>
  434. <Layout.Body>
  435. <Layout.Main fullWidth>{renderContent()}</Layout.Main>
  436. </Layout.Body>
  437. </Fragment>
  438. );
  439. }
  440. const StyledLoadingIndicator = styled(LoadingIndicator)`
  441. margin-bottom: 0;
  442. `;
  443. const LoadingContainer = styled('div')`
  444. font-size: ${p => p.theme.fontSizeLarge};
  445. color: ${p => p.theme.subText};
  446. text-align: center;
  447. `;
  448. const ReplayLinkBody = styled('div')`
  449. display: flex;
  450. align-items: center;
  451. gap: ${space(0.25)};
  452. `;
  453. const TraceHeaderContainer = styled('div')`
  454. display: flex;
  455. align-items: center;
  456. justify-content: space-between;
  457. `;
  458. const TraceHeaderRow = styled('div')`
  459. display: flex;
  460. align-items: center;
  461. gap: ${space(2)};
  462. `;
  463. const Margin = styled('div')`
  464. margin-top: ${space(2)};
  465. `;
  466. const TraceHeaderWrapper = styled('div')`
  467. display: flex;
  468. gap: ${space(2)};
  469. `;
  470. export default NewTraceDetailsContent;