traceNotFound.tsx 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Alert} from 'sentry/components/alert';
  4. import Link from 'sentry/components/links/link';
  5. import LoadingError from 'sentry/components/loadingError';
  6. import LoadingIndicator from 'sentry/components/loadingIndicator';
  7. import {
  8. ErrorDot,
  9. ErrorLevel,
  10. ErrorMessageContent,
  11. ErrorTitle,
  12. } from 'sentry/components/performance/waterfall/rowDetails';
  13. import {t, tct} from 'sentry/locale';
  14. import {space} from 'sentry/styles/space';
  15. import {Organization} from 'sentry/types';
  16. import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
  17. import EventView from 'sentry/utils/discover/eventView';
  18. import {TraceMeta} from 'sentry/utils/performance/quickTrace/types';
  19. interface TraceNotFoundProps {
  20. location: any;
  21. meta: TraceMeta | null;
  22. organization: Organization;
  23. traceEventView: EventView;
  24. traceSlug: string;
  25. }
  26. function TraceNotFound({
  27. meta,
  28. traceEventView,
  29. traceSlug,
  30. organization,
  31. location,
  32. }: TraceNotFoundProps) {
  33. const transactions = meta?.transactions ?? 0;
  34. const errors = meta?.errors ?? 0;
  35. if (transactions === 0 && errors > 0) {
  36. const errorsEventView = traceEventView.withColumns([
  37. {kind: 'field', field: 'project'},
  38. {kind: 'field', field: 'title'},
  39. {kind: 'field', field: 'issue.id'},
  40. {kind: 'field', field: 'level'},
  41. ]);
  42. errorsEventView.query = `trace:${traceSlug} !event.type:transaction `;
  43. return (
  44. <DiscoverQuery
  45. eventView={errorsEventView}
  46. orgSlug={organization.slug}
  47. location={location}
  48. referrer="api.trace-view.errors-view"
  49. >
  50. {({isLoading, tableData, error}) => {
  51. if (isLoading) {
  52. return <LoadingIndicator />;
  53. }
  54. if (error) {
  55. return (
  56. <Alert type="error" showIcon>
  57. <ErrorLabel>
  58. {tct(
  59. 'The trace cannot be shown when all events are errors. An error occurred when attempting to fetch these error events: [error]',
  60. {error: error.message}
  61. )}
  62. </ErrorLabel>
  63. </Alert>
  64. );
  65. }
  66. return (
  67. <Alert type="error" showIcon>
  68. <ErrorLabel>
  69. {t('The trace cannot be shown when all events are errors.')}
  70. </ErrorLabel>
  71. <ErrorMessageContent data-test-id="trace-view-errors">
  72. {tableData?.data.map(data => (
  73. <Fragment key={data.id}>
  74. <ErrorDot level={data.level as any} />
  75. <ErrorLevel>{data.level}</ErrorLevel>
  76. <ErrorTitle>
  77. <Link
  78. to={`/organizations/${organization.slug}/issues/${data['issue.id']}/events/${data.id}?referrer=performance-trace-not-found`}
  79. >
  80. {data.title}
  81. </Link>
  82. </ErrorTitle>
  83. </Fragment>
  84. ))}
  85. </ErrorMessageContent>
  86. </Alert>
  87. );
  88. }}
  89. </DiscoverQuery>
  90. );
  91. }
  92. return <LoadingError message={t('The trace you are looking for was not found.')} />;
  93. }
  94. const ErrorLabel = styled('div')`
  95. margin-bottom: ${space(1)};
  96. `;
  97. export default TraceNotFound;