trace.tsx 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. import styled from '@emotion/styled';
  2. import Loading from 'sentry/components/loadingIndicator';
  3. import Placeholder from 'sentry/components/placeholder';
  4. import {IconSad} from 'sentry/icons';
  5. import {t} from 'sentry/locale';
  6. import type {Organization} from 'sentry/types';
  7. import type EventView from 'sentry/utils/discover/eventView';
  8. import type {
  9. TraceError,
  10. TraceFullDetailed,
  11. } from 'sentry/utils/performance/quickTrace/types';
  12. import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
  13. import {useLocation} from 'sentry/utils/useLocation';
  14. import useOrganization from 'sentry/utils/useOrganization';
  15. import useProjects from 'sentry/utils/useProjects';
  16. import TraceView, {
  17. StyledTracePanel,
  18. } from 'sentry/views/performance/traceDetails/traceView';
  19. import {hasTraceData} from 'sentry/views/performance/traceDetails/utils';
  20. import EmptyState from 'sentry/views/replays/detail/emptyState';
  21. import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
  22. import {
  23. useFetchTransactions,
  24. useTransactionData,
  25. } from 'sentry/views/replays/detail/trace/replayTransactionContext';
  26. import type {ReplayRecord} from 'sentry/views/replays/types';
  27. function TracesNotFound({performanceActive}: {performanceActive: boolean}) {
  28. // We want to send the 'trace_status' data if the project actively uses and has access to the performance monitoring.
  29. useRouteAnalyticsParams(performanceActive ? {trace_status: 'trace missing'} : {});
  30. return (
  31. <BorderedSection data-test-id="replay-details-trace-tab">
  32. <EmptyState>
  33. <p>{t('No traces found')}</p>
  34. </EmptyState>
  35. </BorderedSection>
  36. );
  37. }
  38. function TraceFound({
  39. organization,
  40. performanceActive,
  41. eventView,
  42. traces,
  43. orphanErrors,
  44. }: {
  45. eventView: EventView | null;
  46. organization: Organization;
  47. performanceActive: boolean;
  48. traces: TraceFullDetailed[] | null;
  49. orphanErrors?: TraceError[];
  50. }) {
  51. const location = useLocation();
  52. // We want to send the 'trace_status' data if the project actively uses and has access to the performance monitoring.
  53. useRouteAnalyticsParams(performanceActive ? {trace_status: 'success'} : {});
  54. return (
  55. <OverflowScrollBorderedSection>
  56. <TraceView
  57. meta={null}
  58. traces={traces || []}
  59. location={location}
  60. organization={organization}
  61. traceEventView={eventView!}
  62. traceSlug="Replay"
  63. orphanErrors={orphanErrors}
  64. />
  65. </OverflowScrollBorderedSection>
  66. );
  67. }
  68. type Props = {
  69. replayRecord: undefined | ReplayRecord;
  70. };
  71. function Trace({replayRecord}: Props) {
  72. const organization = useOrganization();
  73. const {projects} = useProjects();
  74. const {
  75. state: {didInit, errors, isFetching, traces, orphanErrors},
  76. eventView,
  77. } = useTransactionData();
  78. useFetchTransactions();
  79. if (!replayRecord || !didInit || (isFetching && !traces?.length)) {
  80. // Show the blank screen until we start fetching, thats when you get a spinner
  81. return (
  82. <StyledPlaceholder height="100%">
  83. {isFetching ? <Loading /> : null}
  84. </StyledPlaceholder>
  85. );
  86. }
  87. if (errors.length) {
  88. // Same style as <EmptyStateWarning>
  89. return (
  90. <BorderedSection>
  91. <EmptyState withIcon={false}>
  92. <IconSad legacySize="54px" />
  93. <p>{t('Unable to retrieve traces')}</p>
  94. </EmptyState>
  95. </BorderedSection>
  96. );
  97. }
  98. const project = projects.find(p => p.id === replayRecord.project_id);
  99. const hasPerformance = project?.firstTransactionEvent === true;
  100. const performanceActive =
  101. organization.features.includes('performance-view') && hasPerformance;
  102. if (!hasTraceData(traces, orphanErrors)) {
  103. return <TracesNotFound performanceActive={performanceActive} />;
  104. }
  105. return (
  106. <TraceFound
  107. performanceActive={performanceActive}
  108. organization={organization}
  109. eventView={eventView}
  110. traces={traces ?? []}
  111. orphanErrors={orphanErrors}
  112. />
  113. );
  114. }
  115. // This has the gray background, to match other loaders on Replay Details
  116. const StyledPlaceholder = styled(Placeholder)`
  117. border: 1px solid ${p => p.theme.border};
  118. border-radius: ${p => p.theme.borderRadius};
  119. `;
  120. // White background, to match the loaded component
  121. const BorderedSection = styled(FluidHeight)`
  122. border: 1px solid ${p => p.theme.border};
  123. border-radius: ${p => p.theme.borderRadius};
  124. `;
  125. const OverflowScrollBorderedSection = styled(BorderedSection)`
  126. overflow: scroll;
  127. ${StyledTracePanel} {
  128. border: none;
  129. }
  130. `;
  131. export default Trace;