allEventsTable.tsx 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. import {useEffect, useMemo, useState} from 'react';
  2. import {Location} from 'history';
  3. import {getSampleEventQuery} from 'sentry/components/events/eventStatisticalDetector/eventComparison/eventDisplay';
  4. import LoadingError from 'sentry/components/loadingError';
  5. import {
  6. PlatformCategory,
  7. profiling as PROFILING_PLATFORMS,
  8. } from 'sentry/data/platformCategories';
  9. import {t} from 'sentry/locale';
  10. import {
  11. EventTransaction,
  12. Group,
  13. IssueCategory,
  14. IssueType,
  15. Organization,
  16. PlatformKey,
  17. } from 'sentry/types';
  18. import EventView, {decodeSorts} from 'sentry/utils/discover/eventView';
  19. import {DiscoverDatasets} from 'sentry/utils/discover/types';
  20. import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
  21. import {platformToCategory} from 'sentry/utils/platform';
  22. import {useApiQuery} from 'sentry/utils/queryClient';
  23. import {projectCanLinkToReplay} from 'sentry/utils/replays/projectSupportsReplay';
  24. import {useRoutes} from 'sentry/utils/useRoutes';
  25. import EventsTable from 'sentry/views/performance/transactionSummary/transactionEvents/eventsTable';
  26. interface Props {
  27. group: Group;
  28. issueId: string;
  29. location: Location;
  30. organization: Organization;
  31. excludedTags?: string[];
  32. }
  33. const makeGroupPreviewRequestUrl = ({groupId}: {groupId: string}) => {
  34. return `/issues/${groupId}/events/latest/`;
  35. };
  36. function AllEventsTable(props: Props) {
  37. const {location, organization, issueId, excludedTags, group} = props;
  38. const config = getConfigForIssueType(props.group, group.project);
  39. const [error, setError] = useState<string>('');
  40. const routes = useRoutes();
  41. const {fields, columnTitles} = getColumns(group, organization);
  42. const now = useMemo(() => Date.now(), []);
  43. const endpointUrl = makeGroupPreviewRequestUrl({
  44. groupId: group.id,
  45. });
  46. const queryEnabled = group.issueCategory === IssueCategory.PERFORMANCE;
  47. const {data, isLoading, isLoadingError} = useApiQuery<EventTransaction>([endpointUrl], {
  48. staleTime: 60000,
  49. enabled: queryEnabled,
  50. });
  51. // TODO: this is a temporary way to check whether
  52. // perf issue is backed by occurrences or transactions
  53. // Once migration to the issue platform is complete a call to /latest should be removed
  54. const groupIsOccurrenceBacked = !!data?.occurrence;
  55. const eventView: EventView = EventView.fromLocation(props.location);
  56. if (
  57. config.usesIssuePlatform ||
  58. (group.issueCategory === IssueCategory.PERFORMANCE && groupIsOccurrenceBacked)
  59. ) {
  60. eventView.dataset = DiscoverDatasets.ISSUE_PLATFORM;
  61. }
  62. eventView.fields = fields.map(fieldName => ({field: fieldName}));
  63. eventView.sorts = decodeSorts(location).filter(sort => fields.includes(sort.field));
  64. useEffect(() => {
  65. setError('');
  66. }, [eventView.query]);
  67. if (!eventView.sorts.length) {
  68. eventView.sorts = [{field: 'timestamp', kind: 'desc'}];
  69. }
  70. eventView.statsPeriod = '90d';
  71. const isRegressionIssue =
  72. group.issueType === IssueType.PERFORMANCE_DURATION_REGRESSION ||
  73. group.issueType === IssueType.PERFORMANCE_ENDPOINT_REGRESSION;
  74. let idQuery = `issue.id:${issueId}`;
  75. if (group.issueCategory === IssueCategory.PERFORMANCE && !groupIsOccurrenceBacked) {
  76. idQuery = `performance.issue_ids:${issueId} event.type:transaction`;
  77. } else if (isRegressionIssue && groupIsOccurrenceBacked) {
  78. const {transaction, aggregateRange2, breakpoint} =
  79. data?.occurrence?.evidenceData ?? {};
  80. // Surface the "bad" events that occur after the breakpoint
  81. idQuery = getSampleEventQuery({
  82. transaction,
  83. durationBaseline: aggregateRange2,
  84. addUpperBound: false,
  85. });
  86. eventView.dataset = DiscoverDatasets.DISCOVER;
  87. eventView.start = new Date(breakpoint * 1000).toISOString();
  88. eventView.end = new Date(now).toISOString();
  89. eventView.statsPeriod = undefined;
  90. }
  91. eventView.project = [parseInt(group.project.id, 10)];
  92. eventView.query = `${idQuery} ${props.location.query.query || ''}`;
  93. if (error || isLoadingError) {
  94. return (
  95. <LoadingError message={error || isLoadingError} onRetry={() => setError('')} />
  96. );
  97. }
  98. return (
  99. <EventsTable
  100. eventView={eventView}
  101. location={location}
  102. issueId={issueId}
  103. isRegressionIssue={isRegressionIssue}
  104. organization={organization}
  105. routes={routes}
  106. excludedTags={excludedTags}
  107. projectSlug={group.project.slug}
  108. customColumns={['minidump']}
  109. setError={(msg: string | undefined) => setError(msg ?? '')}
  110. transactionName=""
  111. columnTitles={columnTitles.slice()}
  112. referrer="api.issues.issue_events"
  113. isEventLoading={queryEnabled ? isLoading : false}
  114. />
  115. );
  116. }
  117. type ColumnInfo = {columnTitles: string[]; fields: string[]};
  118. const getColumns = (group: Group, organization: Organization): ColumnInfo => {
  119. const isPerfIssue = group.issueCategory === IssueCategory.PERFORMANCE;
  120. const isReplayEnabled =
  121. organization.features.includes('session-replay') &&
  122. projectCanLinkToReplay(group.project);
  123. // profiles only exist on transactions, so this only works with
  124. // performance issues, and not errors
  125. const isProfilingEnabled = isPerfIssue && organization.features.includes('profiling');
  126. const {fields: platformSpecificFields, columnTitles: platformSpecificColumnTitles} =
  127. getPlatformColumns(group.project.platform ?? group.platform, {
  128. isProfilingEnabled,
  129. isReplayEnabled,
  130. });
  131. const fields: string[] = [
  132. 'id',
  133. 'transaction',
  134. 'title',
  135. 'release',
  136. 'environment',
  137. 'user.display',
  138. 'device',
  139. 'os',
  140. ...platformSpecificFields,
  141. ...(isPerfIssue ? ['transaction.duration'] : []),
  142. 'timestamp',
  143. ];
  144. const columnTitles: string[] = [
  145. t('event id'),
  146. t('transaction'),
  147. t('title'),
  148. t('release'),
  149. t('environment'),
  150. t('user'),
  151. t('device'),
  152. t('os'),
  153. ...platformSpecificColumnTitles,
  154. ...(isPerfIssue ? [t('total duration')] : []),
  155. t('timestamp'),
  156. t('minidump'),
  157. ];
  158. return {
  159. fields,
  160. columnTitles,
  161. };
  162. };
  163. const getPlatformColumns = (
  164. platform: PlatformKey | undefined,
  165. options: {isProfilingEnabled: boolean; isReplayEnabled: boolean}
  166. ): ColumnInfo => {
  167. const backendServerlessColumnInfo = {
  168. fields: ['url', 'runtime'],
  169. columnTitles: [t('url'), t('runtime')],
  170. };
  171. const categoryToColumnMap: Record<PlatformCategory, ColumnInfo> = {
  172. [PlatformCategory.BACKEND]: backendServerlessColumnInfo,
  173. [PlatformCategory.SERVERLESS]: backendServerlessColumnInfo,
  174. [PlatformCategory.FRONTEND]: {
  175. fields: ['url', 'browser'],
  176. columnTitles: [t('url'), t('browser')],
  177. },
  178. [PlatformCategory.MOBILE]: {
  179. fields: ['url'],
  180. columnTitles: [t('url')],
  181. },
  182. [PlatformCategory.DESKTOP]: {
  183. fields: [],
  184. columnTitles: [],
  185. },
  186. [PlatformCategory.OTHER]: {
  187. fields: [],
  188. columnTitles: [],
  189. },
  190. };
  191. const platformCategory = platformToCategory(platform);
  192. const platformColumns = categoryToColumnMap[platformCategory];
  193. if (options.isReplayEnabled) {
  194. platformColumns.fields.push('replayId');
  195. platformColumns.columnTitles.push(t('replay'));
  196. }
  197. if (options.isProfilingEnabled && platform && PROFILING_PLATFORMS.includes(platform)) {
  198. platformColumns.columnTitles.push(t('profile'));
  199. platformColumns.fields.push('profile.id');
  200. }
  201. return platformColumns;
  202. };
  203. export default AllEventsTable;